Card / Window Modals

Card modals display other pages as their content.

This element is based on the vue js modal 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 exist in the options object for the showCardModal action. Either slug or idForm must be present to identify the page loaded in the card modal. See source docs for a complete list of additional parameters.

Option KeyTypeDescription / 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.

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

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.

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.

query

object

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

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)

slug

string

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

style

string

Classes that will be applied to to modal window wrapper

width

string

pixel or % value to define the width of the modal

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.

Last updated