Set CSS in Data Design
Last updated
Last updated
Set CSS in Data Design is a regular block that allows you to add and/or remove CSS classes from 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 Set CSS 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.
Element: Selectable Input to choose the element, within the selected Data Design, you want to add/remove the CSS classes for.
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.
Add Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be added. Can be empty if you do not want to add any CSS classes.
Remove Classes: Value Parameter that accepts a text value containing the classes (multiple classes can be separated by a space) to be removed. Can be empty if you do not want to remove any CSS classes.
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 in which the CSS class table-info is added to the Text element that displays the current stock price (Text460) for Company 2, which as rendered with the ID ST101 .
The result of the above example is highlighted below, where the stock price for the Company 2 is displayed with a different background color due to the CSS class table-info that was applied.
In the second example, we will illustrate the situation where neither ID nor ID2 are provided. In this scenario, the system will alter the CSS classes for the same Text element (Text460) across all generated instances. Specifically, we are adding two classes: bg-danger (which sets the background color to red) and text-light (which sets the text color to white).
The result of the above example is highlighted below where the Text element displaying the current stock price (Text460) shows text with a red background and white text for both the companies.
