FM BetterForms
BF Editorfmbetterforms.com
master
master
  • Introduction
  • 🏆Features
  • Getting Started
    • Welcome to FM BetterForms!
    • System Overview
    • Quick Tour of the BetterForms IDE
    • Phase 1: Setting Up Your Foundation
      • 1.1 Configure FileMaker Server
      • 1.2 Install BetterForms Helper File
      • 1.3 Add Your Server to BetterForms (IDE)
    • Phase 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)
    • Phase 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)
    • Phase 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)
    • Phase 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
    • 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
    • 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
  • Injecting VueJS syntax
  • Examples
  • Other JavaScript Libraries

Was this helpful?

  1. Usage Tips
  2. Forms Processor

HTML & VueJS

PreviousForm TypesNextStyling and Design

Last updated 2 years ago

Was this helpful?

The BetterForms framework allows you to dig deep into the low levels of HTML code and still keep the benefits of a framework and reactivity. Many components have html compatible keys or accept slots that allow HTML to be rendered. BetterForms uses under the hood to keep all the elements working together.

Injecting VueJS syntax

You can harness the full power of VueJS the html rendering engine inside of BetterForms but simply adding Vue html syntax into your HTML code. When you use Vue, it maintains a link to the data in your data model and wherever that data is referenced so changes made to the data model will reflect instantly on the page.

Here's just a few things you can do with VueJS Syntax:

  • Render merged data from the data model

  • Build tables and other repeating data. (see example below)

  • Execute all actions and pass data to those actions.

How do I know when to use {{curly-brackets}} or not?

The {{}} syntax is only for injecting JavaScript into HTML code. Everything that you stick inside of of the curly brackets is actually just JavaScript. Vue is the glue that allows you combine HTML and JS and dynamically insert data (as calculated by the JS) into the HTML of your page.

Remember: the contents of the curly brackets is a single line of JavaScript and must evaluate to return a value. However, you only need to add the curly brackets if you're trying to place the result of that value into HTML code.

Examples

// the data model
{
    "nameFirst": "Jim",
    "nameLast": "Bob"
}
// an HTML element
{
  "html": "<h2>My name is {{model.nameFirst}}</h2>",
  "styleClasses": "col-md-12",
  "type": "html"
}

Example Data Model:

// the data model
{
    "items": [{
        "name": "Racecar",
        "qty": 2
    },{
        "name": "Wheels",
        "qty": 30
    }]
}

HTML code to build a table from the array

<table class="table">
    <thead>
        <tr>
            <th>Quan</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="line in model.items"> 
            <td>{{line.qty}}</td> 
            <td>{{line.name}}</td> 
        </tr>
    </tbody>
</table>>

Note that the line variable is declared on line 9. It can be set an anything and then is referenced later on lines 10 & 11 to get at the individual objects of the array.

Other JavaScript Libraries

BetterForms is bundled with the following JS libraries:

  • MomentJS - working with dates and times

    • Version: 2.24.0

  • NumeralJS - formatting numbers

    • Version: 2.0.6

  • Lodash - any useful function you can imagine

    • Version: 4.17.11

  • Marked - markdown complier

    • Version: 0.6.2

  • Bootstrap - CSS styling

    • Version: 3.3.7 (this will be removed in the future, it can be added in via CDN)

You can access these libraries anywhere where JavaScript can be inserted, including these curly brackets

https://momentjs.com/docs/#/displaying/
http://numeraljs.com/#format
https://lodash.com/docs/
https://marked.js.org/
https://getbootstrap.com/
VueJS
143KB
Vue-Essentials-Cheat-Sheet.pdf
pdf
This combination of an input field and HTML is made possible with VueJS