Data Entry Controls

This page describes the controls that you can add to a data entry element.

Some properties are common to many data entry controls. These are described in Common Properties rather than under each control.

Action properties are not described here. These run one or more actions at a particular time, such as when a control is given focus or its value is changed. For more information about actions, see Action Builder.

Heading

Use a Heading control to add a heading to a data entry element.

Property Description
Text Defines the Heading text to show in Syntelate XA. Click the Text box to show the heading editor, where you can type the text that you want to show and also insert references to database fields.
Heading style

Defines the type of heading, from h2 (most important) to h4 (least important).

For more information about headings in HTML, see https://www.w3schools.com/html/html_headings.asp.

Add trailing border?

Adds a border beneath the heading.

H2 heading with a trailing border

Text

Use a Text control to show read-only text to agents in Syntelate XA.

For scripts, use this to add speech (text that the agent should read out to the customer) and instructions (instructions to the agent to take particular actions).

Property Description
Text

Defines the text to show in Syntelate XA. Click the Text box to show the text editor, where you can type the text that you want to show and also insert references to database fields.

Screenshot showing a text control in Syntelate Studio and Syntelate XA

Text type

Defines whether the text is standard text, speech, or an instruction. At runtime, speech and instructions look different to standard text.

Screenshot showing instructions and speech in Syntelate XA

Text box

A Text box is a single-line box for entering or displaying text.

As well as strings, use a text box for phone numbers, dates, and date and time fields.

Property Description
Masked? Hides the Text box’s value (by showing each character as •, as for a password input box).
Show Phonetic Alphabet icon?

Shows the NATO phonetic alphabet icon inside the text box. The agent can hover over this to see the text box’s value displayed in the NATO phonetic alphabet.

Screenshot showing the NATO phonetic alphabet

Text box type

Where the text box will contain a specific type of data, such as a date, phone number, or email address, select the appropriate option. Otherwise leave this property blank.

  • Date: Adds a date picker to the text box.
  • DateTime: Adds a date and time picker to the text box.
  • Dtmf: Shows the Click to call button beside the text box. The agent can click this to dial the phone number in the text box. Use, for example, where agents must dial a particular phone number before taking credit card details (so as to pause recording). DTMF stands for dual-tone multi-frequency.
  • EmailAddress: Validates the text box to ensure that it is either blank or in the format local-part@do.main. Where an agent tries to complete the record and this field is invalid, Syntelate XA prevents completion and highlights the field for correction.
  • PhoneNumber: Shows the Dial button with auto-dial or Dial button without auto-dial button beside the text box. The agent can click this to dial the phone number. Also prevents the agent from entering any characters other than numbers and the + symbol.
  • PhoneNumberText: Prevents the agent from entering any characters other than numbers and the + symbol. Doesn’t show the Dial button with auto-dial or Dial button without auto-dial button beside the text box.
Dial on click?

Defines whether Syntelate XA should dial the phone number as soon as the agent clicks the button (Dial button with auto-dial) or whether Syntelate XA should instead pass the phone number to the Dial window (Dial button without auto-dial).

This property only shows if you select PhoneNumber for Text box type.

Maximum characters Restricts the amount of content that the agent can type to the specified number of characters.
Include copy button? Shows the Copy to clipboard button beside the text box. The agent can click this to copy the text box’s value to the clipboard. The agent can then paste this to another field in Syntelate XA or else to a separate application.
Printing group

Used in conjunction with an action button where you want agents to be able to print information shown on their desktop.

For example, let’s say you want your agents to be able to print a customer email. You want both the subject (held in a Text box control) and the email body (held in an HTML editor control) to be included in the printout. In this case, you’d set the Printing group property of both controls to something like messagePrint.

Next you’d need to add an Action button control, give it a label like Print, and make it call an action with the following step:

  • Step type: Run JavaScript
  • : printGroupOfControls('messagePrint');
Show controls side by side?

Where you set this property, the width of the control will be set to 50% of the container column. If this control is followed by another control that also has this property set, they’ll be shown side by side at runtime.

Where this property is set, the Label alignment property will automatically be overridden to Top.

At runtime, if the container column is too narrow, Syntelate XA may disregard this property and show the control at full width.

Multiline text box

A Multiline text box is a multiline box for entering and/or displaying text.

