# Actions

Action is an operation that you can perform in Jet Admin. Visually, the action is a button in the Jet Admin interface.

To add an action you need to 

1. Select a Button component 
2. Drag and drop it on the page

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

## Action types

There are a variety types of actions that are split into sections:&#x20;

### Data

* **Run operation**. Perform any CRUD operation or custom API/SQL query.&#x20;
* **Export Data.** Export data from the table.
* **Import Data**. Import data to a collection.&#x20;

### Navigation

* **Navigate to page**. Passing values and switching between pages.
* **Open URL.** Open the link in a new or the current tab.

### Overlays

* [**Open Actions Dropdown**](#open-actions-dropdown)**.** Create a sub-menu of actions.
* [**Open Overlay/Close Overlay**](https://docs.jetadmin.io/user-guide/design-and-structure/components/modal)**.** Open or close the overlay.

### Interaction

* [**Show Notification**](https://docs.jetadmin.io/user-guide/design-and-structure/components/custom-notifications)**.** Show custom notification.
* **Copy to Clipboard**. Copy data to your Clipboard.&#x20;
* [**Run Component Action**](https://docs.jetadmin.io/user-guide/design-and-structure/components/component-actions)**.** Act on a component, such as updating data or clearing the form after submitting.

### Advanced

* [**Set Variable**](https://docs.jetadmin.io/variables#set-a-variable). Set a value to a specific Page Variable or Page Variable .&#x20;
* [**Run JavaScript**](#run-javascript). Execute a JavaScript code.&#x20;
* **Download File.** Download the file from the API call.
* [Scan QR/Bar Code](https://docs.jetadmin.io/user-guide/design-and-structure/components/qr-code). To scan a graphic code.

**Run workflow**

* [**Run Workflow**](https://docs.jetadmin.io/user-guide/workflow). Fires a sequence of events.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FnBxmubmAnaZJiUu1D6lJ%2Fimage.png?alt=media&#x26;token=e2fff5ce-4ea2-4c03-beee-c0fe623527c4" alt=""><figcaption></figcaption></figure>

## Action confirmation dialog

You can set up a confirmation dialog that will appear before executing an action.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F9kAzQf8DfpcxpQBmpX1I%2Fimage.png?alt=media&#x26;token=72f4f5bf-07f5-46f6-87e4-488382cc718a" alt=""><figcaption><p>Confirmation dialog example</p></figcaption></figure>

To add a confirmation dialog, use the "Confirm on execute" section of the right-side panel

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FjlEsJUjTt5iCWJhxvgi8%2Fimage.png?alt=media&#x26;token=1a57e813-a9ff-4008-ac53-65f8925ba5c6" alt=""><figcaption></figcaption></figure>

You can define the Title, Description, and button styles for your confirmation dialog.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F40g9GIixjDpS79F6QRmL%2Fimage.png?alt=media&#x26;token=702e96d6-2894-4871-8c6b-ca510227425b" alt=""><figcaption></figcaption></figure>

### Run Operation

Perform operation with your resources, such as CRUD operations with Databases, operations with third party services, APIs and frameworks, and operations with storages.

#### Creating an operation in a button

1. Click on the **Button**
2. Go to the **Click Action**
3. Choose **Run Operation**
4. Choose the **Resource**
5. Choose the **Action**

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

#### Operations with storages

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F83fTfuqkmCU0jPQ3V5zY%2Fimage.png?alt=media&#x26;token=1e534e68-f445-4a5f-b516-29bf6d1ebd7b" alt=""><figcaption><p>Storages operations</p></figcaption></figure>

You can perform these actions with storages:

* Getting private file URL
* Uploading a File
* Getting list of objects
* Creating a directory
* Removing an object

### Navigate to Page

You can pass values and switch between pages. To do so, follow the steps:

1. Click on the Button
2. Go to the **Click Action**
3. Choose **Navigate to Page**
4. Choose the **Link of the Page**

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

### Open URL

Opens any website URLs, use **Action** specified as **Open URL**.

1. Click on the Button
2. Go to the **Click Action**
3. Choose **Open URL**
4. Click on the URL icon to change the **URL of the Page**

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

### Open/Close Overlay

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

You can close the pop-up overlay window. To do so, follow the steps:

1. Click on the **Button**
2. Go to the **Click Action**
3. Choose **Close Overlay**

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

{% content-ref url="components/modal" %}
[modal](https://docs.jetadmin.io/user-guide/design-and-structure/components/modal)
{% endcontent-ref %}

### Open Actions Dropdown

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F65u1VYus5GR9kxJPmhN9%2FggGroup%201195.jpg?alt=media&#x26;token=4cbadfcb-cab8-47f4-8350-6579ca53149e" alt=""><figcaption></figcaption></figure>

The Open Actions Dropdown feature allow you to create a list of multiple separate actions that will appear in a drop-down list. This dropdown menu facilitates triggering queries and other actions with ease.

* **Multiple Actions**: Create a list of distinct actions that users can select from a dropdown menu.
* **Ease of Use**: Simplify the process of triggering various actions from a single interface element.
* **Manual Configuration**: Customize the actions list according to specific requirements.

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

### Run Component Action

You can act on a component, such as updating data or clearing the form after submitting.

{% content-ref url="components/component-actions" %}
[component-actions](https://docs.jetadmin.io/user-guide/design-and-structure/components/component-actions)
{% endcontent-ref %}

### Show Notification

You can show custom notifications.

{% content-ref url="components/custom-notifications" %}
[custom-notifications](https://docs.jetadmin.io/user-guide/design-and-structure/components/custom-notifications)
{% endcontent-ref %}

### Run JavaScript

To execute JavaScript code upon clicking a button, follow these steps:

1. Click on the button.
2. Navigate to the Click Action.
3. Select "Run JavaScript."
4. Type your JavaScript code and return the result.

<div align="left"><figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FbD6eVxXsCFgzSuX7PfLB%2Fimage.png?alt=media&#x26;token=19c992fa-aec0-4466-a3ac-b51091c8fa88" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FIDXxKuExgvXi2jWxfZ35%2Fimage.png?alt=media&#x26;token=8486fd48-1ffa-4bf4-a77b-03853124cc70" alt=""><figcaption></figcaption></figure>

\
You can Insert input values from other components and use it further within your JavaScript code. To do that, click 'Insert Input' and choose the needed component.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FwnRv2mMlLQERr3pK1ZT3%2Fimage.png?alt=media&#x26;token=72fc7038-9627-407e-b4a9-2d3bdf5bfd90" alt=""><figcaption></figcaption></figure>

### Export Data

You can export data from the table. To do so, follow the steps:

1. Click on the **Table**
2. Go to the `Actions Tab`
3. Scroll down to the **Header Actions**
4. Click on the `New Action`
5. Choose **Export Data**
6. Choose the **Resource** and the **Collection**

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

### Download File

1. Click on the **Button**
2. Go to the **Click Action**
3. Choose **Download File**

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

Now, let's define the Resource and Operation. To do so, follow the steps:

1. Click on the button
2. Pick a resource&#x20;
3. Choose an operation to write SQL queries
4. Write the SQL query
5. Click on the Run button
6. Click on the Save button

This will generate a JSON file with the data.

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

### Copy to clipboard

You can set up actions to copy data to the clipboard. This works with all components. To configure it, follow the steps:

1. Go to the **Actions Tab**
2. Go to the **Row Click**
3. Choose **Copy to Clipboard**&#x20;
4. Click on the `Set up with Formula` icon
5. Choose **Email**

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