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.

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 event that will trigger the action. Lastly, the action block contains the action that will be performed.

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

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:

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 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 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.

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).

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

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.

Start adding interaction

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

Add an interaction