FM BetterForms
BF Editorfmbetterforms.com
1.0 dont use
1.0 dont use
  • Introduction
  • Features Summary
  • Getting Started
    • System Overview
    • Integration
      • 1. Configure FileMaker Server
      • 2. Add your Server to BetterForms
      • 3. Introduction to Hooks
      • 4. Create your first Site
      • 5. Create your first Page
      • 6. Configure your FileMaker File(s)
      • 7. Run your first Hook
      • Next Steps
    • Common Customizations
      • Introduction to Actions
      • Introduction to Buttons
      • Page Navigation
      • Displaying Data in a Table
    • Support
      • Hacking a Webpage
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • Slots / Code Injection
      • App Model
      • Site-wide Named Actions
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Common
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • panel
        • accordion
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
      • Authentication Actions
    • Script Hooks
      • Globals Variables
        • $$BF_Model
        • $$BF_App
        • $$BF_State
      • Keeping Keys Private
      • Reducing Payload Size
      • API Callback Endpoint
      • Common Hooks
      • Scoped Hooks
    • Users & Authentication
      • Managing User Accounts
      • Custom Login Pages
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
      • JS Caclulations and Functions
    • Customizing and Styling
      • Custom Components
      • Custom CSS
      • Custom Components
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Optimization
      • Business Logic
      • UI / UX
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page
  • What is an Action?
  • What does an action look like?
  • Where are actions triggered?

Was this helpful?

  1. Getting Started
  2. Common Customizations

Introduction to Actions

Actions

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.

Below is an example of the runUtilityHook action.

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

and here is the showAlert action:

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

Where are actions triggered?

When actions are executed, they are always added to the end of the actions queue and evaluated in order. The actions queue is always running; if the actions queue is empty it will simply wait for new actions to be added and continue processing.

Various elements throughout a BetterForms page can add actions to the queue, here are just a few examples:

  • buttons - triggered when a button is clicked

  • onFormLoad - triggered when a page is first loaded

  • onFieldChanged - triggered when a field is changed

Throughout the docs, anywhere you see a reference to an "actions key" or "actions array", this is where you can place actions.

Shown below is an example of a button object with an actions array. When the button is clicked, the runUtilityHook action will be added to the actions queue. The actions queue is always running and waiting for actions.

{
  "actions": [
    {
      "action": "runUtilityHook",
      "options": {
        "type": "save"
      }
    }
  ],
  "buttonClasses": "btn btn-info btn-trans",
  "label": "",
  "styleClasses": "col-md-2",
  "text": "Save",
  "type": "button"
}
PreviousCommon CustomizationsNextIntroduction to Buttons

Last updated 3 years ago

Was this helpful?

Be sure to check out the for more details about how each action works.

onRowClicked - specifically for the ; triggered when a row in the table is clicked

Actions Reference
table element