Select List Control

Add either a checkbox- or multi-select drop-down menu-style control from which the Request participant selects one or more options.

Control Description

The Select List control provides either a checkbox- or multi-select drop-down menu-style control from which the Request participant selects one or more options.

Set options that display in this control in one of the following ways:

• Provide each option: For each option, enter a unique value that represents the option, and then enter the text that displays as the option. After your options are configured, sort the order in which they are to display in the control. Alternatively, provide options in the control in JSON format.

• Reference data in a Request Variable: Reference data from the in-progress Request as options in this control. This data object must be part of the Request's JSON data model.

• Reference a data source in the JSON data model: Reference data from a Data Connector that displays in this control as its options. Specify the data name, value, and content from the Data Connector. See a design example. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. The order that data objects present in the data object determines the order these options display in the control; options cannot be manually reordered.

• Reference data in a Collection: Reference data from a Collection and display it as options in this control. Optionally, use a PMQL expression to filter the displayed options in real-time.

This control is only available for the following Screen types:

• Conversational-type

• Form-type

See Screen Types.

For documented examples of using this control, see:

• Dependent Select List Controls Display Countries and Regions from a Collection.

• Dependent Select List Controls Display Countries and Regions Using Two Data Connectors

• Data Connector Provides Options in a Select List Control

Checkbox Functional Description

When using the Select List control with checkboxes, the control functions similarly to multiple Checkbox controls whereby multiple options may be selected. Unlike using multiple Checkbox controls, the Select List control includes all selected options as an array in the order that options are selected. This array becomes part of the JSON data model as shown in the example below in Preview mode.

Drop-Down Menu Functional Description

When using the Select List control as the drop-down menu, multiple options may be selected one at a time. Selected options have the following attributes:

• Each selected option displays in the control.

• Each selected option displays in bold-style text in the drop-down menu. Furthermore, a red-colored highlight displays when hovering over a selected option, rather than the default green-colored highlight for deselected options.

Follow these guidelines to deselect an item from the Select List control when using the drop-down menu style:

• Select the option again from the drop-down menu.

The Select List control includes all selected options as an array in the order that options are selected. This array becomes part of the JSON data model as shown in the example below in Preview mode.

Add the Control to a Screen

Permissions

Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:

• Screens: Edit Screens

• Screens: View Screens

See the Screens permissions or ask your Administrator for assistance.

Follow these steps to add this control to the Screen:

1. Create a new Form-type or Conversational-type Screen or edit an existing one.

4. Configure the Select List control. See Settings.

5. Validate that the control is configured correctly. See Validate Your Screen.

Below is a Select List control where you can select a method to receive notifications.

Settings

The Select List control has the following configurable settings in the Properties Panel:

• Variable panel

• Configuration panel

• Data Source panel

• Design panel

• Advanced panel

Variable Panel Settings

Expand the Variable panel from the Properties Panel on the right to configure the following properties:

Variable Name

Use the Variable Name setting value in the following ways:

• Reference this value in Visibility Rule setting expressions.

• Reference a property from the selected value when the Select List control is of type object in the current Screen or with a Nested Screen control. To do so, first reference this control's Variable Name value in a Calculated Property, then use this Calculated Property in the target control. As a best practice, do not directly reference the Variable Name setting of a Select List control.

Example

2. Create a Calculated Property and set the Property Name setting to accountName.

3. In the JavaScript setting, enter the following JavaScript code:

   if (!this.account) {
       // if no account was selected return null
       return null;
   }
   return this.account.name;

See best practices when editing a Request variable name.

Label

Ensure that all Select List controls implemented in a Conversational-type Screen contain Label setting values. See Controls in Conversational-Type Screens Require Labels.

Validation Rules

Follow these steps to add a validation rule to this control:

1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

3. Select the rule that this control validates against.

4. Click Save. Parameters for the selected rule display. Parameter settings display which ones are required to properly configure the rule.

5. Enter the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.

Follow these steps to edit a validation rule for this control:

1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

3. Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.

Follow these steps to delete a validation rule for this control:

1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

3. Click Delete.

Make Required

Read Only

Configuration Panel Settings

Expand the Configuration panel from the Properties Panel on the right to configure the following properties:

Placeholder Text

Helper Text

Data Source Panel Settings

Expand the Data Source panel from the Properties Panel on the right to configure the following properties:

From the Data Source panel, select one of the following methods to specify options that display in the Select List control:

• Provide options: Enter a unique value that represents each option, and then enter the text that displays as the option. After your options are configured, sort the order in which they are to display in this control. Alternatively, provide options in this control in JSON format.

• Request data: Reference data from the in-progress Request as options in this control. This data object must be part of the Request's JSON data model. During the in-progress Request, the Select List control references a specified data array and object in the Request's JSON data model to display its values as options in that control. The order that data objects are in the Request's JSON data model determines the order these options display in the control; options cannot be manually reordered. See the following related topics:

  • Select List Controls: Avoid Using Request Data for Options in Which JSON Objects May Dynamically Change

  • Example: Dependent Field Design Example Using Select List Controls.

