# Content from Data Design

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Dynamic Content

Block Type: [Output](https://docs.zingy.ai/app-editor/block-anatomy#output-block)

Output Type: [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)
{% endhint %}

**`Content from Data Design`** is an [output block](https://docs.zingy.ai/app-editor/block-anatomy#output-block) that is used to generate content using a [Data Design element](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) as a template. The output is of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) and is compatible with [Value Parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) or of type [*any*](https://docs.zingy.ai/app-editor/page-flow/references/value-types).

The generated content can be added to the page or form using the [Set Content](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-content) block. 

{% hint style="warning" %}
[Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox) and [Toggle Switch](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/toggle-switch) elements, used inside a Data Design element, need to be initialized using the [Initialize Toggle Switch in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/initialize-toggle-switch-in-data-design), after they are added to the page or form.
{% endhint %}

Each generated instance of the same [Data Design element](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) can be made unique for user-interactivity or modifications using the ID and the optional ID2 [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters). More on this below.

The block comes in two modes which are discussed below.

## Mode 1

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FTFbagjkroHV6jkHfRF7v%2Fimage.png?alt=media&#x26;token=29b25fbd-2793-4960-b8a0-95a0743441eb" alt="" width="414"><figcaption><p>Content from Data Design (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Content from Data Design block consists of the following (from top to bottom):

* *Element*: a [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element to use as the template.
* *ID*: Mandatory [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing a unique identifier that will be used to reference elements that are generated.
* *ID2*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the secondary identifier that will be used to reference elements that are generated.
* *Data*: [Value Parameter Set](https://docs.zingy.ai/app-editor/block-anatomy#value-parameter-set) consisting of named parameters. The named parameters must match the [Placeholder Field](https://docs.zingy.ai/dynamic-content#placeholder-fields) names used in the data design. Selecting the Data Design element will automatically populate the set with the [Placeholder Field](https://docs.zingy.ai/dynamic-content#placeholder-fields) names. You can also use the gear icon to manually add/remove parameters.

## Mode 2

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fzu497q6wUTKCDusjQIyh%2Fimage.png?alt=media&#x26;token=bad708f4-6ce9-4289-b645-542b6669a889" alt="" width="385"><figcaption><p>Content from Data Design (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Content from Data Design block consists of the following (from top to bottom):

* *Element*: a [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element to use as the template.
* *ID*: Mandatory [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing a unique identifier that will be used to reference elements that are generated.
* *ID2*: Optional [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the secondary identifier that will be used to reference elements that are generated.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts an [object](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value. The provided object must have properties with names that match the [Placeholder Field](https://docs.zingy.ai/dynamic-content#placeholder-fields) names used in the data design.&#x20;

***

## Usage Examples

The image below shows an example of **`Content from Data Design`** (Mode 1). The *Data* [Value Parameter Set](https://docs.zingy.ai/app-editor/block-anatomy#value-parameter-set) in this case contains three [Value Parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) whose values are set as shown. The names of these parameters are from the [Placeholder Field](https://docs.zingy.ai/dynamic-content#placeholder-fields) names used in the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) (*DataDesign8*).

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FEfC9wjTHxEFNxLtHHJHp%2Fimage.png?alt=media&#x26;token=c7581645-5626-4b04-8a19-7d62b2f17555" alt=""><figcaption><p>Example of Content from Data Design (Mode 1)</p></figcaption></figure>

In the next example we see the **`Content from Data Design`** (Mode 2) block. In this case the *Data* [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) is attached to a Variable Value block configured to use the variable *city info* whose value is an object with property names matching the [Placeholder Field](https://docs.zingy.ai/dynamic-content#placeholder-fields) names used in the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) (*DataDesign8*).

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FbK5N8DOLXIiFpX9l1zWx%2Fimage.png?alt=media&#x26;token=5fd1b4ac-4a33-473f-b027-15bd24677c60" alt=""><figcaption><p>Example of Content from Data Design (Mode 2)</p></figcaption></figure>

Both examples will have identical results with the output being attached to the [Set Content](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-content) block configured with the same element.


---

# 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/toolbox-blocks/content-from-data-design.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.