Multiple Dropdown Component

Function

a!multipleDropdownField( label, instructions, required, disabled, placeholder, choiceLabels, choiceValues, value, validations, saveInto, validationGroup, requiredMessage, labelPosition, helpTooltip, accessibilityText, showWhen, searchDisplay, data, sort )

Displays a list of choices for the user to select multiple items and saves values based on the selected choices.

If users should only select one choice, use radio buttons or a dropdown component instead.

If there aren't many choices and users would benefit from easily seeing them all at once, consider using checkboxes.

Parameters

Usage considerations

Using the choiceLabels and choiceValues parameters

When you select a record type in design mode, the Choice Labels and Choice Values are automatically populated with record field references. By default, the labels will be the first text field from the record type, and the values will be the primary key field.

If you select the Other option, you need to configure these parameters manually. As you configure them, keep the following points in mind:

• Choices display in the order defined in the Choice Labels.
• The Choice Labels cannot be null.
• Choice Values cannot contain nulls or duplicate values.
• The Choice Labels list and Choice Values list must be the same length.

These rules also apply when using data from a record type, except that choice order is determined by any sorting applied in the Sort section. If no sorting rules are configured, the choices are displayed in ascending order of the Choice Values field.

Selecting, saving, and clearing values

• If a single item is selected, the system saves a single-item array.
• If no selection is made or the selection is cleared, the system saves a null value into the component's Save Selection To field.
• Users can always clear the value using the x icon on web or the Clear link on the mobile application.

Dropdowns vs pickers

• If you are trying to decide whether to use a dropdown with search or a picker component, keep in mind that the dropdown search runs client-side and the performance cost of loading options happens on initial load whereas the picker search runs server-side and the performance cost of loading options happens while the user is searching. For small sets of options, we recommend using the dropdown component.

Examples

Use the interactive editor below to test out your code:

Multiple dropdown with the first choice selected by default and search on auto

Since the searchDisplay parameter is set to AUTO and the number of choiceValues is less than 12, no search box will be displayed.

Since the searchDisplay parameter is set to AUTO and the number of choiceValues is more than 11, a search box will be displayed.

Dropdown with no choice selected by default and search on

Since the searchDisplay parameter is set to ON, even though the number of choiceValues is less than 12, a search box will be displayed.

Multiple dropdown with choices from a record type

In this example, imagine you are building a form that lets users create an order. The Order record type has a one-to-many relationship with an Order Line record type. The product for each order line is represented by the itemId field.

We'll use the multiple dropdown component so users can add one or more items to their order. The component's choices are retrieved from a Product record type. choiceLabels uses the name field and the corresponding choiceValues are set using the record type's primary key field, id.

1
2
3
4
5
6
7
8
a!multipleDropdownField(
  data: recordType!AT Product,
  choiceLabels: recordType!AT Product.fields.name,
  choiceValues: recordType!AT Product.fields.id,
  label: "Products",
  value: local!products,
  saveInto: local!products,
)

As the user selects products, the corresponding values are saved to the local!products variable. When they are finished making selections, we can add their selections to the rule input that is passed to a process model. The user will click a button to submit the order, and we can use that interaction to finish constructing the rule input. In the button component's saveInto parameter, we'll use a!forEach() to iterate over the local!products list and save each value as the itemId of an Order Line.

1
2
3
4
5
6
7
8
9
10
11
12
13
a!buttonWidget(
  label: "Submit order",
  value: local!items,
  saveInto: a!forEach(
    local!products,
    a!save(
      ri!order[recordType!RE Order.relationships.orderLine][fv!index][recordType!RE Order Line.fields.itemId],
      fv!item
    )
  ),
  style: "OUTLINE",
  submit: true
)

Feature compatibility

Old versions

There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

Related Patterns

The following patterns include usage of the Multiple Dropdown Component.

• Task Report Pattern (Grids, Filters, Process Task Links, Task Reports): Provides a simple way to create and display an Appian task report.

Feedback