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
  • Defining Named Actions
  • Schema
  • Reserved Names (> v0.8.13)
  • Usage

Was this helpful?

  1. Reference
  2. Actions Processor

Named Actions

Named actions are action arrays that can be referenced by more than one element, or more easily called from HTML elements. You can think of them like a FileMaker script. The set of actions has a name, like a script name.

Defining Named Actions

  • formSchema.form.namedActions These are scoped to the current page only. You can edit them in the Misc tab of the page editor.

  • site.content.namedActions These are globally scoped and can be called from anywhere.

The actions processor will first try to find the named action in the current page. If unsuccessful, the global site.namedActions object is checked.

Schema

Named actions look like any other actions array, with just the name of the action as the key. They can either be a single action like the showCantDoThat example, or an array of actions like goToMyAccount.

"namedActions": {
    "showCantDoThat": {
        "action": "showAlert",
        "options": {
            "title": "Whoooaa!!",
            "text": "You can't do that thing you just did.",
            "type": "warning"
        }
    },
    "goToMyAccount": [{
        "action": "path",
        "options": {
            "path": "/account"
        }
    }]
}

Reserved Names (> v0.8.13)

There are some reserved named action key names that are reserved for special use cases.

onFormLoad - Global named action - These actions will run just after a form is loaded. If there are actions that are generated in an onFormRequest hook, those actions will be queued first and the onFormLoad actions will run after. A typical use case would be to show an empty form with a loading placeholder image, then request data from the server then render the data after, allowing the application to feel more performant.

onAppLoad - Global named action - These actions will run just after the app is loaded. This can be used to populate global app settings like user data and flags after a page is refreshed.

onLogin - ( >0.9.35) Global named action - These actions will run just after the user is authenticated. This can be used to populate global app settings like user data and flags after a user logs in.

Usage

As an action in a standard array of actions:

{
    "action": "namedAction",
    "name": "showCantDoThat", //the name your named action
    
    //all options set here are merged into the options of the named actions
    "options": {
        "id": "12345" 
    }
}

In an HTML element using @click:

// Shows a button that triggers a namedAction called goToMyAccount
<button @click="namedAction('goToMyAccount',{id: '12345'})"  type="button">
     <i class="icon-user"></i> Show Account
</button>

In this example, goToMyAccount is the name of the named action and the {id: '12345'} is the options array that will be passed to the named action. In JavaScript, JSON keys do not need to be in quotes.

Sequence

If a namedAction is called while other actions are still in the queue, the namedAction will run first and get inserted at the front of the actions queue. You can think of this as a sub-script where the namedAction runs first and then the remaining actions continue. This allows you to reuse code and is particularly useful in the global scope.

PreviousActions ProcessorNextActions

Last updated 3 years ago

Was this helpful?