Combo Box

1 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:

1.1 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

2 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:

• General
• Events
• Accessibility
• Common

Styling:

• Design Properties
• Common

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

2.1 General Tab

2.1.1 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
• Database
• Static

2.1.1.1 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:

• Association
• Enumeration
• Boolean

2.1.1.2 Database List

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

2.1.1.3 Static Values

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

2.1.2 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 (only for association data source)
• 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:

  

2.1.3 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):

  

  The Show selected item as property is only available for the Checkbox selection method without custom content.

• 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:

  

2.1.4 Label

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

2.1.5 Conditional Visibility

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

2.1.6 Editability Tab

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

2.2 Events Tab

The following configurations are available:

• On change – executes an action when the attribute value changes

2.3 Accessibility Tab

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

2.4 Common Tab

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

3 Styling

3.1 Design Properties Section

3.2 Common Section