Prerequisite for Dynamic Content block examples
In order to make the Page Flow blocks related to Dynamic Content easier to understand, we have created a common design and initial data, which we will explain in this section.
Data Design
The example uses the Data Design shown in the above image, and is summarized below:
It consists of the Text and Link elements with placeholder fields (
stock ticker,stock name,stock price,company link)A Toggle Switch (labelled Enabled)
An Input element (Owned Quantity)
Update Button
Down Arrow Button (intended to expand the collapsible area).
Collapsible Area containing Text Element with the placeholder
stock info
Page Flow
The data used for the example consists of a list (stocks list) containing two items with sample information for Company 1 (with identifier ST100, stock ticker CMPN1) and Company 2 (with identifier ST101, stock ticker CMPN2). This is shown in the image below:
The data is then used to populate the page using our data design as follows:
The above flow consists of a list loop block that iterates through our stocks list and generates content using our Data Design by providing the value for the placeholder fields using our data.
The Initialize Toggle Switch in Data Design block is used because our Data Design contains a Toggle Switch element.
Rendered Page
The image below shows how the rendered page looks.
Last updated
