# 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](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/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](/concepts/actions/action-basics.md#triggering-actions), you can use `await actions.actionName.trigger()` anywhere in your app actions code:

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

As well as pass custom parameters to the action:

```javascript
const user = await {{ actions.getUser.trigger('email@example.com') }};
```

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**.&#x20;

#### 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.&#x20;
6. Rename the action to *loadDetails* and specify the following code:

<pre class="language-javascript"><code class="lang-javascript"><strong>const orderId = {{data}};
</strong>
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,
};
</code></pre>

![](/files/Vfz8ns73QpydszAWDc7T)

7. To display the obtained data, add the **Detail** component to your working area.&#x20;
8. Assign the *loadDetails* action to the data field of the Detail component.

{% hint style="info" %}
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.
{% endhint %}

### 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**.

{% hint style="info" %}
For testing purposes, we recommend setting the limit to 10 records.
{% endhint %}

4. For the **second step**, create a new action of the **JavaScript code** type.
5. Rename the action to *applyDetailsToOrder* and specify the following code:

```javascript
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);
```

6. To display the obtained data, add the **Table** component to your working area.&#x20;
7. Assign the *applyDetailsToOrder* action to the data field of the Table component.

{% hint style="info" %}
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.
{% endhint %}

### 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:\
   \
   \&#xNAN;*<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:

```javascript
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;
```

4. To display the obtained data, add the **Table** component to your working area.
5. Assign the *getUsers* action to the data field of the Table component.

{% @arcade/embed flowId="NGC57yYvJDygcR3HO7UQ" url="<https://app.arcade.software/share/NGC57yYvJDygcR3HO7UQ>" %}


---

# 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/use-actions.name.trigger.md?ask=<question>
```

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.
