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

Data Design used in the Example

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:

Data used for the example

The data is then used to populate the page using our data design as follows:

Page flow for displaying the data

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.

Rendered Page after Data Design is added