Multi-Select Dropdown Component

 

Overview

The Multi-Select Dropdown component is a compact way to show a long list of options to your end-user. The Multi-Select Dropdown component shares almost all functionality with the standard Dropdown component. But, the Multi-Select component lets your end-user make more than one selection.

Though the Checkboxes component offers similar functionality, some scenarios require a Multi-Select Dropdown component. For example, if you have more than six options or don't want your full list of options shown on the page at all times, you can use the Multi-Select Dropdown component.

Examples of when to use a Multi-Select Dropdown component are:

  • Which countries have you visited in the last five years? Select all that apply.

  • Which of these products are you interested in? Select all that apply.

This component also allows for custom styling. The standard Dropdown component relies on your end-user's operating system to determine the visual look and feel.

The amount of data in your Multi-Select Dropdown can vary, so you have a few internal and external options for how to populate it:

External data retrieved from an API must be a table array of JSON objects.

The Multi-Select Dropdown component is located in the Primary Fields group to the left of the Module Builder.

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Field Text

 

A static image displaying the Multi-Select Dropdown component's Display settings.

Setting

Description

Property ID

A Property ID is the unique field ID used by Unqork to track and link components in your module.

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API calls.

Property IDs must use camel case (stylized as camelCase) without spaces or punctuation.

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Placeholder Text

A short prompt telling end-users the expected value of an input field. For example, Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Contextual Help

Setting

Description

Tooltip

A short hint that displays when an end-user positions their cursor over the Questionmark Icon (Tooltip) icon. Tooltips can display across more than one line.

Default State Options

Setting

Description

Hide Field

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting

Description

Input Behavior

Controls how end-users interact with the component. Choose from the following options:

  • Enable User Input: Allow end-users to view and enter data in this field.

  • Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.

  • Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

  • Read Only - Accessible: Makes the field non-editable and applies the readonly HTML attribute, which notifies screen readers that the field cannot be modified.

Allow Multiple Selections

When set to  (ON), your end-user can make multiple selections from the drop-down. Set to (OFF) if you only use the component for its custom styling.

By default, Allow Multiple Selections is set to (OFF).

Auto-Select Highlighted Option When Clicking Outside

When an end-user selects the drop-down, one of the options is automatically highlighted. When set to  (ON), the first highlighted option will be selected when the end-user clicks outside of the drop-down.

By default, this setting is set to  (ON).

Set Dropdown Menu Height

Sets the number of search result rows the component displays when filtered by an end-user. If there are more options than the number entered, your end-user can scroll to view them all. Or, they can enter a value to navigate to relevant results.

Show Clear Button

When set to  (ON), a Clear button displays after an end-user selects one or more options. The Clear button removes whatever selection(s) your end-user made.

By default, the Show Clear Button toggle is set to (OFF).

Hide Chevron

When set to  (ON), the arrow (chevron) to the right of the component is hidden.

By default, Hide Chevron is set to (OFF).

Item Template

Lets you choose which column of data you want to display as the label for the drop-down options. Replace the word label with your chosen attribute in the following string format: <span>{{ item.label }}</span>.

Use a Multi-Select Dropdown to ask your end-user what vehicle types they own. Because the end-user could own multiple vehicle types, enable the Allow Multiple Selections setting. As the end-user selects vehicle types, they display above the drop-down as a button.

Configure the Multi-Select Dropdown Component

Configure a Multi-Select Dropdown to contain a list of vehicles the end-user can select from.

1. Drag and drop a Text Field Component Icon Multi-Select Dropdown component onto your canvas.
2. In the Property ID field, enter vehicles.
3. In the Label Text field, enter Vehicles.
4. Under Formatting, set Allow Multiple Selections to  (ON).
5. Navigate to the component's Data settings.
6. Next to the Values table, click Edit. The Values table panel displays.
7. Below the Values table, click the New button seven times.
8. In the Values table, enter the following: 
# Option Label Option Value

1

Sedan

sedan

2

Coupe

coupe

3

SUV

suv

4

Truck

truck

5

Motorcycle

motorcycle

6

Tractor

tractor

7

Horse and Buggy

horseAndBuggy

As a best practice, enter column titles in lowercase, with no breaks or special characters.

9. Click Save Component.

Once implemented, here's how your Multi-Select Dropdown component displays in Express View:

Using the example above, in Express View, execute the AngularJS command in the DevTools Console. The vehicles Text Field Component Icon Multi-Select Dropdown component stores selected options in an array when viewed in the developer console. If no options have been checked, then the array is empty.

A static image displaying the angular inspection data.

Resources