Set Style in Data Design
Last updated
Last updated
Set Style in Dynamic Design is a regular block that allows you to set a CSS Property on 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 Style 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):
Property: Value Parameter that accepts a text value containing the CSS Property you want to set.
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 change the style of.
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.
Data: Value Parameter that accepts a text value containing the value of the property you are setting.
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.
NOTE: Please refer to the prerequisite information shown here before seeing the example.
The image below shows an example in which the background-color CSS property of the Text element, which displays the current stock price (Text460), is set using the Color Selection block for Company 1, which is rendered with the ID ST100 .
The result of the above example is highlighted below where the background color is seen.
In the second example, we will present the scenario where neither ID nor ID2 are provided. In this case, the color CSS (which determines the text color) is set to red (in hex triplet format) for all generated instances.
As a second example we will show the case where ID and ID2 are not provided. In this case the color CSS Property (which determines the text color) is set to the red (in hex triplet format) for all generated instances.
The result of the above example is highlighted below where the Text element containing the current stock price (Text460), displays text in red for both the companies.
