FM BetterForms Docs
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
  • Building and Customizing
  • Component API
  • Implementation API

Was this helpful?

  1. Usage Tips
  2. Customizing and Styling

Custom Components

What are they, how are they reusable and why

Building and Customizing

Component API

Key

Description

HTML

Contains HTML to be rendered as a component.

fields

Optional either html or fields keys must be present. Contains BF schema elements normally found in the fields key of the page editor. The schema will be used as a component.

source

modelSource

{ model }

If supplied, this will act as the models data source

schema

All schema keys can be accessed from within the component as schema.theKey This allows

Implementation API

Key
Description

<bfcomp>

html tag name needed to identify a BF component

name

string

The component name

modelSource

used to supply the model will be for this component, in not supplied, the current model for the element is used.

modelDev

object

optional, used to add model keys that can be used for development and tests of components that are rendered where there is no model available. ( Used by the BF editor )

source

{ component }

If supplied, this will act as the entire source for the component. This attribute was added to allow the BF component editor the ability to preview live components.

fields

array

If supplied will act as the source of the field schema and replace the components default fields

attributes

various

All additional attributes supplied will override the components schema keys where applicable.

Usage as an JSON Schema element

< JSON Schema here >

Usage as an HTML Vue component

<bfcomp name="MyComponent" modelSource="model"   ></bfcomp>
PreviousCustom CSSNextPage Pre-loaders

Last updated 3 years ago

Was this helpful?