• Data Connector: Reference the data from a Data Connector's Endpoint as options in this control. These Endpoints a Data Connector references may be Application Program Interface (API) endpoints, Collection records, or other data source endpoints. During the in-progress Request, when the Select List control references data from the Data Connector, the control maps the Data Connector data to a specified JSON data array, variable or key name, or data object to become part of that Request's data. Data maps to the JSON data array in the same order it is retrieved from the Data Connector. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. The order that data objects return from the Data Connector determines the order these options display in the control; options cannot be manually reordered.

  See Example: Dependent Select List Controls Display Countries and Regions.

• Collection: Reference data saved in a Collection and display records from a Collection column. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. For an example, see Example: Dependent Select List Controls Display Countries and Regions from a Collection.

Provide Options

See the following procedures how to provide options for a Select List control.

Provide Options Using Screen Builder

Add an Option to This Select List Control

Follow these steps to add an option that displays in this control using Screen Builder:

1. Access the Data Source panel for this control while in Design mode, and then locate the Data Source setting.

5. In the Value setting, enter a value to represent the option in the Request data. This value must be unique from other values in this control. If the value is not unique to other Value settings in this control, the following message displays: An item with the same key already exists.

6. In the Content setting, enter the option that displays in this control.

Edit an Option for This Select List Control

Follow these steps to edit an option that displays in this control using Screen Builder:

4. In the Value setting, edit the value to represent the option in the JSON data model during in-progress Requests for Processes that use this Screen as necessary. This value must be unique from other values in this control. If the value is not unique to other Value settings in this control, the following message displays: An item with the same key already exists.

5. In the Content setting, edit the option that displays in this control as necessary.

6. Click Update. The edited option displays below the Options list label.

Delete an Option from This Select List Control

Follow these steps to delete an option from in this control using Screen Builder:

4. Click Delete.

Sort the Order of the Options

Follow these steps to sort the order of the options that display in this control using Screen Builder:

Set to Allow Multiple Selections and How Options Display

Follow these steps to set whether multiple selections can be selected from this control and how the options display:

3. From the Render Options As drop-down menu, select one of the following options:

   • Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.

Provide Options Using a JSON Schema

Provide Options Using a JSON Schema to This Select List Control

Follow these steps to provide options that display in this control using a JSON schema:

1. Access the Data Source panel for this control while in Design mode, and then locate the Data Source setting.

3. The JSON Data setting displays. If a valid JSON schema has been configured previously, the JSON Data setting displays the JSON. Otherwise, this setting is empty.

5. Enter your control options in the order they are to display in this control using JSON format. Use the scroll panel to the right of the JSON to scroll to different sections of the JSON if necessary. This is useful especially when you are editing a long JSON.

Set to Allow Multiple Selections and How Options Display

Follow these steps to set whether multiple selections can be selected from this control and how the options display:

3. From the Render Options As drop-down menu, select one of the following options:

   • Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.

Best Practice When Configuring a Select List Control Within a Loop Control

Make note of best practices when configuring a Select List control's options when that control is within a Loop control. When referencing a JSON array from a data source, configure the Select List control to reference the JSON object containing the JSON array and not its values. Then duplicate the JSON array in the Loop control. See Duplicate the JSON Array in a Select List Control Used in a Loop Control.

Best Practice When Editing a Collection Using a Select List Control in a Loop Control

Make note of best practices when editing a Collection record using a Select List control in a Loop control, configure the Select List control's Type of Value Returned setting with the Single Value option. See Use Single Value instead Object in a Select List.

Make note of practices to avoid when referencing Request data for the options in a Select List control.

Reference Request Data

Follow these steps to reference data from the in-progress Request as options in this control:

1. Access the Data Source panel for this control while in Design mode.

4. In the Option Label Shown setting, enter the JSON object key name from within the JSON array containing the Request variable from which to display as each option in this control. To use all JSON object key names in the JSON object, do not enter a value into the Option Label Shown setting. Use JSON dot notation as necessary.

   For example, consider the following JSON array within Request data named accountTypes that contains two JSON objects, both of which their key names are type:

   "accountTypes": [

   {"type": "Life"},

   {"type": "Medical"}

   ]

   To reference both values from the key name type as options in the Select List control, use the following JSON dot notation in the Option Label Shown setting: data.accountTypes. The JSON array must contain JSON objects composed of key names and corresponding values, not just values like the following:

   "accountTypes": [

   "Life", "Medical"

   ]
5. From the Show Control As drop-down menu, select one of the following options:

   • Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.
7. From the Type of Value Returned drop-down menu, select one of the following options:

   • Single Value: Select the Single Value option to indicate that only a part of the JSON object specified from the Option Label Shown displays as each option in this control. As a best and general practice, use single-value JSON objects.

