Last Updated: July 29, 2021

Cascading

The Cascading form element allows you to show items based on information from the previous entries. It looks similar to a Dropdown element but it

It's configuration properties are composed of the following:

Field ID - Unique Field ID (Field IDs do not contain spaces)
Place Holder - The field name that will be displayed on the Cascading field.
Dataset - The dataset or Record App where the Cascading element will be linked.
Returned Column - The columns from the selected Dataset that the user would like to retrieve based on the Searchable Column input.
Searchable Column - The name of the column from the selected Dataset that will be searched on the currently selected field.
Form Control Lookup - The field in the user’s Form Builder that will receive the returned data from the selected Dataset.

Cascading Element Component Configuration

How to Set Up Cascading Form Element

Unlike most Form Element Tools, such as Text Field, Dropdown, Checkbox, and others that you can immediately function after being dragged and dropped into your form, the Cascading element requires prerequisites in order to function properly.

Requirements for setting up a Cascading element:
at least 2 linked Record Apps (or Data Tables for Admins)
at least 2 columns on your Form Builder

These prerequisites are necessary before you can get your Cascading element working on your Form Builder.

Let us try and create a sample Purchase Order Form that uses a Cascading element.

Step 1: Create the Record Apps
The contents of the Cascading element depends on the value of another form field that it is connected with via the Form Control Lookup. Because of this, we must link more than one Record App to our Cascading field so it can display accurate data based on selected value on the field that the Cascading field is attached to.

Step 1: Create a standard Record that will be the main "category" for your Cascading head.



Step 2: Then, create the second Record that will contain items that will be linked to each item from the first Record App.

To do this:
On the Records Designer of your second Record App, add three columns:
(Your Unique Field), Text Field: The first column of your second Record App and it functions as the column that will contain the list of all unique items that you will link to the items of the first Record App.
Linked (Unique Field) Name, Dropdown: The column where we will link an item from our second Record App to an item from the first Record App.
Linked (Unique Field) ID, Dropdown: The column where we will link the item ID of an item from our second Record App to an item from the first Record App.



Configure the Linked Name and Linked ID fields with the following configuration:

First, for the Linked Name field, put appropriate Field ID and Place Holder names. Then, check Use External Dataset.
For Dataset, choose the name of the first Record App we created. This allows us to select a Record App where we will link our second Record App.
For Value Column, select the Field ID of the column located in the selected Dataset. The selected item for Value Column will display the items from the selected Dataset and allow us to link our items from the second Record App to the first Record App.
For Display Column, select the Field ID of the column that will contain the list of items that you will see when you add an item into the second Record App.

Linked Name field configuration

Applying these settings we will have this set of configuration details for the Linked Name field:
Dataset: Product Type (Name of the first Record App since Record contains the items that we will link our items from our second Record App)
Value Column: productType (Field ID from Product Type Record App that contains the items that we need to link the items to our second Record App)
Display Column: productType (Field ID from Product Type Record App that we will be able to select once we start linking the items contained in the second Record App)

Linked ID field configuration

Second, for the Linked ID field, do the same steps and configuration settings as Linked Name field, but with a different Value Column value.
Instead, for its Value Column, select id in order to use the id value of each item on the selected Dataset as reference.

Applying these settings we will have this set of configuration details for the Linked Name field:
Dataset: ProductType
Value Column: id
Display Column: productType

Publish the Record and add data to it. Make sure that the Linked Name and ID fields are the same to successfully link the items from the second Record App to the first Record App.

Sample Second Record App with Linked Items

Step 2: Create the Cascading field via Form Builder
In this step, we are going to start configuring the Cascading element in our Form Builder. To do this:

Step 1: Put 2 columns in your Form Field and drag and drop a Dropdown and Cascading element in them respectively.



Step 2: Configure the Dropdown element. This will act as our Cascading head where the Cascading element will base its displayed items.



Give it a unique Field ID and appropriate Place Holder Name and check Use External Dataset
Dataset: Product Type
Display Column: productTypes

Click Save.

Step 3: Configure the Cascading element. This is where we will attach the Cascading element to the Dropdown list items.



Give it a unique Field ID and appropriate Place Holder Name
Dataset: Items (The Cascading element will display the items that it contains links the second Record App items to the first Record App items)
Returned Column: item (The column from the selected Dataset that will be retrieved by the Cascading element)
Searchable Column: linkedproductID (Links the items of the two records via their unique IDs)
Form Control Lookup: Select Product Category (The Place Holder name of the field that the Cascading element will be attached.)

Click Save.

Step 4: Go to Desktop preview to check if the Cascading configuration works correctly.

First Dropdown Shows Items from the First Record App: Product Types

Selecting Home Appliances shows all items from the second Record App: Items the linked items for the chosen Category in the first column

Selecting Mobile Devices shows all items from the second Record App: Items the linked items for the chosen Category in the first column

Selecting Device Accessories shows all items from the second Record App: Items the linked items for the chosen Category in the first column

RELATED ARTICLE(S):
PREVIOUS ARTICLE: 2.4.5. Configuring Search and Filter Element
NEXT ARTICLE: 2.4.7. NFC and Color Picker Elements

Need more help? Send us an email at customersuccess@quickreach.co, or send us a message on the chat widget.
Was this article helpful?
Cancel
Thank you!