# Interactions

## What is an interaction?

Interactions are the building blocks for your web app’s functionality. They create communication between your data, elements, scripts, and web app, allowing you to build an interactive interface.

Click the interaction bar or the button next to the element to start adding interaction.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FgWA6X4B1BN6hPxDgVscN%2FScreen%20Shot%202023-08-31%20at%208.30.34%20PM.png?alt=media&#x26;token=86535098-da2a-4214-85e6-7015830d26c9" alt=""><figcaption></figcaption></figure>

## What makes up an interaction?

An interaction consists of (1) an **Event** to trigger it, and (2) an **Action** to be performed. Interactions can be added to your pages, elements, and data nodes.

In the Interactions panel below the canvas, you'll be able to visualize the flow of an interaction.

The blue block represents the page, element, or data node that you are editing. Green blocks  represent a supported <mark style="color:green;">**event**</mark> that will trigger the action. Lastly, the **action** block contains the action that will be performed.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkrY5TlPkkwbWws0UYh00%2Fimage.png?alt=media&#x26;token=ea60acbe-045e-44ad-a6a3-8558832fa521" alt=""><figcaption></figcaption></figure>

## Action Flow

You are able to add any number of actions to fulfill your requirements and arrange their logical relationships accordingly. See detailed information in [ordering-interactions-with-action-flow](https://docs.acho.io/app-builder/app-construction/interactions/ordering-interactions-with-action-flow "mention")

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FXyLK1KoDaoCXySwXDxEU%2Fimage.png?alt=media&#x26;token=7186b067-01f0-4114-8e99-2ef7485afe34" alt=""><figcaption></figcaption></figure>

## Action input

Displays the schema of the input received by the action from preceding events or actions. Such input can be utilized within the current action. Consider the example below:

```json
code{
  "event": {
    "rowData": {},
    "tableData": "array",
    "rowKey": "string",
    "rowIndex": "number"
  },
  "prev": {}
}
```

In the context of an action triggered by a table row click event, the data from the clicked row can be accessed using the syntax `${rowData}`. See [event-payload](https://docs.acho.io/app-builder/app-construction/interactions/event-payload "mention") for more.

## Condition

This refers to the pre-requisites or requirements that need to be met for the action to execute. See [add-conditions-to-interactions](https://docs.acho.io/app-builder/app-construction/interactions/add-conditions-to-interactions "mention") for instruction.

## Advanced - Scheduler

This setting allows you to introduce a delay before the action's execution. Input the number of seconds you'd like the system to wait before proceeding.

*Example:* If you input `5`, the action will be executed after a 5-second delay.

## Copy and Paste Action

The Copy and Paste Action enables users to easily duplicate Action from one area and transfer it to another. This is particularly useful for replicating data or configurations without the need for manual re-entry.&#x20;

Select an action and press `ctrl + c` (`cmd + c`  on Mac) or click the copy menu below action to copy (e.g. the first Set App Data action).&#x20;

*Notice: The action flow after the selected action will be copied together.*

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FOOguEostLcnB46GQYhHq%2FInitialize%20Data.jpg?alt=media&#x26;token=ce0c8bd2-1599-46ac-a9c6-43f5f084e09c" alt=""><figcaption></figcaption></figure>

Then move to where you want to paste it, either to another Interactions Panel or to another app,  move the mouse and press `ctrl + v` (`cmd + v`  on Mac), then the copied action flow will be pasted at the current mouse position.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FFRlKrOAkKJpo7PQLzJuU%2FPaste%20Action.jpg?alt=media&#x26;token=1e73079f-633f-401d-b620-c109a3bde2b5" alt=""><figcaption></figcaption></figure>

## Start adding interaction

Want to learn how to add an interaction? Click the following links to get started.

{% content-ref url="interactions/add-an-interaction" %}
[add-an-interaction](https://docs.acho.io/app-builder/app-construction/interactions/add-an-interaction)
{% endcontent-ref %}