Cascader Control

The Cascader Control is used to set the path/location of a definite element. It can be used to project parent-child relationships to reach the endpoint of a path.

A combination select and input field to choose a set of values from a multi-level tree. It supports direct input to search for values and can perform validation of the required field.

UI Properties

Info

  • Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  • Label: The text that is displayed helps the user to understand the type of control it represents.

  • Toop Tip: The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.

  • Description: The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.

  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  • Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.

  • Hidden: The hidden option helps to hide control from the user. This helps when you don’t want the user to view the control.

  • Trigger Dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  • Hide on desktop: This option hides the selected control in the desktop view.

  • Hide on Mobile: This option hides the selected control in the mobile view.

  • Dynamic Height: This option dynamically increases /decreases the height of the text control based on the given content.

  • Maintain space when hidden: This option maintains the specified space between controls when a particular control is hidden. When control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.

Note: Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are
available in Basic Freeflow Editor Only.

Properties

Under this section, we get several options related to formatting data on Cascader Control.

  1. Delimiter: This delimiter determines the symbol on which the path connected to our Cascader Control would be separated.

  2. Return Type: The return type option enables us to select the return type of the path data from the Cascader Control, which can be further used in the app by other controls. We can opt from string, array, and return only value in the Return Type section.

string return

The above images show that the ‘-’ is chosen as delimiter and the return type is a string.

  1. Selected: To provide color to selected element from the dropdown.

selected

image

  1. Hover Element: To provide color effect to hovered elements from the dropdown.

image

hover effect

How to use Cascader Control

Select Cascader under Custom section from Controls.

Bind Data to Cascader Control.

We get two options while binding data to the Cascader Control.

  1. Option: To specify the data being available as options in the dropdown of the Cascader ontrol.

  2. Selected Options: To specify the data which we want to be selected by default value to the Cascader Control.

In the above image, the data has been bound to the Selected Options.

We can bind data through different options present in the BIND data section, such as sheets, controls, connectors, variables, and more.

Using Cascader Control

You can view the path related to the parent element on selection. It will continue till the end element.

In the above image, the return type is string with ‘/’ delimiter.

In the above image, the return type is array with ‘,’ delimiter.

In the above image the return type is return only value sending the last value with a

‘-’ delimiter.