> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/getting-started/ide-quick-tour/3.-understanding-core-betterforms-concepts/3.3-introduction-to-actions-and-action-scripts-ide-context.md).

# 3.3 Introduction to Actions & Action Scripts (IDE Context)

Now that you understand hooks, let's explore **Actions** - the instructions that tell BetterForms to perform operations like showing alerts, navigating to pages, or triggering hooks.

## What is an Action?

You can think of an action as similar to a single Script Step in FileMaker. When executed, some action will occur.

The most common actions are:

* **path** - change the URL of the browser to take them to another page
* **runUtilityHook** - run a hook script on your FileMaker server
* **showAlert** - display a non-intrusive message to the user

### What does an action look like?

An action is a JSON object that contains a key named "action". Most actions also contain an "options" key that define various parameters for the action.

**Example `runUtilityHook` action:**

```json
{
  "action": "runUtilityHook",
  "options": {
    "type": "save"
  }
}
```

**Example `showAlert` action:**

```json
{
  "action": "showAlert",
  "options": {
    "text": "This is the alert message text",
    "title": "Hello World",
    "type": "information"
  }
}
```

## Where to Find Actions in the BetterForms IDE

### Page-Level Actions (Local Scripts)

Actions are primarily managed at the **Page level**:

1. **Open any Page** in the BetterForms IDE
2. **Navigate to the Actions tab**
3. **Create new scripts** by clicking "+ New Script"
4. **Manage your actions** using the three-panel interface:
   * **Panel 1:** List of action scripts
   * **Panel 2:** Current script with drag-and-drop action arrangement
   * **Panel 3:** Edit individual action details

**Page Actions Features:**

* **JavaScript Editor:** Click the gutter / line number next to a `function` key to open the JavaScript editor
* **Test Actions:** Use the "Run" button to execute scripts immediately
* **Disable/Enable:** Temporarily disable scripts without deleting them
* **Priority:** Local scripts take priority over global scripts

### Site-Level Actions (Global Scripts)

Global actions are managed at the **App (Site) level**:

1. **Navigate to App Settings** in the BetterForms IDE
2. **Go to Environment section**
3. **Find the Scripts or Named Actions tab**
4. **Create global actions** that can be called from anywhere in your app

### Common Action Locations in Page Elements

Actions can be triggered from many places throughout your pages:

| **Element**      | **Action Key**      | **When Triggered**        |
| ---------------- | ------------------- | ------------------------- |
| **Buttons**      | `actions`           | When button is clicked    |
| **Input Fields** | `onChanged_actions` | When field value changes  |
| **Tables**       | `onRowClicked`      | When table row is clicked |
| **Page Load**    | `onFormLoad`        | When page first loads     |

## Types of Actions

### Regular Actions

* **showModal** - Renders a modal dialog
* **hideModal** - Hides a modal that is non-blocking
* **showAlert** - Renders a toaster style alert
* **path** - redirects the user to a new page
* **runUtilityHook** - runs the `onUtility` hook passing it params
* **clipboard** - runs `clipboard` action allowing interaction with the clipboard
* **cookie** - Allows setting of browser side cookies
* **wait** - Waits for specified time or event
* **emit** - Vue event bus message emit
* **scrollTo** - Scrolls to an element
* **namedAction** - Runs a named action (like calling a script)
* **function** - Runs JavaScript

### Authentication Actions

* **authLogin** - Performs an authentication login
* **authLogout** - Performs logout
* **authReset** - Performs a password reset action
* **authRegister** - Performs a registration

## Action Scripts (Named Actions)

**Named Actions** are reusable action sequences - like FileMaker scripts. They can be called from multiple places.

### Where to Define Named Actions

| **Scope**      | **Location in IDE**                  | **Usage**                            |
| -------------- | ------------------------------------ | ------------------------------------ |
| **Page-level** | Page → Actions tab                   | Only available on that specific page |
| **Global**     | App Settings → Environment → Scripts | Available throughout entire app      |

### Execution Priority

When a named action is called, BetterForms searches in this order:

1. **Page-level named actions** (local)
2. **Global named actions** (site-wide)

This allows you to create global defaults with page-specific overrides.

## Practical Example: Button with Actions

Here's how to add a button that shows an alert:

```json
{
  "type": "button",
  "text": "Click Me",
  "buttonClasses": "btn btn-primary",
  "actions": [
    {
      "action": "showAlert",
      "options": {
        "title": "Hello!",
        "text": "You clicked the button!",
        "type": "success"
      }
    }
  ]
}
```

## The Actions Queue

When actions are executed, they are added to the **actions queue** and processed sequentially. The queue is always running - when empty, it waits for new actions.

**Key Concepts:**

* Actions run **in order** (first in, first out)
* Some actions **block** until complete (like `showModal`)
* Others are **non-blocking** (like `showAlert`)

## Next Steps

You now understand how actions work and where to manage them in the BetterForms IDE.

**What to explore next:**

* Try creating a button with multiple actions in sequence
* Experiment with the `runUtilityHook` action to trigger FileMaker scripts
* Learn about [Page Data Model](/getting-started/ide-quick-tour/3.-understanding-core-betterforms-concepts/3.4-understanding-the-data-model-and-page-data-model-ui.md) to understand data flow

{% hint style="info" %}
**Complete Reference:** For detailed information about all available actions, see the [Actions Reference](/reference/actions-processor/actions_overview.md) documentation.
{% endhint %}