Cascading Element
Last Updated: May 24, 2022
How to Set Up Cascading Form Element
Multiple Cascading Heads
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.
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.
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.
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)
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.
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.
Multiple cascading heads allow you to create additional filter fields for your cascading element. This way, the value on your cascading field can be strictly narrowed down into more specific items in case you need two or more filter fields to extract your desired data..
Requirements for setting up a Cascading element:
at least 2 linked Record Apps
at least 2 columns dedicated as your cascading header fields on your Form Builder
1 Cascading form element
To set up multiple cascading heads, create a form similar above. The first two are configured as dropdown list that calls data from two separate records.
To enable multiple cascading heads, click on your Cascading element field and tick the Multiple Headers checkbox.
Then select from which Data Set or Record that your Cascading field will call data from.
Afterwards, click on Add Filter to add the form control element that you want to add as filters for your cascading.
Select each filter's Searchable Column to specify which column in the selected Form Control Lookup will act as a filter.
Then, check the Use Display Value checkbox beside each filter configuration.
Click on Ok to save your cascading field configuration.
Note: When Multiple Headers option is enabled, the cascading field will only display a value if all fields configured as filters in the cascading element have selected values in the form. If your cascading field doesn't show any value even if all filter fields are filled out, check your cascading element configuration if you have properly configured the Returned and Searchable Columns. You can find the field definitions here
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.
Contents:
How to Set Up Cascading Form Element
Multiple Cascading Heads
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.
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.
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)
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.
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.
Multiple Cascading Heads
Multiple cascading heads allow you to create additional filter fields for your cascading element. This way, the value on your cascading field can be strictly narrowed down into more specific items in case you need two or more filter fields to extract your desired data..
Requirements for setting up a Cascading element:
at least 2 linked Record Apps
at least 2 columns dedicated as your cascading header fields on your Form Builder
1 Cascading form element
To set up multiple cascading heads, create a form similar above. The first two are configured as dropdown list that calls data from two separate records.
To enable multiple cascading heads, click on your Cascading element field and tick the Multiple Headers checkbox.
Then select from which Data Set or Record that your Cascading field will call data from.
Afterwards, click on Add Filter to add the form control element that you want to add as filters for your cascading.
Select each filter's Searchable Column to specify which column in the selected Form Control Lookup will act as a filter.
Then, check the Use Display Value checkbox beside each filter configuration.
Click on Ok to save your cascading field configuration.
Note: When Multiple Headers option is enabled, the cascading field will only display a value if all fields configured as filters in the cascading element have selected values in the form. If your cascading field doesn't show any value even if all filter fields are filled out, check your cascading element configuration if you have properly configured the Returned and Searchable Columns. You can find the field definitions here
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.
Updated on: 24/05/2022
Thank you!