# 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. {% @arcade/embed flowId="yn49AhcTfHz56dSejWKt" url="" %} * **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](/build-from-scratch/getting-started/bind-data-to-ui.md). 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](/concepts/actions/additional-action-settings.md). ### **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* and *manual*: * **Automatic** * *Initial trigger, run on first use in components* - 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. * *Reactive trigger, run on components' changes* - 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. These triggers can be turned on/off in the **Setup** step 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. \ But you can deselect the *Initial trigger* setting, if needed, and manually trigger an action via user interaction (for example, clicking a button) or via code. * **Manual** * *Component trigger* - when an action is connected to a built-in component trigger. For example, the button component has an **On Click** trigger.\ You can assign actions to component triggers and use them in such cases as, for example, submitting a form, performing a search, or reloading a table with button click.
* *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](/concepts/actions/action-basics/use-actions.name.trigger.md). * *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.\ More examples of specific use cases [here](/concepts/app-and-page-triggers.md). * *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. ## 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: ```javascript 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, }; }); ```
{% hint style="success" %} Double-click the action step to change its name. {% endhint %} ## Reusing actions Actions can be called from other actions using the **Execute action** step. It's useful when you want to reload data after having created 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 also trigger another action for **On Success** and **On Error** results in the *Finish* step of the action. For example, if the action is executed successfully you can reload its data with updated values, and if not, you can display an error notification.
If you have a global action that you'd like to reuse across multiple applications, you can extract it to the [Actions library](/concepts/actions/actions-library.md). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.uibakery.io/concepts/actions/action-basics.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.