Modal Dialog Trigger

Minimal Example

{
  "id": "add-contact-modal",
  "type": "modal",
  "order": 5,
  "width": "half",
  "settings": {
    "triggerLabel": "Add Contact",
    "triggerIcon": "fa-solid fa-plus",
    "modalTitle": "Add Contact Details",
    "sectionId": "sec-contact-details",
    "size": "md"
  }
}

Settings Reference

How Modal Values Are Submitted

Controls inside the modal section write their values to the form engine's state just like any other control. When the form is submitted, the submit action handler receives all values including those from the modal section in ctx.formValues:

// Form schema with modal
{
  "id": "beneficiary-modal",
  "type": "modal",
  "settings": {
    "triggerLabel": "Add Beneficiary",
    "sectionId": "sec-beneficiary"
  }
}

// sec-beneficiary contains:
// - text: beneficiary-name
// - text: beneficiary-relationship
// - number: beneficiary-percentage

// In submit handler:
ctx.formValues['beneficiary-name']         // "Jane Smith"
ctx.formValues['beneficiary-relationship'] // "Spouse"
ctx.formValues['beneficiary-percentage']   // 50

Terms Agreement Modal

{
  "id": "terms-modal",
  "type": "modal",
  "order": 20,
  "settings": {
    "triggerLabel": "View Terms and Conditions",
    "triggerIcon": "fa-solid fa-file-contract",
    "triggerVariant": "outline",
    "modalTitle": "Terms and Conditions",
    "sectionId": "sec-terms-content",
    "size": "lg",
    "confirmLabel": "I Accept",
    "cancelLabel": "Close",
    "validateOnConfirm": false,
    "closeOnOutsideClick": false
  }
}

// sec-terms-content contains:
// - html control with full T&C text
// - checkbox: "terms-accepted"

Modal Sizes