# Data Input Popup

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

Available in: Page Flow

Toolbox Category: Data - Edit

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

The **`Data Input Popup`** block is used to present an automatically generated form as a [modal](https://en.wikipedia.org/wiki/Modal_window) popup, for adding or editing a [record](https://docs.zingy.ai/data/database-tables#table-records) in a [database table](https://docs.zingy.ai/app-editor/data/database-tables). 

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FmQmhwS8vwA158cF5vJoq%2Fimage.png?alt=media&#x26;token=f071262e-6edb-401c-aa7b-bfc7775a2604" alt="" width="288"><figcaption><p>Data Input Popup block</p></figcaption></figure></div>

This block behaves similarly to the [Show Popup Form](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-popup-form) block, with some differences which are outlined below:

* **`Data Input Popup`** block does not require a [Form](https://docs.zingy.ai/app-editor/pages-and-forms/create-a-form) and automatically generates one based on the [table's fields](https://docs.zingy.ai/data/database-tables#table-fields).
* **`Data Input Popup`** block does not offer any customization for the design and layout of the field input elements, whereas [Show Popup Form](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/show-popup-form) block does.

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

* *Title:* [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 to use for the title of the popup.
* *Table:* [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 [Database Table](https://docs.zingy.ai/app-editor/data/database-tables) .
* *Dataset Name:* 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 name of the dataset. This is only needed if the *Dataset Refresh* parameter will be set to a value of *true*.
* *Data*: Optional [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 representing the record to be edited. If unassigned, the popup will create a new record.
* *Dataset Refresh*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [boolean](https://docs.zingy.ai/app-editor/page-flow/references/value-types) (true/false) value to indicate if you want the system to refresh the records in the same dataset after successful completion.
* *Success 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 operation completes successfully.

***

## Usage Example

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

The image below shows an example of **`Data Input Popup`** the block.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FcQvzEubleoAnOwVzGWaL%2Fimage.png?alt=media&#x26;token=49fe1d98-8205-4819-81eb-2e702968914c" alt="" width="549"><figcaption><p>Example of Data Input Popup block</p></figcaption></figure></div>

Here is a summary of the above example:

* The [Event Action](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/event-action) block is used to handle a [click](https://docs.zingy.ai/app-editor/page-flow/event-action#event-names) event for a button.
* The **`Data Input Popup block`** is used to present a popup form for the *Customers* database table.
* Since the *Data* parameter is unassigned, a new record will be added to the database based on the user's input.
* Upon a successful completion, the function *do something* is invoked, where an app specific action can be taken.

The result for the above example is shown in the image below, where the automatically generated form has all the fields in the [*Customers* database table](https://docs.zingy.ai/app-editor/references/prerequisite-for-data-examples#table-information).

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FPiBZ7OLvQI07MmGmY4ro%2Fimage.png?alt=media&#x26;token=1be920e4-bea7-42e7-93da-251775639626" alt="" width="563"><figcaption><p>Result of the example for Data Input Popup block</p></figcaption></figure></div>