Page layout — Combo box

Components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the combo box component.

Combo box

We can use a combo box to show users a picklist of items (Size, zip codes, salutation, etc.) and save the selection to a value.

Here is a combo box that shows the user three dress sizes:

Combo boxes can be single select – the user can select one option, or multi-select, where the user can select more than one option.

The combo box is based on React Selectize, a stateless select component for React.

If the combo box items are fetched from a service, a refresh button is appended to the right of the combobox, that will fire the data request again when clicked.

When the user scrolls to the bottom of the current set of items in the dropdown, the next page of items (if available) are fetched and appended to the list.

By default pagination is disabled for comboboxes populated by a list. We can enable it by setting the pagination attribute to true.

By default, 250 items are displayed on a page. We can change this number by changing the paging.select settings.

We can adjust the page size for a specific table by adding the paginationSize attribute.

Attributes

 

Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=2e51ffbb-9a4f-42d0-a1f4-94ea3608159c
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/select.json
  3. Tutorial: Using a combo box

Check out the glossary for a definition of terms and key concepts that appear in the Boomi Flow website, drawing tool, technical documentation, blogs, and marketing communications.

If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.