Combo Box

Last modified: November 19, 2024

Introduction

The Combo Box widget displays a list of options that users can select from. This is useful in scenarios where end-users need to filter their data through choices, such as being able to select or de-select different countries from a list.

A typical combo box can look like this:

Combo box example

Features

  • Supports different data sources:
    • Context:
      • Association
      • Enumeration
      • Boolean
    • Database lists
    • Static values
  • Supports custom content rendering
  • Supports custom footers
  • Supports options filtering for quick selection

Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Combo box properties consist of the following sections:

Properties:

Styling:

The following sections will describe the different available widget properties and how to configure the widget using them.

General Tab

Data Source Tab

The Source option (required) is used is used to configure the datasource type for the widget. It supports the following data types via these properties:

Context

When Context source is selected, the Data source section (required) configures the type of the context. It supports the following data types via these properties:

Database List

The database source type can be used to set the value of a string or integer attribute with options fetched from an attribute with the same type.

  • Selection type – (available in 2.0 and above) determines how other listen to widget data sources perceive the data. This property can only be used with widgets using a database data source.
    • Single – Allows only a single item to be selected from the options list.
    • Multi – Allows multiple items to be selected from the options list.
  • Caption – Allows custom captions to be displayed on the options list.
  • Store value (optional) – Determines where the selected value will be saved into.
Static Values

The static source type can be used to set the value of a string attribute with manually configured values.

General Tab

The General section allows you to configure general behavior and captions for the combo box. The following configurations are available:

  • Placeholder text – captions that will be displayed when there is no data being selected
  • Filter type – allows the user to type into the input and filter displayable options on the combo box
  • No options text – captions that will be used when filter results are empty, or shown when there is no data displayed in the combo box’s options
  • Clearable – if enabled, this allows selected data to be cleared all at once
  • Custom content – allows custom widgets to be displayed in the combo box instead of normal text values
  • Show footer – if enabled, this allows custom widgets to be placed in a combo box’s footer (as shown below). For example, you can include a link, button, or image in the footer. A popular choice is including a “new item” button in the footer:
    Shows a footer which can house custom widgets.

Multi Selection (Reference Set)

The Multi selection (reference set) section allows you to configure combo box behavior for reference set type datasource. The following configurations are available:

  • Selection Method – configures the behavior for selecting options

    • Checkbox – displays a checkbox on the left side of each option. Selected items will be marked by check marks.
    • Row click – each selected item will be filtered out from the displayed options. Items can deselected by clicking the on each of the displayed selected items.

  • Show selected item as – you can choose to display selected item as labels with buttons which allow those items to be deselected (shown at the top of this screenshot), or as simple comma-separated text (shown at the bottom):

    Show selected item as list or labels examples

  • Show Select All – you can choose to enable a “Show select all” button that will be displayed on the top of the options list. It allows the end-user to click it and select or deselect all options at once:

    Show select or unselect button header

Label

The Label section allows you to display labels for the combo box.

Conditional Visibility

For more information, see Visibility Section in Properties Common in the Page Editor.

Editability Tab

For more information, see Editability Section in Properties Common in the Page Editor.

Events Tab

The following configurations are available:

  • On change – executes an action when the attribute value changes
  • On enter action – executes an action when the user sets focus on the widget
  • On leave action – executes an action when the user moves focus away from the widget

Accessibility Tab

The Accessibility tab allows you to configure settings for combo box accessibility features.

Common Tab

For more information, see Common Section in Properties Common in the Page Editor.

Styling

Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.