# Prerequisite for Dynamic Content block examples

In order to make the Page Flow blocks related to [Dynamic Content](/app-editor/dynamic-content.md) easier to understand, we have created a common design and initial data, which we will explain in this section.

## Data Design

<figure><img src="/files/naL7VKoR24kN1tUgat0F" alt=""><figcaption><p>Data Design used in the Example</p></figcaption></figure>

The example uses the [Data Design](/app-editor/page-editor/built-in-elements/data-design.md) shown in the above image, and is summarized below:

* It consists of the [Text](/app-editor/page-editor/editing-text.md) and [Link](/app-editor/page-editor/built-in-elements/link.md) elements with [placeholder fields](/app-editor/dynamic-content.md#placeholder-fields) (***`stock ticker`***, ***`stock name`***, ***`stock price`***, ***`company link`***   )
* A [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md) (labelled Enabled)
* An [Input](/app-editor/page-editor/built-in-elements/input.md) element (Owned Quantity)
* Update [Button](/app-editor/page-editor/built-in-elements/button.md)
* Down Arrow [Button](/app-editor/page-editor/built-in-elements/button.md) (intended to expand the collapsible area).
* [Collapsible Area](/app-editor/page-editor/built-in-elements/collapsible-area.md) containing [Text](/app-editor/page-editor/editing-text.md) Element with the [placeholder ](/app-editor/dynamic-content.md#placeholder-fields) ***`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:

<figure><img src="/files/EadLbdcuKu1OCMl18Wfp" alt=""><figcaption><p>Data used for the example</p></figcaption></figure>

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

<figure><img src="/files/ttSuylWCDWtwvNcf3ChG" alt=""><figcaption><p>Page flow for displaying the data</p></figcaption></figure>

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](/app-editor/dynamic-content.md#placeholder-fields) using our data.

The [Initialize Toggle Switch in Data Design](/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design.md) block is used because our [Data Design](#data-design) contains a [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md) element.

## Rendered Page

The image below shows how the rendered page looks.

<figure><img src="/files/O9DcddfyrU7WOmXuXXsf" alt=""><figcaption><p>Rendered Page after Data Design is added</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-flow/references/prerequisite-for-dynamic-content-block-examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.