Multiple Select

In this section you will learn how to use Multiple Select

One common type of form is Multiple Select. Multiple Select is useful for when you want auser to be able to select multiple values. This has many applications for an app, but one common use case is using Multiple Select to filter records in a table.

Multiple-Select Style

Multiple-Select component can be used as a multi-select dropdown menu or auto-complete box with the ability to type to search and choose more than one value.

Allow Adding Options

The Auto-complete box style gives you the ability to allow adding values to the list. in case you need to chose an item and it is not in the list by default. To achieve this, turn on the property 'Allow Adding Option' and in the runtime type the value you need to add, if not found, an option to add this value to the list will be shown.

Filtering tables with Multiple Select

To use a Multiple Select component as a filter, you need to do two things:

1. Create the Multiple Select form

2. Connect the Multiple Select form to your table as a filter

Create the Multiple Select form

To create a multiple-select form:

1. Drag and drop the Multiple Select component into your app

2. Click on it, and the Multiple Select component will appear on the right.

Now, you need to set up the options that your user will be able to choose from. You can do this by specifying the options manually or by loading the options.

To specify options manually, follow the steps:

1. Scroll down and click on the Add an Option button

2. Add Options

To load the options, follow the steps:

1. Click on the Load Options

2. Choose the resource and collection that you want to load options from

3. Choose the fields in that collection that you want to use for your labels and values

4. Click Load and Customize options. You can also add subtitles or icons that would then appear in the Multiple Select component.

After loading the options, be sure to double-check that they are correct and make any changes as necessary. Sometimes extra values will be added, but you can click on the delete icon next to them to ensure that the list of options is correct.

At this point, my Multiple Select component is set up, but you still need to connect it to my table as a filter.

Connect the Multiple Select form to your table as a filter

1. Click on your table to open up the table menu on the right.

2. Click on Filter, and then in the Apply Filters section, click on Add.

3. Next, select the field that you want to filter by, and how you want it to filter. Choose discount provided -> discount provided equals

4. For Multiple Select, it is most common to choose the [field] as one of the options, but depending on your needs, you might also choose to exclude [field] as one.