# 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 %}


---

# 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.klai.studio/getting-started/ide-quick-tour/3.-understanding-core-betterforms-concepts/3.3-introduction-to-actions-and-action-scripts-ide-context.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.