FM BetterForms Docs
BF Editorfmbetterforms.com
master
master
  • Introduction
  • 🏆Features
  • Getting Started
    • Welcome to FM BetterForms!
    • System Overview
    • Quick Tour of the BetterForms IDE
    • 1. Setting Up Your Foundation
      • 1.1 Configure FileMaker Server
      • 1.2 Install BetterForms Helper File
      • 1.3 Add Your Server to BetterForms (IDE)
    • 2. Building Your First Application
      • 2.1 Create an App (Site) in the IDE
      • 2.2 Create Your First Page (Intro to Page Builder)
      • 2.3 Understanding & Managing Environments (IDE)
      • 2.4 Adding Elements to Your Page
      • 2.5 Understanding Validation
      • 2.6 Adding Actions to Your Page
      • 2.7 Creating Your First List View
      • 2.8 Understanding Page Data Flow
      • 2.9 Creating Your First Hook
      • 2.10 Working with Data Tables (Coming Soon)
    • 3. Understanding Core BetterForms Concepts
      • 3.1 Introduction to Hooks (and where to find them in the IDE)
      • 3.2 Running Your First Hook (Practical Example)
      • 3.3 Introduction to Actions & Action Scripts (IDE Context)
      • 3.4 Understanding the Data Model (and Page Data Model UI)
    • 4. Common Customizations & Expanding Your App
      • 4.1 Adding & Configuring Buttons (Page Builder)
      • 4.2 Implementing Page Navigation (Actions & Site Navigation UI)
      • 4.3 Displaying Data in Tables (Page Builder & Element Config)
      • 4.4 Basic App Styling (Site Styling UI)
    • 5. Mastering the BetterForms Environment & Advancing Your Skills
      • 5.1 Understanding & Managing Environments (In-Depth)
      • 5.2 Deep Dive: Page Configuration & Settings
        • Navigating the Page Builder Interface
        • Working with Page-Level Action Scripts
        • Configuring the Page Data Model
        • Page Integration Settings Explained
        • Managing Page Info & Other Settings
      • 5.3 Working with Global Scripts
      • 5.4 Managing App (Site) Settings & Navigation
      • 5.5 Exploring Further: What to Learn Next
    • Support & Resources
      • Getting Help
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • App Model
      • DOM Header Insertions
      • Global Named Actions
      • Site Structure
      • Slots / Code Injection
    • Developer Mode
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Copy of Site Structure
      • BetterForms Elements
        • Checkbox
        • Checklist
        • Cleave.js Input Masking
        • DateTime Picker
        • Google Address Autocomplete
        • Image Display Element
        • Input
        • Masked Input
        • Range Slider (noUiSlider)
        • Radios
        • Select
        • Advanced Select (selectEx)
        • TextArea
      • Common
        • Input
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • Panel
        • accordion
        • accordion2
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
        • 🏗️Uppy File Upload Widget Integration with AWS S3
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions (Action Scripts)
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • scrollTo
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
        • consoleError
        • showStripeCheckout
      • 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
      • OAuth
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
      • Example Usage
        • BF.i18n()
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
    • Practices for File Downloads
    • BF Streaming Proxy
    • Updating the Helper File
    • Connection Trouble Shooting Guide
    • Software Testing Overview
    • JavaScript Libraries
    • FM BetterForms - Quality Assurance
    • Rollbacks and Version Control
    • BF Server Proxy
    • Setting up Auth0
    • Create an S3 Bucket on AWS
    • ApexCharts - Getting started
    • BF Enterprise Documentation
    • BetterForms Error Pages API
    • BF Streaming API
    • LLM Query API
    • Creating a PWA
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
      • Vue Variables
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • Hacking a Webpage
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
    • Customizing and Styling
      • Custom CSS
      • Custom Components
        • Components Editor
        • Component Best Practices
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Data Optimization
      • Business Logic
      • UI / UX
      • Debugging
      • Script Engine Optimization
    • Getting Started
    • Installation
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page
  • Page Schema
  • _note Property
  • Groups and Fields
  • Styling and Visibility of Elements
  • Input Field Validation
  • Using Snippets
  • Managing JSON Structure
  • Editing HTML Content

Was this helpful?

  1. Getting Started
  2. 5. Mastering the BetterForms Environment & Advancing Your Skills
  3. 5.2 Deep Dive: Page Configuration & Settings

Navigating the Page Builder Interface

Page Schema

The Page Schema is the backbone of your app's pages, defining all elements that will appear. It is structured in JSON format and includes groups and fields that organize and detail these elements.

_note Property

The _note property (e.g., "HEADER") is a user-defined label used for organizing the schema. It helps you structure and label different parts of your page without rendering anything on the actual page. This property can be applied to groups, fields, or any sub-contents.

Groups and Fields

  • "groups": These organize fields into logical sections like "header," "body," or any custom section you create.

  • "fields": Fields contain the actual elements, such as HTML, buttons, or other components, that will appear on your page.

Styling and Visibility of Elements

  • "styleClasses": This property applies Tailwind CSS or any custom styles defined in the DOM header insertions and CSS.

  • Dynamic Visibility: Elements can have "visible": false for static rendering or "visible_calc" for dynamic rendering based on the data model. For example,

"visible_calc": "model.isShowing"

Input Field Validation

  • Validators: Input fields can include validators to ensure data integrity. For example:

    • A simple type validator: "validator": "string"

    • A dynamic validator:

      {
        "validator": "calc",
        "validator_calc": "model.user.firstName"
      }
    • Error Messages: You can set an error message with the "errorMsg" key

  • Triggering Validation: For HTML content input fields, you need a button or an @change event to trigger a namedAction. Then, copy the validate action snippet from the library:

    {
        "action": "validate",
        "onFailed_actions": []
    }

Using Snippets

To add a snippet from the Snippet Library, copy the desired snippet and paste it in your Page Schema. This allows you to quickly add elements like buttons or custom HTML to your page.

Managing JSON Structure

In your editor, you can use the top-right toolbar to fold or unfold page schema objects or nested elements at different levels. This feature helps you manage and navigate through complex JSON structures. Additionally, you have the option to format the JSON, ensuring that the code is neatly organized and easy to read—especially useful for large and detailed page schemas.

Editing HTML Content

When working with HTML content within the Page Schema, clicking on the line number of an HTML field will open an HTML editor. This allows you to directly edit the HTML code in a more user-friendly interface, making it easier to customize your content and layout.

HTML Editor Features

In the HTML Editor, you can:

  • Edit HTML content: Directly modify HTML elements and see real-time updates.

  • Edit Data Models: Modify both the main data model and the development data model JSON.

  • Toggle DEV Mode: Use the DEV button in the top right corner to enable or disable the development data model.

  • AI Assistant: You can ask the AI assistant for help, and it will automatically modify the HTML content based on your requests.

Remember to save your changes before closing the HTML Editor. After that, be sure to save the entire page to ensure all modifications are stored.

Previous5.2 Deep Dive: Page Configuration & SettingsNextWorking with Page-Level Action Scripts

Last updated 9 months ago

Was this helpful?