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

Cascading Dropdowns are very 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");

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 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 the main form & a linked list

You only need to prefix columns from the linked list

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

Multi-level Cascading

If you want a multi-level cascade, you can use the multiParentCascadingDropdowns.

In the following example, a single list stores car models including their manufacturer and fuel type. You are then able to add 3 dropdowns onto the form (“Manufacturer”, “Fuel Type”, and finally “Car Model”. Using the following script you can set up a 2 level cascade such that a user can choose a “Manufacturer” and “Fuel Type” and then when they click on the “Car Model” only items that match the selected “Manufacturer” and “Fuel Type” will be available for selection.

multiParentCascadingDropdowns("CarModel", [{parentLookupFieldName: "Manufacturers", lookupColumnName: "Manufacturer"}, {parentLookupFieldName: "TypesOfFuel", lookupColumnName: "TypeOfFuel"}]);

This example assumes all your data is in a single list.