Property Description
Rows

Defines the height of the Multiline text box in terms of number of lines. If the control’s value runs to more lines than this, a scroll bar appears on the control.

Maximum characters / Maximum words Restricts the amount of content that the agent can type.
Minimum characters / Minimum words Forces the agent to type at least the specified number of characters/words.
Show controls side by side?

Where you set this property, the width of the control will be set to 50% of the container column. If this control is followed by another control that also has this property set, they’ll be shown side by side at runtime.

Where this property is set, the Label alignment property will automatically be overridden to Top.

At runtime, if the container column is too narrow, Syntelate XA may disregard this property and show the control at full width.

A Dropdown allows an agent to select one option from a list of options. Use Dropdowns when there are a lot of options to select from.

Animation of a dropdown

Property Description
Items

Defines the available options. For each item, the first box defines what is stored in the database field when this item is selected, and the second box defines the text that is displayed to the agent in the Dropdown.

Click Add to add an item or The minus button to delete an item.

Show controls side by side?

Where you set this property, the width of the control will be set to 50% of the container column. If this control is followed by another control that also has this property set, they’ll be shown side by side at runtime.

Where this property is set, the Label alignment property will automatically be overridden to Top.

At runtime, if the container column is too narrow, Syntelate XA may disregard this property and show the control at full width.

Note: You can also add a dropdown whose values are populated from a data source object such as a database table. For more information, see Grid (property: Display as select list?).

Check box

A Check box allows an agent to make a binary selection (the check box is either selected or not selected).

Animation of a check box

Property Description
Default to checked?

Selects the Check box by default.

Note: A Check box can write the following values to a database field:

  • null: The check box was never selected.
  • 0: The check box was cleared by the agent. In other words, it was selected (perhaps by the Default to checked? property) but the agent cleared this.
  • 1: Check box selected.

Radio buttons

Radio buttons let agents click one option from a list of options. Use Radio buttons when there are only a few options to select from.

Animation of radio buttons

Property Description
Items

Defines the available options. For each item, the Value is what is stored in the database field when this item is selected, and the Text is what is displayed to the agent beside the radio button.

Click Add to add an item or The minus button to delete an item.

Display "Other"?

Lets agents select an Other radio button and then type their own value into a Text box. If you use this property, you must complete the following related properties:

  • Value for "Other": The value to write to the Radio buttons database field when the agent clicks Other.
  • Table name for "Other": The database table to store the agent’s entered value to.
  • Field name for "Other": The database field to store the agent’s entered value to.
Spread to columns? Displays the radio buttons in columns rather than one below the other.

Date box with intervals

A Date box with intervals lets an agent select an interval for, say, a customer callback.

Date box with intervals control

Property Description
Interval group

Defines the interval group to use with the control. Leave this blank to use the interval group associated with the workzone or else select a specific interval group.

To manage interval groups, use the Interval Manager.

Calculation

A Calculation lets you perform a calculation, for example calculating the customer’s age using their date of birth.

Calculations can be performed on numbers, dates, and strings.

Property Description
Expression

Defines the expression to use for the calculation. Click the Expression box to show the Calculation Builder, where you can build up your expression by inserting one or more functions as well as references to database fields.

Note: For calculations, the Table name and Field name properties are optional. This lets you display the result of a calculation in Syntelate XA without storing it in a data source object.

Grid

A Grid is a table that is linked to a data source object in your universe. As well as displaying data from this data source object, agents can use grids to add, update, and delete records in the data source object.

You design grids using Grid DesignerGrid Designer. But you can also create new grids from the Data Entry Designer, and view existing grids.

Screenshot of Inisoft Travel's Booking History grid

Property Description
Grid name

Defines the grid to use.

Click Add to create a new grid. You’ll have the option to open and start editing it straightaway.

Restrict height?

If No, the grid’s height extends to show all records.

If Yes, the grid has a maximum height (set by the Maximum height property). Where more records show in the grid than can be displayed within this height, the agent can scroll to view all records.

Maximum height Defines the height of the grid in pixels. Only shows if Restrict height? is Yes.
Auto-load? Defines whether data should be loaded into the grid when the page is loaded.
Enable linked data?

Only relevant where the grid’s data source is a stored procedure.

