Create a Dependent Dropdown
A dependent drop-down is a kind of a list whose value is dependent on another value. You can add multiple dependents and therefore, your dependent drop-down can be as long as you want.
How to Add a Dependent Dropdown?
To give a step-by-step explanation, we will create create a dependent dropdown field to select country and state while filling personal details of people.
#1. Create Required Collections
Start by creating collections to store the names of countries and states. Then a collection to bind them all, i.e. Personal Details collection in the example we are showing.
#2. Add Fields in Country Collection
Start by adding a text field. As you have to create a parent-child relation between the Country and State collections, create a reference field with reference to the State collection.
#3. Add Fields in State Collection
First add a text field. Then, add a Child Of field with reference to the Country collection so that a parent-child relation can be built between the Country and the State collections.
#4. Add Fields in Personal Details Collection
Add a text field so you can add name of the states in it. Then add a Reference field with reference to the Country collection, so that you can add different states under one country.
Then, create another Reference field with reference to the State collection.
#5. Go to Events
Go to events and click the Add Event button. You will be redirected to the events page, where you can create a dependent dropdown event.
#6. Name the Event
Type the event name and click the Create button. You will be redirected to the event configuration section, where you can add a series of actions of you choice.
#.7 Add the Event Action
Click the add icon and take the cursor to Collections. A list of events under the collections category would appear. Click on the option, Dependent dropdown.
#.8 Create a Dependent Dropdown Event
As you click on the option, Dependent Dropdown, a pop-up would appear. Fill the required fields to create a dependent dropdown event. So start by selecting Personal Details collection that is connected to both Country and State collections. Then, select the page on which you will display the workflow of the dependent dropdown event.
Once done, click the Create button.
#9. Bind the Collection
Go to Forms category in the components panel and drag-and-drop a collection form in a page. Then bind the Personal Details collection to it.
#10. Bind the Event
After binding the collection, bind the dependent dropdown event to the collection form as well.
#10. Preview or Publish
Open the page in the preview or publish mode to see how the dependent dropdown event works.
