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.

Cascading drop-downs are supported on:

  1. The main form
  2. Any linked list on the main form
  3. Between the main form and any linked list

 

It's pretty powerful and uses the following notation:

cascadingDropdowns(parentLookupFieldName , childLookupFieldName, childLookupFilterFieldName);

 

In the following example, we will set up a basic cascade between two columns on a form namely "Countries" and "Cities".

  1. Create the "Countries" list and add some countries to it.
  2. Create the "Cities" list, add a lookup column "LookupCountry" that is connected to the "Countries" list from step 1 and then 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:
cascadingDropdowns("Country" , "City", "LookupCountry");

 

CascadingDropdownExample

 

In the example above the first field name (Country) is the internal column name of the parent column in the main form, the second (City) is the internal column name of the child column in the main form and the third (LookupCountry) is the internal column name used within the child list (Cities) to lookup the parent item in the Parent list (Countries).

 

Cascading drop down within a linked list
Use the same approach however you need to prefix the columns with the internal name of the linked list such as

cascadingDropdowns("LinkedListInternalName.Continent","LinkedListInternalName.Country", "Continent");

 

Cascading drop down between the main form and a linked list
You only need to prefix columns from the linked list

cascadingDropdowns("Continent","LinkedListInternalName.Country", "Continent");

 

  Note

You can extend the examples above to setup multiple cascades such as 2 or more levels likes Continent, Country and City using the following notation:

cascadingDropdowns("Continent", "Country", "Continent");
cascadingDropdowns("Country", "City", "Country");

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