Set CSS in Data Design
Last updated
Last updated
Set CSS in Data Design is a that allows you to add and/or remove from 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):
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.
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.
Element: to choose the element, within the selected , you want to add/remove the CSS classes for.
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.
Add Classes: that accepts a 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: that accepts a 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 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.
NOTE: Please refer to the prerequisite information shown before seeing the example.
The image below shows an example in which the CSS class table-info is added to the element that displays the current stock price (Text460) for Company 2, which as rendered with the ID ST101 .
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 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 element displaying the current stock price (Text460) shows text with a red background and white text for both the companies.
