Dropdown

This article explains the features of the Dropdown block and how it can be used to design your app.

‍

Use Cases

1. Selecting a value from a pre-defined set of values
2. Dependent Dropdowns or Connecting dropdowns

Help Video

‍

Editing the Block

Click on the block and configure it by editing on the right panel.

‍

Label

The label is the name of the block that the end user sees in the app.

Example: Department. 

‍

Description

The description is the additional information provided to the end user which will be displayed below the input area.

Example: Select the appropriate option.

‍

This is how the Dropdown block with the label and the description will look to the end user.

‍

‍

‍

‍

‍

Required

Enable this option if you want the user to compulsorily input the data. If enabled, the end user can submit if and only if the data is entered in this field.

‍

Allow value to be changed after initial submission

This option is enabled by default. End users can edit the value entered in this field after creating a submission. Disable it if you do not want the end users to edit the submitted value.

Example: Between Student and Teaching Staff when the end user selects Teaching staff and creates a submission, the end user can go to the submission and change it to Student.

Advanced options

Use this option to show the advanced options to configure the dropdown text block.

‍

Dependency fields

Dependency fields are the different levels of dependencies (Level 1 dependency, Level 2 dependency...) on various dropdowns.

In simple words, when the end user selects an option first dropdown, then the second dropdown will only show the options corresponding to the selection and so on.

‍

The General format:

<value 1 from the first dropdown>||<value 1 to be shown against this selection>↵ Press Enter key

<value 1 from the first dropdown>||<value 2 to be shown against this selection>↵Press Enter key

<value 1 from the first dropdown>||<value 3 to be shown against this selection>↵Press Enter key

<value 2 from the first dropdown>||<value 1 to be shown against this selection>↵Press Enter key

<value 2 from the first dropdown>||<value 2 to be shown against this selection>↵Press Enter key

<value 2 from the first dropdown>||<value 3 to be shown against this selection>↵Press Enter key

‍

‍

‍

‍

Example for Dependency fields:

1. In the first dropdown i.e., Country, Enter India and USA as options

‍

2. In the second dropdown i.e., City, enter the city names corresponding to the country as shown below:

India||Bengaluru

India||Mumbai

India||Chennai

USA||New York

USA||San Francisco

USA||Manhattan

‍

Preview:

‍

‍

Allow multiple selections

Allow users to select multiple options from the dropdown

‍

Display this field if

Use this if you want to show or hide a field under certain conditions. It accepts the standard Clappia Formulae, similar to conditional sections.

1. You can type ‘@’ to get a list of all the variables in the app and select variables.
2. Using these variables you can write Excel-like formulae.

‍

Example: Between Student and Teaching Staff when the end user selects Teaching & Non-Teaching staff, you can show the Department field.

‍

‍

Preview:

‍

‍