# Event Action in Data Design

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

Available in: Page Flow

Toolbox Category: Dynamic Action

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

Use the **`Event Action in Data Design`** block to take an action when the user interacts with elements that were generated using the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block and dynamically added to the page or form.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fa85I7LVUsyYAFZHbipBl%2Fimage.png?alt=media&#x26;token=8dd1fc9c-714a-478c-a93b-7a98a7a15b99" alt="" width="325"><figcaption><p>Event Action in Data Design block</p></figcaption></figure></div>

The behavior of the block is similar to the [Event Action](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/event-action) block, with some important differences:

* Works only with elements generated using [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block that are dynamically added.
* Element Selection: You can only choose an element placed inside the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.

The block consists of the following (from top to bottom):

* *Event Name:*[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 name of the event you want to handle and take an action on. See the [Event names section](#event-names) for more details.
* *Data Design*: [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 whose element you want to target.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element, within the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design), for which you want to handle events.
* *ID*: 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 unique value that was provided to the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block. See below for more details.
* *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 can be used to identify the desired element. See below for more details.
* *Tasks*: a [Flow Parameter](https://docs.zingy.ai/app-editor/block-anatomy#flow-parameters) where you connect blocks that specify what you want done when the event occurs. Use the [Action/Event Info](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/action-event-info) block to get more information about the event. See Event Info section for more details about identifying the specific generated instance within which the event occurred.

{% hint style="success" %}
NOTE: For the most common use cases, the ID and ID2 values need to be blank when using the **`Event Action in Data Design`** block.
{% endhint %}

***

## Event names

Some of the common event names are given below:

<table data-full-width="true"><thead><tr><th width="164">Event Name</th><th>Description</th></tr></thead><tbody><tr><td>click</td><td>Mouse click on the selected element</td></tr><tr><td>contextmenu</td><td>Mouse right-click on the selected element</td></tr><tr><td>dblclk</td><td>Mouse double-click on the selected element</td></tr><tr><td>change</td><td>Changes to the selection of a <a href="../../page-editor/built-in-elements/dropdown">Dropdown element</a></td></tr><tr><td>keypress</td><td>Key press when the selected element is in focus</td></tr><tr><td>blur</td><td>Selected element looses focus</td></tr><tr><td>focus</td><td>Selected element gains focus</td></tr></tbody></table>

For a more comprehensive list of event names please refer to:

* [jQuery information about HTML events](https://api.jquery.com/category/events/)
* [Mozilla documentation on HTML events](https://developer.mozilla.org/en-US/docs/Web/Events)

{% hint style="success" %}
NOTE: In general, the **`Event Action in Data Design`** block can be used to handle any event not just the ones mentioned above or in the reference links.
{% endhint %}

***

## ID and ID2 usage

The behavior of this block depends on the ID and ID2 [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) and is detailed below:

* ID and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID2 provided and ID not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID2 value.
* ID provided and ID2 not provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID value. Since we recommend the ID value to be unique, this would choose one from all the generated instances of the associated [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element.
* ID and ID2 provided: Operate on the selected element for all generated instances of the same [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element with the same ID  and ID2 value.&#x20;

***

## Event Information

Within the blocks that are attached to the Tasks [Flow Parameter](https://docs.zingy.ai/app-editor/block-anatomy#flow-parameters), the [Action/Event Info](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/action-event-info) block can be used to get more information about the event.

Specifically in the context of dynamic content, the following additional information is provided (in addition to the [standard properties](https://docs.zingy.ai/app-editor/page-flow/action-event-info#properties)):

* *id*: Provides the ID value that was provided to the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block when generating this instance.
* *id2*: Provides the ID2 value that was provided to the [Content from Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/content-from-data-design) block when generating this instance.
* *name*: Provides the [friendly name for the element](https://docs.zingy.ai/page-editor/page-element-settings#name).
* *design*: Provides the [element identifier](https://docs.zingy.ai/page-editor/page-element-settings#advanced-tab) of the [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) element that was used to generate this instance.

***

## Usage Examples

{% hint style="info" %}
**NOTE: Please refer to the prerequisite information shown** [**here**](https://docs.zingy.ai/app-editor/page-flow/references/prerequisite-for-dynamic-content-block-examples) **before seeing the example.**&#x20;
{% endhint %}

\
The image below illustrates an example in which the ID and ID2 [value parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) are left blank and the *click* event is being managed for the Button element (*Button75*, labeled "Update").

Because both ID and ID2 are blank, the system will handle the click event for the button across all generated instances of the selected [Data Design](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/data-design) (*DataDesign8*).

When the *click* event occurs, the [Show Information Popup](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-information-popup) block is used to show a message containing the ID of the instance on which the [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element (*Button75*, labeled "Update") was clicked.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FOoOCZ3Grkios18rtCcV2%2Fimage.png?alt=media&#x26;token=99b6ab9f-c043-4c4c-bee1-ddc6f3e8c97f" alt=""><figcaption><p>Event Action in Data Design block example</p></figcaption></figure>

The image below shows the result of clicking the [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element (*Button75*, the Update button) for Company 2, which was rendered using the ID *ST101*.&#x20;

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FIePqGRZ0U8yE3UKuiphK%2Fimage.png?alt=media&#x26;token=00ce1436-5bd1-43b4-ad92-573560e7d6ba" alt=""><figcaption><p>Result of the example shown</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/toolbox-blocks/event-action-in-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.