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
  • Options
  • Passing Parameters

Was this helpful?

  1. Reference
  2. Page Settings

Card / Window Modals

Card modals display other pages as their content.

PreviousData ModelNextValidation

Last updated 3 years ago

Was this helpful?

This element is based on the module.

Card Modals are a special type of modal that show the contents of another page as their contents.

They are opened with an showCardModal action and hidden with a hideCardModal action.

// Minimal settings
{
    "action": "showCardModal",
    "options": {
        "slug": "some_page_slug" // note: slug names must be URL comaptible
    }
}

Options

The following items can exists in the options object for the showCardModal action. Either slug or idForm must be present to identify the page loaded in the card modal.

Option Key
Type
Description / Purpose

name

string

Add a name to the card window. If not set, it will default to "modal". You can use the modal to target the window for other actions.

slug

string

Must match a site navigation slug of the page to show in the card

idForm

string

(optional - instead of slug) UUID of the page to show in the card

model

object

if set, this data will be used for the page data model. If an onFormRequest hook is enabled, this content will NOT be passed into the hook.

query

object

Data passed to FMS as if it were a query param (more below)

onBeforeClosed_actions

array

Array of actions to be run when the card window is closed. This and the `onClosed` is useful if you want to run actions when a user clicks outside the modal without explicitly clicking a button.

onClosed_actions

array

Array of actions run after the modal has been closed.

clickToClose

boolean

defaults true. If false, you will not be able to click outside of the modal to close it.

draggable

boolean

defines a CSS selector for an element that should be allowed to drag the entire model if clicked on by the user

height

string

pixel or % value to define the height of the modal

width

string

pixel or % value to define the width of the modal

resizable

boolean

defaults false. If true, the model can be resized by the user

scrollable

boolean

defaults true. If false, the modal's content will be fixed in view (user cannot scroll down the page)

Changing paths / page contents, use a path action with added windowName key to target the correct window, in this case the name of this modal.

Passing Parameters

Often you need to pass some params to the modal from the parent page. These fall within situations, with or without the onFormRequest hook enabled.

With onFormRequest enabled

When called from another (parent) page. If you need onFormRequest params, use the query key as you would with other pages and read via the $$BF_Query global in your hook script.

Without onFormRequest enabled

When showing a modal and you don't need to call a server hook script you can still pass data to modal several ways.

  1. Via the model key. data in the key will appear in the model for the modal. This is useful when you want to edit some detail information that the parent form already has.

  2. Via the app object. By setting a key within the app object, and then later reading that when the form loads, you can pass anything back and forth between parent and modal.

vue js modal