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:

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

Example showAlert action:

{
  "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 line numbers to open JavaScript editor for function actions

• 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:

{
  "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 to understand data flow

Complete Reference: For detailed information about all available actions, see the Actions Reference documentation.