Complete Examples

Example 1: GuardRails Security Policy List

A list form that lets administrators browse security policies and dispatch to property forms for editing. The link action is only enabled when a row is selected.

{
  "actions": [
    {
      "type": "link",
      "label": "Configure Policy",
      "variant": "primary",
      "icon": "shield-halved",
      "order": 2,
      "config": {
        "targetFormId": "guardRails-security-policy",
        "keyField": "securityPolicyId"
      },
      "disabledRule": "!values['securityPolicyId']"
    },
    {
      "type": "link",
      "label": "Manage Nodes",
      "variant": "secondary",
      "icon": "circle-nodes",
      "order": 1,
      "config": {
        "targetFormId": "guardRails-node-capability",
        "keyField": "securityPolicyId"
      },
      "disabledRule": "!values['securityPolicyId']"
    },
    {
      "type": "navigate",
      "label": "Back to Dashboard",
      "variant": "ghost",
      "icon": "arrow-left",
      "order": 0,
      "config": {
        "url": "/guardRails"
      }
    }
  ]
}

Example 2: Invoice Line Items with Quick-Add

A property form for creating invoices with a data-table for line items. Provides quick-add buttons for common line item sets and a delete action.

{
  "actions": [
    {
      "type": "submit",
      "label": "Save Invoice",
      "variant": "primary",
      "icon": "floppy-disk",
      "order": 10,
      "config": {
        "validateBeforeSubmit": true,
        "successMessage": "Invoice saved"
      }
    },
    {
      "type": "addQuickItems",
      "label": "+ Standard Services",
      "variant": "secondary",
      "order": 3,
      "config": {
        "targetControlId": "line-items",
        "items": [
          { "description": "Consulting — per hour", "qty": 1, "unit": "hour", "rate": 150 },
          { "description": "Project management", "qty": 1, "unit": "flat", "rate": 500 }
        ]
      }
    },
    {
      "type": "deleteSelected",
      "label": "Remove Lines",
      "variant": "danger",
      "icon": "trash",
      "order": 2,
      "config": {
        "targetControlId": "line-items",
        "showConfirmDialog": false
      }
    },
    {
      "type": "cancel",
      "label": "Cancel",
      "variant": "ghost",
      "order": 0,
      "config": {
        "checkDirty": true
      }
    }
  ]
}

Example 3: HIL Approval Form — Admin Only Approval

An approval form for Human-in-the-Loop tasks. The Approve and Reject buttons are only visible in admin mode. Regular users see only a read-only view.

{
  "actions": [
    {
      "type": "custom",
      "label": "Approve",
      "variant": "primary",
      "icon": "check-circle",
      "order": 2,
      "modeVisibility": { "edit": false, "admin": true, "view": false },
      "config": {
        "handlerType": "hil-approve",
        "handlerConfig": { "transitionTo": "approved" }
      }
    },
    {
      "type": "custom",
      "label": "Reject",
      "variant": "danger",
      "icon": "times-circle",
      "order": 1,
      "modeVisibility": { "edit": false, "admin": true, "view": false },
      "config": {
        "handlerType": "hil-reject",
        "handlerConfig": { "requireComment": true }
      }
    },
    {
      "type": "navigate",
      "label": "Back to Inbox",
      "variant": "ghost",
      "order": 0,
      "config": { "url": "/workdesk/inbox" }
    }
  ]
}