Follow

Input > Multiselect

In the case where there are multiple checkboxes which refer to the same item, it is a best practice to put them under a single mobile control. This control creates a better user experience by reducing the number of controls and by simplifying the interaction with them.

For example, imagine that you are required to select your favorite fruits by clicking on checkboxes. As all of the options refer to a single question, it is best to capture them under one mobile control.

Screen_Shot_2017-05-22_at_4.14.54_PM.png

To capture these checkboxes, select "Multiselect" from the Input dropdown in the Simplify Toolbar.

Multiselect.png


Click on one of the checkboxes.

Screen_Shot_2017-05-22_at_4.13.21_PM.png

After the first click  a dialog will appear to guide you throughout the process. Keep clicking on the relevant options until all of them are highlighted. After selecting two or three items, the rest of the checkboxes should be automatically selected by the Capriza Designer.

Screen_Shot_2017-05-22_at_4.13.32_PM.png

To finish the selection, click once again on a selected checkbox.

A dialog may appear to make sure that the checkboxes have the corresponding labels. Clicking the Correct button will take you to the next step, and Incorrect will the stop the process and the Multiselect item will not be created. If the labels don’t match and the checkboxes have static labels, i.e. the first checkbox’s label is always ‘Monday’, we recommend to continue the process and alter the labels later using the In-Line Editor (ILE).

After clicking the Correct button a dialog appears which asks if at least one of the items is checked. After answering, click on a previously selected checkbox again to complete the process.

 

Interacting with the Multiselect Mobile Control

Clicking the mobile control opens a list, from which you can choose the items. In contrast to radio buttons, Multiselect allows you choose as many Items as you like. Just click on the item. Click the checkmark to save your selections.

Screen_Shot_2017-05-22_at_4.13.51_PM.png

 

Styling Options

Access the In Line Editor (ILE) to customize your multi-selector control.

Screen_Shot_2017-05-22_at_4.14.11_PM.png

Configuration options include:

  • Presets: Choose between Standard, No Gutter, and Full Border layouts.

  • Display: Vary the width and background color of the input field.

  • Content: Specify placeholder and tooltip text.

  • Text: Change various aspects of the control's text and label. See Text & Label Styling Options for more information.

  • Suggest Recent Values: Automatically selects values recently selected values.

  

Selection Options

You may also choose to only display some items included in the web version of the Multi-Selector within your Zapp. To edit which options are available, hover over the menu in the Zapp and click on the wrench icon then go to the Properties tab.

Screen_Shot_2017-05-22_at_4.14.31_PM.png

Select "All options" if you want all the menu options to be available in the zapp. To only display select options, click "some options and then check the options you would like to be available in the zapp.

You can also rename the options you selected.

Note: Once you select "Some options," the menu becomes static and new options that are available in the web applications will not be automatically made available to the user unless you edit the Zapp and select them.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.