Add an interaction
Last updated
Was this helpful?
Last updated
Was this helpful?
Let’s take a look at how an interaction is built. Select a page, element, or data node you’d like to add an interaction to and a corresponding block will appear in the interaction panel below your canvas.
Note that interactions are added to the component that will be triggering the event. For example, if you’d like a button click to trigger an action, add the interaction to the button element.
Drag out from the right side of the first block to create an event block. A dropdown will appear for you to choose the Event that will trigger the action.
Below, we see options for page events. See Pages for more about how these events are triggered.
Once an event is selected, you’ll be able to choose an action to be performed. Drag out from the event block to create an action block. Click on the action block to select what type of action you'd like to perform.
These are the action options that you will see:
Navigation: For navigating to a different page. See Navigate to a different page for how this works.
Element: For performing an action on an element. When this is chosen, you’ll be able to select an element on your page. You’ll then see element-specific actions.
Data Node: For sending request to Data Nodes. You can simple run the query, or change SQL parameters and re-run it to control the Data Nodes behavior.
Script Node: For sending request to execute script,
App: For setting app data, or generating a unique ID at the app level.
Page: For setting page data.
API Service: For predefined API services, or user-defined services, that interact with Acho backend. This includes downloading data as a file, IAM management, and more.
Database: For directly loading CSV or JSON data into database. This can be used to create table with corresponding data types for the data, or update new data into existing tables.
You can also add an action after another action. If the new action is connected to the blue circle located above the former action on the right border, it means that when the former action is successfully completed, the new action will be triggered.
On the other hand, if the new action is connected to the red circle located below the former action on the right border, it means that when the former action fails, the new action will be triggered. This is usually used to report an error message.
On the right side of the Action panel, you'll see three icons:
The first shows you the event payload. See Event payload for more.
The second allows you to define a condition. Only when the condition is satisfied will the action be performed.
The third allows you to deploy a scheduler. The action will wait a certain time before it is performed.
Some Elementshave supported events, such as a button click or a table row click. View the information on each element to see what events they support.
