> For the complete documentation index, see [llms.txt](https://docs.zingy.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zingy.ai/app-editor/page-flow/references/prerequisite-for-dynamic-content-block-examples.md).

# 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="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FaDk4P9TIwwlMD2loe7Q5%2Fimage.png?alt=media&amp;token=84f8f37c-9c02-4401-bf9c-a2974f291b1e" 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="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Ft5hBHu8STiRhfAh2NiHh%2Fimage.png?alt=media&amp;token=68c77143-1c50-4a4a-bdcf-1fd6e7170c17" 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="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FMcpnZOviC2fhxcJupPmP%2Fimage.png?alt=media&amp;token=555c9aed-7f1c-45a8-8e7e-718dfbe136f7" 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="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FE6PN2YWwzrAlSbYybKHi%2Fimage.png?alt=media&amp;token=ed0cb36a-9c88-4819-9584-35631f00c3da" alt=""><figcaption><p>Rendered Page after Data Design is added</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.