Execute Action

Execute Action allows you to run another action, pass parameters, and collect its result.

By default, the Execute Action step calls another provided action. The result of the previous step is passed into the executed action and is available as {{params}} in all action steps and as {{data}} in the first step. The result of the executed action is available as the {{data}} variable in the consequent action steps.

In the settings, you need to select the action that will be executed. You can also turn on the Transform result toggle and specify a custom JavaScript function to modify the result of the action call. The available variables are {{data}} and {{error}} - an array of results and errors.

• Input - specific input is not required. The result of the previous step is available as {{params}} and {{data}} variables in the executed action.

• Output - {{data}} - the result of the execution, {{error}} - the execution error.

Use cases

In this section, we'll explore in more details some of the most common examples of using the Execute Action step in your applications.

Refreshing data

Let's say you created a new row in the database and you want to reload the data in the table/another UI component to display the new values.

Here's how you can do that:

1. Create a new action to load the items you need into the table, for example, we'll use a loadUsers action.

2. Run it and assign it to the component you need.

Check out this article if you need a reminder of how to assign actions to components.

1. Add another action that will consist of two steps:

   1. First step - select the Create Row action and your current table. You can first try running this action separately to test how it works.

   2. Second step - select the Execute Action type and your loadUsers action in the Action to execute dropdown.

That's it! In this case, Execute Action allows you to reuse the same action you already have to reload the table items.

Calling multiple actions

Now, we'll review the case when you can use one action that calls multiple Execute Action steps one by one refreshing the data in multiple components. As an example, we'll use an application where we have several components all connected to separate actions. We'll also add a Button component to refresh all data at the same time.

Here's how it works:

1. Add a Button component to your working area and assign a new action to its On Click trigger.

2. For this action, add as many steps as you have actions connected to your components that you want to refresh - for each step, select the Execute Action type and the corresponding action.

3. Now, click the button and test how it works.

When your refresh action is called, it will call all Execute Action steps one by one and refresh data in all the components.

Mapping data from multiple sources

Another example is when you need to load data from multiple sources and then map or merge it into a single action.

Here's how you can do that:

1. Firstly, create two or more actions, as you need, that will load your data. We'll use two actions - loadProducts and loadCategories - as an example.

2. Next, create a new action that will consist of multiple steps.

3. For each step, select the Execute Action type and the action you need to preload before working it.

4. Now, run this action to preload the data and check that it's working correctly.

5. Add another step to the multi-step action, select the JavaScript Code action type, and add the code to combine the data from all actions, for example:

const categories = {{actions.loadCategories.data}};
const products = {{actions.loadProducts.data}};
​
return products.map(product => {
  return {
    ...product,
    categories: categories.filter(category => category.code === product.category),
  };
});

1. Run the action now and check the Result tab.

That's it - the data from your multiple actions will be combined in one.