Action basics
Action is a piece of business logic implemented in your application. You can use it to load data from Data sources, send data back, make API calls, navigate to a page, generate PDF documents or process any type of data with SQL or JavaScript.
Any action can contain multiple Action steps. These are small jobs of various types: SQL query, Custom code, HTTP request, Condition, Navigation. By combining multiple steps, you can build functional workflows, unite requests to different data sources, validate input data, or reload the data based on a specific condition.
Actions can be page-specific and global. Page-specific actions are executed on a certain page, while global actions are available across the whole app. You can easily convert a page-specific action into global, or the other way round, just by dragging the action to the corresponding folder. In case you need to assign a page-specific action to another page, you need to move it to the global state first and then transfer to the necessary page.

Creating an action

Open Actions panel from the bottom of the builder area. Choose whether you need a global or a page-specific action, then click the + button on the right of the Actions list.
Select the first appropriate step (the choice depends on the type of an action you are going to create).
You can also create complex multi-step actions. All the steps will be executed sequentially as you ordered them.
Adding the next step

Triggering event-based actions

Actions that load data are auto-callable. This means that if you've assigned an action to the Data property of the component, you don't need to trigger the Action. It will be called when the Component is displayed on a page load.
When submitting a Form, performing a search, or reloading a Table with a button click, you need to assign the action to a particular Component trigger:
Assigning an Action
Actions can also be called from any code field using the following syntax:
{{actions.loadUsers.trigger()}}
You can pass an argument to an Action and it will appear as a {{data}} variable in the first Action step.
{{ actions.loadUsers.trigger({ limit: 10 }) }}

Using Action result

An Action can be assigned to a Component using its result as a variable in the code properties and fields:
{{actions.loadUsers.data}}
Using Action result
Any Action has two additional variables. They can be used to indicate that an Action is loaded, or to access an error that the Action was completed with:
{{actions.loadUsers.loading}} // boolean true or false
{{actions.loadUsers.error}} // possible error object

Using the previous step result

Any Action step can produce a result or an error. Both will be available as variables in the next Action step.
{{data}} // result of the previous action step
{{error}} // if catched, error thrown by the previous step
Thus, you can consequently make requests, enrich or transform data, make navigation to a particular page, based on the result of a previous execution, or show an error to a user.

Creating a condition

You can also create conditions inside of Actions to validate the input before executing a request, for instance:
Adding a condition
Conditions are written in plain JavaScript.

Reusing actions

Actions can be called from the other Actions with the help of an Execute action step. It's useful when it comes to reloading data after creating a new item.
By default, the result of a step that goes before the Execute action step will appear as a {{data}} variable in the first step of the Action being called. The result of the Action being called using an Execute action step will appear in the next step that comes right after the Execute action step.
Additionally, you can trigger another action on the Triggers tab on success or on error results:

Action folders

Folders give you a handy way to structure your actions and are especially useful when you have a lot of actions in your application. You can drag the actions to the folder as well as remove them from the folder. You can also add a folder inside another folder.
Copy link
Outline
Creating an action
Triggering event-based actions
Using Action result
Using the previous step result
Creating a condition
Reusing actions
Action folders