If Yes, a copy of the data is stored on the client. This is only needed where other controls are linked to the data source used by the grid.

Allow export? Shows an Export button that the agent can click to export the grid’s data as an Excel workbook.
Display as select list?

Displays a dropdown (not a grid). The values of this dropdown come from the grid’s data source object. This must contain columns with the following names:

  • itemValue
  • itemDescription
Grid style

Defines the visual style of the grid.

Show waiting message? Shows a waiting animation when the results are being retrieved.

HTML editor

The HTML Editor lets agents compose outbound emails.

The text that an agent enters in the HTML Editor is stored to the database as HTML. If you set the Show formatting options? property, the control includes a formatting toolbar, which agents can use to set formatting such as bold, color, and so on. You can also let agents use snippets.

Note: The HTML Editor is a third-party plugin called TinyMCE.

Track Changes

The HTML Editor can be set to track changes. Track changes can be enabled or disabled with the following configuration key:

<add key="flitePluginEnabled" value="false" />.

You will find that key in the appsettings.config file that's in the Agent Desktop directory. After you edit the app setting, you need to publish the HTML Editor in Data Entry Designer to complete the process.

Tip: As well as the toolbar, agents can use keyboard shortcuts such as Ctrl+Z for undo or Ctrl+B for bold.

Note: For an email or outbound SMS, write to the LKTL_MESSAGE field of the INTERACTION_X_NEWMESSAGE table. The Outbound Gateway service will then pick this up and send the email/SMS to the customer.

Property Description
Height Defines the height of the control in pixels.
Show edit options? Shows the cut, copy, paste, undo, and redo buttons in the toolbar.
Show formatting options? Shows the bold, italics, underline, alignment, color, and font buttons in the toolbar.
Show snippets? Shows snippets in the toolbar. You must select a Snippet group.
Snippet group

Defines the snippet group to use.

Only shows if the Show snippets? property is set to Yes.

Printing group

Used in conjunction with an action button where you want agents to be able to print information shown on their desktop.

For example, let’s say you want your agents to be able to print a customer email. You want both the subject (held in a Text box control) and the email body (held in an HTML editor control) to be included in the printout. In this case, you’d set the Printing group property of both controls to be something like messagePrint.

Next you’d need to add an Action button control, give it a label like Print, and make it call an action with the following step:

  • Step type: Run JavaScript
  • : printGroupOfControls('messagePrint');

Save and close button

A Save and close button lets an agent:

  • Save and close an interaction record.
  • Edit an interaction record that they are viewing (via the Use edit mode? property).
  • Cancel changes to an interaction record (via the Include cancel button? property).

Tip: Use a Save and close button when:

  • The agent manually creates a new interaction record.
  • The agent manually opens an existing interaction record and optionally makes changes to that record.

Use a Completion button when the agent is pushed a record to work on (a call, a chat, an email, and so on).

Property Description
Include cancel button?

Adds a cancel button that the agent can click to cancel any changes made to an existing record or to cancel the creation of a new record.

Use edit mode? Requires the agent, when opening an existing record, to click Edit before they can make changes to the record.
Completion code Adds a completion code a reason for ending an interaction (or an attempted interaction) with a customer to the interaction record when the agent clicks Save and close.
Set completed? Sets the record as completed when the agent clicks Save and close.

Completion buttons

A Completion button lets an agent save and close an interaction record.

This control lets you add one or more completion buttons.

Tip: Use a Completion button when the agent is pushed a record to work on (a call, a chat, an email, and so on).

Use a Save and close button when:

  • The agent manually creates a new interaction record.
  • The agent manually opens an existing interaction record and optionally makes changes to that record.
Property Description
Completion button items

Click Add to add a new button to the collection or The minus button to delete a button.

For each button, you can set the following properties:

  • Order: Defines the order in which buttons show. You can use any numbers; the lowest number will be the first button in the collection and the highest number will be the last button.
  • ID: A unique ID for the button.
  • Label: The text shown on the button.
  • Enabled condition: Disables the button from being clicked unless the specified condition is met. Click the box to show the Calculation Builder, where you can set your condition.
  • Completion code: Adds a completion code a reason for ending an interaction (or an attempted interaction) with a customer to the LKTL_COMPLETECODE field in INTERACTION_X when the agent clicks the button.

    Although this property is optional, the interaction record will only close if LKTL_COMPLETECODE is populated. You can, however, populate this field in other ways. For example, you could populate it via on action on a script box.

