Actions basics

Within any action, you have the ability to include multiple Action steps. These steps encompass predefined logic and can take various forms, such as SQL queries, custom JavaScript code, HTTP requests, conditions, navigation, etc. By combining these steps together you can construct functional workflows that enable you to merge requests from different data sources, validate input data or trigger data reloads based on specific conditions. This flexibility allows you to create powerful and adaptable processes to meet your specific needs.

Creating actions

You can create actions from the Actions panel at the bottom of the screen. First, you need to choose between a global or page-specific action, and then click the plus sign next to the corresponding section.

From there, based on the data source selected, you'll get the list of all available action types to choose from. It's also possible to create complex actions:

• Multi-step actions - all steps are executed sequentially in the defined order. By default, if one step fails, the entire action will also fail. However, you can change this behavior by enabling the Allow next step execution when this step has failed setting. Once enabled, the next step will still be executed even if the current step fails. The {{data}} variable that would have been passed to the next step will be empty (null), and an error message indicating the nature of the failure will be stored in the {{error}} variable.

• Condition step - allows you to define different paths of execution based on specific conditions or validate the input before executing a request. Conditions are written in plain JavaScript.

Once you've created an action, you can assign it to a component's Data field. You can learn more about binding your data to UI here.

You can also configure specific settings for the action execution flow, such as toasts, confirmation dialogs, and execution delays. For more details, refer to this section.

Action step variables

In any action step, you can access app variables like {{ui.component.value}} or {{app.env}}. Moreover, there are several built-in variables available for every action step:

• {{data}} - the result of the previous step

• {{error}} - the error response of the previous step

• {{params}} - incoming action parameters passed in by components, Execute/Loop Action steps, or when calling the action from the code

• {{res}} - the response of the request if the step follows an HTTP API step

• {{steps.name.data/error}} - the result of a particular action step

While {{data}} and {{error}} are specific to each step, {{params}} can be accessed in all steps.

Triggering actions

There are two ways to trigger actions:

• Automatic

  • Auto trigger - when the component values used in the first action step change. For example, if the action uses {{ui.input.value}}, it will be triggered when the value of the input is modified.

  • On first reference - when an action is referenced in the app for the first time, it will be triggered. For example, a table can use {{action.name.data}} to load data from the action, in this case, the action is triggered when the table is rendered for the first time.

• Manual

  • Component trigger - when an action is connected to a built-in component trigger. For example, the button component has an On Click trigger.

  • Execute action, Loop action - action can be triggered by another action. For example, you can create a loop action that will execute another action multiple times.

  • From code - an action can be called from any code field using the await {{actions.actionName.trigger()}} syntax. You can also pass an argument to an action and it will appear as a {{data}} variable in the first action step, for example: await {{actions.actionName.trigger({ limit: 10 })}} More examples of specific use cases here.
  • On Page Load/On App Load/On App Data - similar to a component trigger, special app and page triggers are available. These triggers allow you to load an app configuration and reuse it later in page actions and components.

  • Execute action button - manually run the action in the development mode while you are developing and testing the action.

  • Proceed from step - manually run the action from a selected step. This is especially useful during development when you want to re-run only a certain part of the action.

Actions that load data are auto-callable. It means that if you've assigned an action to the Data property of the component, you don't need to trigger the action manually. It will be called automatically when the component is displayed on page load. You can deselect this setting, if needed, and manually trigger an action via user interaction (clicking a button) or via code.

Actions can be also assigned to particular component triggers, for example, when submitting a form, performing a search, or reloading a table with button click.

Referencing the result of a specific action step

You can also reference the result of a specific action step by its name using the syntax {{steps.stepName.data}}. It may come in handy when you want to utilize the outcome of multiple steps in a single step.

Here is an example of using the result of two steps - mapping user orders to the user object:

const users = {{steps.loadUsers.data}};
const orders = {{steps.loadOrders.data}};

return users.map(user => {
  const userOrders = orders
    .filter(order => order.userId === user.id);

  return {
    ...user,
    userOrders,
  };
});

Double-click the action step to change its name.

Reusing actions

Actions can be called from other actions using the 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 the Execute action step will appear in the next step that comes right after it.

Additionally, you can trigger another action for On Success or On Error results.

If you have a global action that you'd like to reuse across multiple applications, you can extract it to the Actions library.