Dynamically Adding Items to a Picklist

One of the frequently asked questions in our support and forums is how to dynamically add items to a picklist based on selection in a previous picklist. This topic shows you how to build an application with Dynamic Picklist, with the help of an example.

• About the application
• Adding Deluge Script
• Embedded Form

About the application

Let us take the example of an Exam Registration application which requires a candidate to specify his Country, State and Pincode. When a candidate selects his country from the Country list, only the States belonging to the selected country must be displayed in the State list and Pincode will display only the codes belonging to the selected State.

Steps in creating the Exam Registration application with dynamic picklist:

1. Create the Country Form with the following fields:

   - Country Name: Text field to enter the name of the country

2. Create the State Form with the following fields:

   - Country Name: Lookup field imported from the Country form
   - State Name: Text field to enter the name of the States belonging to a country.

3. Create the Zipcode form with the following fields:

   - State Name: Lookup field imported from the Country form
   - Zipcode: Number field to enter the zipcodes of a state.

4. Create a Registration Form with the required fields like Name, Age etc.

   - Add the Country, State and Zipcode fields from their respective forms as a lookup field to the Registration form, as shown in the screen-shot below.

   

Adding Deluge Script

Let us add Deluge Script to populate the State field based on the country selected.

This is achieved by adding the on user script to the Country field, as shown in the code given below. The script will be executed when a country is selected from the country pick list. You can directly add the highlighted code to the Country field definition by selecting Free-flow Scripting from the Script tab or use the Script Builder to drag and drop the required deluge statements and create the script for you. Please refer the code explanation given below for more information.

        
		Country
        (
            type  =  picklist
            values  =  Country.Country_Name
            sortorder  =  ascending
            on user input
            {
                if (count(State[Country_Name == input.Country])  ==  0)
                {
                    clear State;
                }
                else
                {
                    for each state_list in State  [Country_Name == input.Country]
                    {
                        State:ui.add(state_list.State_Name);
                    }
                }
            }
        )
		

Using Script Builder

1. Edit the Country field in the Registration form and select Actions on User Input . This will display the Script editor in the Script tab.
2. Drag and drop the required If condition and If statements and use the Edit button to select the required fields and variables, as shown in the screen-shot below:
3. The If condition with the count deluge statement, counts the number of records in the State form, whose Country_Name is equal to the Country selected in the Registration form.

Note:

Count function is not supported in the Script editor. Hence, please specify the if condition (count(State[Country_Name == input.Country]) == 0) directly in the text area of the If dialog.

4. The clear picklist deluge statement, clears the State picklist field, if the count is 0, (i.e) no records exist in State form with the selected Country name. If the count is more than 0, the else statements will be executed.

   

5. Drag and drop the else statements as given below:

   • The state_list in the for each statement is a collection variable that fetches all the records in the State form whose Country_Name is equal to the Country selected. Since this variable is an array, it has to be iterated to get the properties of each state. The iteration is achieved using the for each deluge statement.
     

   
   

   • For each iteration the State_Name in variable state_list is added to the State picklist. This is achieved using the Add to picklist deluge statement.

    

   

6. Click Save Script to update the changes to the script definition.
   
7. Similarly, you can populate the Zipcode field based on the state selected.

This is achieved by adding the on user script to the State field, as shown in the code given below. The script will be executed when a state is selected from the State pick list. You can directly add the highlighted code to the State field definition by selecting Free-flow Scripting from the Script tab or use the Script Builder to drag and drop the required deluge statements and create the script for you.

State ( type = picklist values = State.State_Name sortorder = ascending on user input { if (count(Zipcode[State_Name == input.State]) == 0) { clear zipcode; } else { for each zipcode_list in Zipcode [State_Name == input.State] { zipcode:ui.add(zipcode_list.zipcode); } } } )

Exam Registration Form

The Exam Registration form is embedded below. Selecting a country from the country picklist will display only the states in that country, in the State picklist. The county/state picklist field in this form contains only sample data.

Note:

Currently, Zoho Creator does not support sorting of the values in a picklist which are added through script. We will be supporting this feature in our future updates.