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
  • Navigation Slugs
  • URL Structure
  • Query Parameters

Was this helpful?

  1. Getting Started
  2. Common Customizations

Page Navigation

PreviousIntroduction to ButtonsNextDisplaying Data in a Table

Last updated 3 years ago

Was this helpful?

Navigation Slugs

In the Appearance > Navigation tab of your site's settings, you can define navigation slugs, which are displayed in the URL of in the user's browser. You'll see more about how the URLs are built later in this page.

The structure of your navigation slugs is a nested JSON object as shown below. The name of the slug is the key of the object, and the id shown is the UID of the page you want to appear at that navigation slug.

{
    "default": {
        "id": "36D74465-3F11-4CE4-A0FD-370D78C98B86"
    },
    "dashboard": {
        "id": "633D7D10-F8AD-4B6E-8D86-BDC8038D6E91"
    }
}

More features may be added to this object in the future, but for now, id is the only option that can be set here.

URL Structure

Every page in a BetterForms URL starts with the domain name followed by the # symbol as shown. The # symbol allows the application to function like a single-page web app so that parts of the page can be changed without the browser needing to render the entire page again.

The domain section can be either a subdomain of fmbetterforms.com or your own ,

https:// domain /#/

The base URL will load whatever page is listed as the default key in your site's .

Other pages can be loaded either by ID or by their navigation slug. Using Navigation slugs is merely a shortcut to the page's ID, but they are the recommended method of building URLs for the following reasons:

  • They make URLs shorter and easier for your users to understand

  • You can easily update a page later across all of your site simply by updating the ID in your site's settings

.../#/navSlug

.../#/form/Page ID

Navigating by Page ID may not be supported in a future version of BetterForms in order to provide better support for other features. Always use a navSlug to maintain compatibility.

Query Parameters

Query parameters are additional values that can be passed with a URL as a page is loading. If you are new to query parameters, on Wikipedia.

BetterForms parses these values into a JSON object for your use in any . They are available in the global variable.

see this
scoped hooks
$$BF_Query
custom domain
navigation slugs