Reference a Data Connector

Follow these steps to reference data from a Data Connector as options in this control:

1. Access the Data Source panel for this control while in Design mode.

4. From the Show Control As drop-down menu, select one of the following options:

   • Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.
6. From the Type of Value Returned drop-down menu, select one of the following options:

   • Single Value: Select the Single Value option to indicate that only a part of the JSON object specified from the Option Label Shown displays as each option in this control.
8. In the Content setting, enter the JSON object key name from within the JSON array containing the JSON response to display as each option in this control. To use all JSON object key names in the JSON object, do not enter a value into the Content setting. Use JSON dot notation as necessary. Optionally, use mustache syntax to indicate the JSON object key name from within the JSON array.

Consider the following example of doctors who work in a clinic.

doctors = [
    {id: 1, name: 'Adam Ardin', gender: 'male'},
    {id: 2, name: 'Amanda Creek', gender: 'female'},
    {id: 3, name: 'Lucy Morales', gender: 'female'},
    {id: 4, name: 'Mindy Smith', gender: 'female'},
    {id: 5, name: 'Toby Tomlinson', gender: 'male'}
]

Use the following settings to reference this data array as options for this control:

• Element Name: doctors

• Value: id

• Content: name

Suppose that a new patient at the clinic indicates that she wants to see a female doctor. To filter doctors from this JSON data array who are female in the clinic so that only those objects display as options in a Select List control, use the following PMQL expression in the PMQL setting of that control:

gender = "female"

Reference a Collection

Follow these steps to reference data from a Collection as options in this control:

1. Access the Data Source panel for this control while in Design mode.

5. 1. Selecting City Name in Label and Value displays the name of all cities in the Select List control and save the name of the selected city in Request data.

   2. Selecting City Name in Label and Zip Code in Value, displays a list of cities, but saves the Zip Code of the selected city in Request data.

See Example: Dependent Select List Controls Display Countries and Regions from a Collection.

Design Panel Settings

Expand the Design panel from the Properties Panel on the right to configure the following properties:

Text Color

Background Color

Advanced Panel Settings

Expand the Advanced panel from the Properties Panel on the right to configure the following properties:

Default Value

Enter the default value this control displays. The default value can be assigned as a Request variable, text or JavaScript. When the Screen submits, the Request uses this control's default value unless the Request participant changes it. When using a Request variable in the Default Value setting, consider the following:

• If the Request variable is empty, the control does not display any value by default.

• When the Request variable is assigned a value for the first time, this value becomes the permanent default value of the control.

• Any further changes to the Request variable do not affect the default value of the control.

The Default Value setting supports using Request variables in mustache syntax. For example, if the Default Value setting is {{ FirstName }} {{ LastName }} from which a Request participant entered her first name and last name in separate controls (respectively) earlier in that Request, this control displays the contents of those controls by default during the Request.

There are two ways to enter the default value this control displays.

Enter the default value as text (default)

When the Select List control is configured with Provide Options, the Default Value setting compares numerical values as a string.

If the Select List is configured with Provide Options Using a JSON Schema, take care to enclose the numerical values in quotation marks (such as "1") because this can cause errors when comparing against the Default Value setting value.

[
    {
        "value": "1",
        "content": "Joyce"
    },
    {
        "value": "2",
        "content": "Natty"
    },
    {
        "value": "3",
        "content": "Franny"
    },
    {
        "value": "4",
        "content": "Beatty"
    },
]

If you need to compare default values other than a String-type value, enter the default value using JavaScript.

Enter the default value as JavaScript

As opposite to the default setting, the JavaScript setting accepts values different to a String. Then if the Select List is configured with Provide Options Using a JSON Schema, then enter the Default Value as in the JSON schema. For example enter return 2;if the JSON values are integers like:

[
    {
        "value": 1,
        "content": "Joyce"
    },
    {
        "value": 2,
        "content": "Natty"
    },
    {
        "value": 3,
        "content": "Franny"
    },
    {
        "value": 4,
        "content": "Gan"
    },
]

Visibility Rule

For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see Show or Hide Controls Based on Button Selection.

Note the following regarding how to use visibility rules:

• To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.

• Visibility rules override custom CSS settings.

Device Visibility

Select on which device types this control displays:

• Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.

• Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.

CSS Selector Name

Then, use this name in the Custom CSS feature to apply CSS styling to this control as follows:

[selector='Submit Form'] {
    color: blueviolet;
}

See the following best practices regarding custom CSS in Screens:

• Editing a CSS name to represent this control in custom CSS syntax

• Visibility rules override custom CSS setting

Aria Label

Enter the string that provides a text alternative to this control for the following purposes:

• Assistive technology, such as screen readers, read the Aria Label setting value.

• This control has a visual indication of its purpose, such as a control that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.

Tab Order

Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.

See best practices for setting the tab order for a Screen's controls.