Configure a cascading drop-down

Setting up a cascading drop-down within Sintel Forms is pretty easy and can be achieved using a combination of lookup lists and a Rule within the Logic screen of the Sintel Forms Designer as follows:

  1. Create the "Countries" list and add some countries to it.
  2. Create the "Cities" list, add a lookup column that is connected to the "Countries" list from step 1 and add some cities.
  3. Create the main list (the one in which you will enable Sintel Forms) and add 2 lookup fields "City" and "Country" that are linked to the "Countries" and "Cities" lists created in steps 1-2.
  4. From your main list launch the Sintel Forms Designer and click on the Logic Section from the top menu.
  5. Click on Add Rule and give it a name.
  6. There is no need to add a condition as you want this rule to execute always.
  7. Add a step choosing "Execute custom js function" and paste in the following JavaScript:
let parentLookupFieldName = 'Country';
let childLookupFieldName= 'City';
let childLookupFilterFieldName = 'CountryLookup';

cascadingDropdowns(parentLookupFieldName , childLookupFieldName, childLookupFilterFieldName);



You can re-use this example to setup any cascading drop-down you need by simply replacing the field names as required.

Also if you want to setup multiple cascades such as 2 or more levels you can use the following notation:
cascadingDropdowns("Continent", "Country", "Continent");
cascadingDropdowns("Country", "City", "Country");

Was this article helpful?
0 out of 0 found this helpful