Collapsible Area Action in Data Design
Last updated
Last updated
Collapsible Area Action in Data Design is a regular block that allows you trigger the expansion or collapse of a Collapsible Area elements that were generated using the Content from Data Design block and dynamically added to the page or form.
The behavior of the block is similar to the Collapsible Area Action block, with some important differences:
Works only with elements generated using Content from Data Design block that are dynamically added.
Element Selection: You can only choose an element placed inside the selected Data Design element.
The block consists of the following (from top to bottom):
Data Design: Selectable Input to choose the Data Design element whose element you want to target.
Action: Dropdown configuration setting that allows you to choose from three options:
Expand: Expands the element.
Collapse: Collapses the element.
Toggle: Toggles the state of the element i.e. collapses it if it is expanded and vice-versa.
Element: Selectable Input to choose the Collapsible Area element, within the selected Data Design.
ID: Optional Value Parameter that accepts a text value representing the unique value that was provided to the Content from Data Design block. See below for more details.
ID2: Optional Value Parameter that accepts a text value representing the secondary identifier that can be used to identify the desired element. See below for more details.
The behavior of this block depends on the ID and ID2 value parameters and is detailed below:
ID and ID2 not provided: Operate on the selected element for all generated instances of the same Data Design element.
ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same Data Design element with the same ID2 value.
ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same Data Design element with the same ID value. Since we recommend the ID value to be unique, this would choose one from all the generated instances of the associated Data Design element.
ID and ID2 provided: Operate on the selected element for all generated instances of the same Data Design element with the same ID and ID2 value.
The image below shows an example where the Event Action in Data Design block is used to handle the click event for the Button element (Button79, labelled with a Down Arrow icon).
The Collapsible Area Action in Data Design block is then used to toggle the Collapsible Area element (CollapsibleArea6) of the associated generated instance of the Data Design (DataDesign8).
The id and id2 properties of the Action/Event Info block are used to determine the associated instance and are passed as the ID and ID2 value parameters for the Collapsible Area Action in Data Design block.
Clicking on the Button element (Button79, labelled with a Down Arrow icon) of a specific company, results in the associated Collapsible Area element (CollapsibleArea6) to expand or close (based on it's current expanded state).
In the second example, we will illustrate the scenario where neither ID nor ID2 are provided. Additionally in this example we are setting the Action Dropdown configuration setting to Expand, which will expand the selected Collapsible Area element (CollapsibleArea6) for all generated instances.
