Calling actions from code

Sometimes, you may have to handle the result of another action or execute some actions in bulk using JavaScript. In such cases, you can use the await actions.action.trigger() syntax, which returns Promise and allows you to reuse the result of other actions.

Let’s check a couple of cases where action.trigger may come in handy.

Basic setup

As we've already mentioned before in Triggering actions, you can use await actions.actionName.trigger() anywhere in your app actions code:

const user = await {{ actions.getCurrentUser.trigger() }};

As well as pass custom parameters to the action:

const user = await {{ actions.getUser.trigger('[e-mail]') }};

The parameters will be available as {{params}} variable in any action step.

Bulk actions

Getting data for a certain record

Let’s review the case when you need to combine the data from several tables about a certain record. As an example, we will use MySQL data source and two tables: Orders and Order Details.

To combine data from two actions:

1. Create a new action of the Load Table type and select the Order Details table as a resource. Make sure the action is titled as loadOrderDetails.

2. In the Filters section, configure selected record field as Order Number ={{data}}.

3. Next, create a second action of the Load Row type and select the Orders table as a resource. Make sure the action is titled as loadOrder.

4. In the Filters section, configure selected record field as Order Number ={{data}}.

5. Now, to combine the data from both actions, create a new action of the JavaScript code type.

6. Rename the action to loadDetails and specify the following code:

const orderId = {{data}};

const [orderData, orderDetails] = await Promise.all([{{ actions.loadOrder.trigger(orderId) }}, {{ actions.loadOrderDetails.trigger(orderId) }}]);

return {
	...orderData,
  	details: orderDetails,
  	detailsNames: orderDetails.map(item => item.productCode),
  	detailsAmount: orderDetails ? orderDetails.length : 0,
};

1. To display the obtained data, add the Detail component to your working area.

2. Assign the loadDetails action to the data field of the Detail component.

You'll need to hide the Details field and make the Details names and Details amounts fields visible. For the Details names field, you may also change its view type to Multiselect/Tags for better representation.

Getting data for all records

To get combined data for all records in a Table:

1. Create a new action of the Load Table type and select the Order Details table as a resource. Make sure the action is titled as loadOrderDetails.

2. In the Filters section, сonfigure selected record field as Order Number ={{data}}.

3. Next, create a multi-step action - add your loadOrderDetails action as the first step.

For testing purposes, we recommend setting the limit to 10 records.

1. For the second step, create a new action of the JavaScript code type.

2. Rename the action to applyDetailsToOrder and specify the following code:

async function applyDetailsToOrder(order) {
    const orderDetails = await {{ actions.loadOrderDetails.trigger(order.orderNumber) }};
    return { 
        ...order,
        details: orderDetails,
        detailsNames: orderDetails.map(item => item.productCode),
        detailsAmount: orderDetails ? orderDetails.length : 0,
    };
}

const result = {{ data }}.map(item => applyDetailsToOrder(item));
return Promise.all(result);

1. To display the obtained data, add the Table component to your working area.

2. Assign the applyDetailsToOrder action to the data field of the Table component.

You'll need to hide the Details field and make the Details names and Details amounts fields visible. For the Details names field, you may also change its view type to Multiselect/Tags for better representation.

Getting specific items from the table

Let's say you have a table with lots of records, but you only need to display certain items. We'll show you how you can do that based on the example of an HTTP API data source.

To get specific records from the table:

1. Create a new action: a. Select your HTTP API data source and HTTP request. b. Set GET method and set your URL as: https://example-data.draftbit.com/users/{{params}} c. Rename your action as getUser.

2. Add another action of the JavaScript code type.

3. Rename the action to getUsers and specify the following code:

const usersToGet = [1, 10, 2, 5, 9];
const result = [];
for (const id of usersToGet) {
    const user = await {{ actions.getUser.trigger(id) }};
    result.push(user);
}
return result;

1. To display the obtained data, add the Table component to your working area.

2. Assign the getUsers action to the data field of the Table component.