Action buttons

Use an Action button to associate one or more actions with a button. Syntelate XA will perform these actions when the agent clicks the button.

This control lets you add one or more action buttons.

Property Description
Action Button Items

Click Add to add a new button to the collection or The minus button to delete a button.

For each button, you can set the following properties:

  • Order: Defines the order in which buttons show. You can use any numbers; the lowest number will be the first button in the collection and the highest number will be the last button.
  • ID: A unique ID for the button.
  • Label: The text shown on the button.
  • After click actions: The actions to perform when the button is clicked.

Iframe

Use an Iframe (inline frame) to show another web page on an agent desktop.

Note: Where Syntelate XA is hosted over https, you won’t be able to display a non-https web page in the iframe.

In addition, some websites (such as https://www.facebook.com) do not allow themselves to be displayed in an iframe.

Property Description
Expression

If set, defines the URL of the web page to show in the iframe (overriding the Default source property).

Click the Expression box to show the Calculation Builder. Here you can, for example, select a database field that contains the URL to use.

Default source Defines the full URL of the web page to show in the iframe, for example https://en.wikipedia.org/.
Height Defines the height of the control in pixels.

Transcript

Use a Transcript, in conjunction with grids, to show the details of past customer interactions. The control shows:

  • For a chat: The chat transcript (whether it’s a web, SMS, or social media chat)
  • For an email: The email
  • For a voice call: The LKTL_AGENTNOTES field

Screenshot of an interaction history

You’ll need to add two grids with the transcript control:

  • A visible read-only grid with table INTERACTION_X_HISTORY as its data source (see Interaction History)
  • An invisible grid with view INTERACTION_X_MESSAGE_HISTORY as its data source and set to auto-select the first row

The transcript control itself should be linked to view INTERACTION_X_MESSAGE_HISTORY.

This set-up allows the agent to click a past interaction record in the visible grid. This then loads and automatically selects the relevant record in the invisible grid, allowing the transcript control to display the appropriate chat transcript / email / agent notes.

Property Description
Height Defines the height of the control in pixels.

Allocation

An Allocation control is used in data entry elements for configuration desktops to allow a user to allocate one type of thing to another, such as allocating an agent to an agent group.

You must associate an allocation control with an “allocation”. You can create a new allocation from the control’s properties.

Each allocation involves three database tables that must already exist. When configuring the allocation, you’ll have to select these tables and also select various fields in these tables. The following example goes over all of this.

EXAMPLE 

Let’s look at how you’d create an allocation that lets you allocate agents to agent groups.

In Syntelate XA:

  • Every agent is represented by a record in the AGENT database table. In our allocation, this is the source table.
  • Every agent group is represented by a record in the AGENTGROUPS database table. In our allocation, this is the selection table.
  • Every relationship between an agent and an agent group is represented by a record in the AGENTS2AGENTGROUPS database table. In our allocation, this is the allocation table.

The structure of the AGENTS2AGENTGROUPS table is as so:

AGENTGROUPNO AGENTNAME
1 jack@example.com
1 zac@example.com
2 jack@example.com

You can see that Jack belongs to agent groups 1 and 2 whereas Zac only belongs to agent group 1.

In our allocation, field AGENTGROUPNO is the Allocation selection field whereas AGENTNAME is the Allocation source field.

When a user allocates an agent to an agent group using the allocation control, the Allocation source field is populated with a field from the source table: the Source field. In our allocation, the Source field is the AGENTNAME field in the AGENT table.

Similarly, when a user allocates an agent to an agent group, the Allocation selection field is populated with a field from the selection table: the Selection value field. In our allocation, the Selection value field is the AgentGroupNo field in the AGENTGROUPS table.

The allocation control doesn’t display agent group numbers to the user, however. Instead it displays the names of agent groups. These are held in field AgentGroupName in the AGENTGROUPS table. In our allocation, this is the Selection text field.

Property Description
Allocation

Either select an existing allocation (if you have created one) or click Add to create a new allocation.

See the example above for an overview of each of the fields in the Add new allocation dialog box.

Height Defines the height of the control in pixels.

Email

An Email control lets an agent read and reply to customer emails or to send “unsolicited” outbound emails (outbound emails that are not sent in reply to an inbound customer email). This control is made up of several other controls, including an HTML editor for composing an outbound email.

Property Description
Mailbox for sending email

Select the mailbox (email gateway) to use to send the email.

Outbound only?

Click Yes where you want the control to be used for sending “unsolicited” outbound emails (in other words, outbound emails not sent in response to an inbound customer email).

Click No where you want the control to be used for replying to inbound customer emails.

Show CC field? Click Yes if you want to include a CC field for outbound emails.
Show BCC field? Click Yes if you want to include a BCC field for outbound emails.
Show forward button? Click Yes if you want to include a forward button for the inbound email. Agents can click this to forward the email to another email address.
Customer email address

Defines the email address to which the agent’s reply email should be sent. By default, this is set to: INTERACTION_X_MESSAGEEMAIL.LKTL_EMAIL.

Click the box to show the Calculation Builder, where you can set a different field if you wish.

Email subject

Defines the default subject of outbound emails. Click the box to show the Calculation Builder, where you can set this.

For example, where agents will use the control to reply to customer emails, you might set the subject to: RE: INTERACTION_X_MESSAGEEMAIL.LKTL_SUBJECT.

Attachments grid Select the grid for displaying any attachments to an inbound email.

New attachments grid

Select the grid for allowing agents to add attachments to an outbound email.
Snippet group Defines the snippet group to use in the HTML editor for the agent’s outbound email.
Send email on completion?

Defines whether the email should be sent when the agent clicks Send. Sets LKTL_COMPLETED to Y in the INTERACTION_X_NEWMESSAGE table.

If you do not set this to Yes, then you must have to some other way of setting this field to Y — from a supervisor desktop, for example. Otherwise, the email will never send.

Message body height Type a height in pixels for the box that displays the email message. This height does not include the height of the toolbar from which agents can format text and insert snippets.

Tabbing

If you activate tabbing for a data entry element, a special tabbing control shows at the top of the element. Use this to navigate between tabs. To add/delete tabs, edit this control’s properties.

Property Description
Tabs

Defines the tabs that the data entry element uses.

Tab name is the name of the tab that the agent sees, while Order defines the order in which tabs are shown to agents. Tabs with a lower order number are shown before tabs with a higher order number.

Click Add to add a tab or The minus button to delete a tab.

Show as tabs?

Defines whether agents navigate between tabs by clicking actual tabs or by selecting a tab in a dropdown.

For more information, see Enabling/Disabling Tabbing.

Common Properties

Some properties are common to many data entry controls. These are described here rather than under each control.

Required

These properties must be set.

Property Description
Table name The database table from which / to which the control’s value should be read/written.
Field name

The field in the above database table from which / to which the control’s value should be read/written.

Click Add to create a new field in this table.

Note: Be sure to select a field of an appropriate data type. For example, a Text box control with a type of Date must be mapped to a date field in your data source.

ID

Each data entry control must have an ID. This needs to be unique within the data entry element, but it doesn’t need to be unique, say, within the desktop in which the data entry element is used.

Optional

These properties control the look and operation of the control.

Property Description
Label/Sublabel Describes the control.
Placeholder text Help text that shows when the control is blank (in other words, before the agent enters a value). If you specify a Default value for the control, the Placeholder text only shows if the agent deletes this.
Hover text

Help text that shows when the agent hovers over the control with their mouse.

Default value Defines a default value for the control. The agent can edit this if required.
Required? Sets the control as required. Agents will not be able to save and close the interaction record unless they complete this control.
Read-only? Sets the control as read-only. Agents will not be able to change the value of this control.
Invisible?

Sets the control as invisible. Agents will not see this control.

As well as setting Yes or No, you can set a conditional statement using the Calculation Builder.

Label color / Text color

Label color specifies the color of the Label and Sublabel. Text color specifies the color of the control’s value.

You should generally leave these properties blank. When blank, Syntelate XA uses the colors of the agent’s selected theme. Use these properties when you want to draw the agent’s attention to a particular control.

Label alignment Defines whether the label is shown above the control or to the left of the control.
Text alignment Defines whether the control’s value or Placeholder text is aligned left, right, or center.