Set Style in Data Design

Block Information

Available in: Page Flow

Toolbox Category: Dynamic Style/CSS

Block Type: Regular

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):


ID and ID2 usage

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.


Usage Examples

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.

Last updated