Execute another action
Execute another UI Bakery action
Execute action allows you to execute another action, pass parameters and collect its result.
- 1.Refresh data - create a new row in the database and then call another action to reload and refresh the data in the table or another UI component;
- 2.Call multiple actions at once - refresh page action that calls multiple Execute action steps one by one, refreshing the data in multiple UI components;
- 3.Reuse action - call a single action from multiple actions passing various parameters.
By default, Execute action 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 {{data}} variable in the consequent action steps.
- 1.Select action to call - the main setting which determines which action will be executed;
- 2.Transform result - custom JavaScript function can be provided to modify the result of the action calls. Available variables:
{{data}}and{{error}}- an array of results and errors;
Input - specific input is not required. Result of the step, previous to the Execute action, is available as
{{params}} and {{data}} in the executed action;Output -
{{data}} - result of the execution, {{error}} - execution error.Let's take a look at how to refresh data in the table after a new row is created.
1. Load users - create an action and load items into the table:
2. Add another action, make it Multi-step and use a Create row step:
Test your action and make sure it's working properly.
3. Once your action creates user entries, the only thing left is to refresh users data in the table - to do this, add the Execute action step and select the loadCustomers action:
This way Execute action allows you to re-use the same action you already have to reload the table items.
Another useful case is to refresh the data in multiple components.
1. For instance, you might have a couple of metrics on your dashboard, as well as a table component, all connected to separate actions:
2. Now, if you want to refresh all the data at the same time with a single button click, Execute action is your best friend. Add a button and assign a multi-step action to the On Click trigger:
3. Add a new Execute action per an action you'd like to call to refresh the data - this way when the refresh action is being called, it will call other actions one by one and refresh all the data:
4. Time to test. Click the Refresh All button and see actions being executed step by step:
Another example of Execute action step is when you need to load data from multiple sources and then map it or merge into a single action:
1. Create two actions that will load your data - getCustomers and getOrders in our case:
2. Create a new Multi-step action with as many Execute action steps as you need to preload before working with them:
3. Now that the data is preloaded, we can create a third step, for example, a Code action to combine the data from all actions together:
Executed actions' data is preloaded and accessible as
{{actions.actionName.data}} and can be safely referenced to mapping and merging. As a result, the action has combined the information about customers and orders:
Last modified 1mo ago