Collapsible Area Action in Data Design
Last updated
Last updated
Collapsible Area Action in Data Design is a that allows you trigger the expansion or collapse of a elements that were generated using the block and dynamically added to the page or form.
The block consists of the following (from top to bottom):
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.
The behavior of the block is similar to the block, with some important differences:
Works only with elements generated using block that are dynamically added.
Element Selection: You can only choose an element placed inside the selected element.
Data Design: to choose the element whose element you want to target.
Action: that allows you to choose from three options:
Element: to choose the element, within the selected .
ID: Optional that accepts a value representing the unique value that was provided to the block. See below for more details.
ID2: Optional that accepts a 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 and is detailed below:
ID and ID2 not provided: Operate on the selected element for all generated instances of the same element.
ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same element with the same ID2 value.
ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same 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 element.
ID and ID2 provided: Operate on the selected element for all generated instances of the same element with the same ID and ID2 value.
The image below shows an example where the block is used to handle the click event for the element (Button79, labelled with a Down Arrow icon).
The Collapsible Area Action in Data Design block is then used to toggle the element (CollapsibleArea6) of the associated generated instance of the (DataDesign8).
The of the block are used to determine the associated instance and are passed as the ID and ID2 for the Collapsible Area Action in Data Design block.
Clicking on the element (Button79, labelled with a Down Arrow icon) of a specific company, results in the associated 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 to Expand, which will expand the selected element (CollapsibleArea6) for all generated instances.
