Interactive Form: JSON Configuration Guide

Preface

On the Interactive Form node, after you select JSON Configuration, you can define a custom form JSON schema using the rules in this guide.

Because the rules are fairly involved, we recommend giving your AI the entire block below together with the rest of this guide:

You are a GoInsight Interactive Form JSON configuration expert. Generate FormSchema JSON strictly according to the "Interactive Form JSON Configuration Guide":
1. At the root level, use FormTitle, FormDescription, ConfirmButtonText, CancelButtonText, CancelButtonConfig, Fields, and Design (PascalCase).
2. Every fillable field must have a unique Id; Param.Name is the English submission key; DisplayName is the English UI label.
3. Controls must use the Widget enum (1 text with single/multi-line, 2 password, 3 email, 4 date, 5 time, 6 number, 7 boolean, 8 single select, 9 multi select, 10 rich text), with the required *WidgetOption and EnumInputs from the guide.
4. Use Param.WfParamConstraint for validation; do not use a validationRules array.
5. Layout: LayoutCells references Ids; use "" for empty slots; ColumnFractionsPerRow aligns with each row; add CellsChrome and ShellPresentation when styling is needed.
6. Output only valid JSON—no comments—and do not invent Widget types or fields not defined in the guide.
7. User requirements: [Describe fields here: required or not, defaults, helper text and tip/placeholder, multi-line height, cancel confirmation, columns per row, option lists, etc.]

User requirements example (write in natural language):

Title: "Onboarding Registration". Description: "Please provide accurate information."
Cancel button requires secondary confirmation; dialog title "Discard this form?"; description "You cannot submit again after discarding."
One field per row:
Row 1: Name, single-line text, required, helper "Enter your legal name", show as placeholder.
Row 2: Notes, multi-line text, height 66, helper as question-mark tip.
Row 3: Department, dropdown single select, options: R&D (rd), Product (pm), Marketing (mkt), required.

1. Overall JSON Structure

{
  "FormTitle": "",
  "FormDescription": "",
  "ConfirmButtonText": "Submit",
  "CancelButtonText": "Cancel",
  "CancelButtonConfig": {
    "Enabled": true,
    "Title": "",
    "Description": ""
  },
  "Fields": [],
  "Design": null
}

1.1 CancelButtonConfig (cancel confirmation)

If omitted, treat as Enabled: true with system default copy (same as legacy behavior).

Variable interpolation: In FormTitle, FormDescription, button labels, CancelButtonConfig.Title / Description, Param.Default, and other strings, you may use {{#NodeId.ParamName#}} to substitute workflow variables at runtime.

Naming rules:

• All keys use PascalCase (e.g. FormTitle, not formTitle).
• Each field must have a unique Id (e.g. clientField_1); Param.Name is the submitted parameter name (English identifier, e.g. userName).
• When using Design, every non-empty string in LayoutCells must match some field’s Id.

2. Fields (Fields)

2.1 Field Object Structure

2.2 Control Types (Widget)

JSON configuration supports only the control types in the table above. Do not use unlisted Widget values.

2.3 Param (Parameters)

Default value rules:

• Fields with an input control: the default is prefilled in the control.
• When the user leaves the field empty: string becomes an empty string; other types are treated as no value.
• Default is used only when Required is false and there is no valid input.

Variable reference (ParamRef):

"ParamRef": {
  "NodeId": "NodeId",
  "Name": "ParamName"
}

Use null when not referencing a variable.

2.4 Validation (WfParamConstraint)

Email example:

"WfParamConstraint": {
  "Regex": "[\\w!#$%&'*+/=?^`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^`{|}~-]+)*@(?:\\w(?:[\\w-]*\\w)?\\.)+\\w(?:[\\w-]*\\w)?"
}

2.5 Options (EnumInputs)

For Widget 8 and 9:

"EnumInputs": [
  { "Name": "R&D", "Value": "rd" },
  { "Name": "Product", "Value": "pm" }
]

• Name: text shown in the UI
• Value: value submitted

2.6 Helper text and multi-line height (InputWidgetOption)

Applies to Widget 1 (single/multi-line text), 2 (password), and 3 (email).

Single-line + placeholder example:

"DisplayDescription": "Enter your legal name",
"InputWidgetOption": {
  "WidgetType": 0,
  "TipShowInPlaceholder": true
}

Multi-line + tip + custom height example:

"DisplayDescription": "Optional notes",
"InputWidgetOption": {
  "WidgetType": 1,
  "InputHeight": 66
}

Height dual-write sync: Multi-line height exists in both places:

• Field side: InputWidgetOption.InputHeight
• Layout side: Design.CellsChrome[<field Id>].InputHeight

The two sides stay in sync. When JSON includes both Fields and Design.CellsChrome, InputHeight for the same field must match. If Design is null, set the field side only.

3. Layout and Styling (Design)

Design controls position, column width, spacing, outer styling, and responsive row wrapping only. Control types and validation are defined in Fields.

When Design is null, fields stack vertically in order. Use Design when you need multiple columns, column width ratios, or custom styling.

3.1 Design Structure Overview

3.2 LayoutCells

"LayoutCells": [
  ["clientField_1"],
  ["clientField_2", "clientField_3"],
  ["clientField_4", ""]
]

• Outer array = rows; inner array = columns.
• Non-empty values = field Id.
• "" = empty slot placeholder; must be kept—do not remove it or column widths will break.
• Title and footer buttons are not in this array.

3.3 ColumnFractionsPerRow

"ColumnFractionsPerRow": [
  [1],
  [1, 1],
  [2, 1, 1]
]

• Must match row and column counts of LayoutCells row by row.
• If missing or mismatched, that row falls back to equal-width columns.
• Weights affect relative width within the same row only.

3.4 Gap

Row and column spacing of the main form grid, in px.

3.5 CellsChrome

"CellsChrome": {
  "clientField_1": {
    "Padding": { "Top": 8, "Right": 8, "Bottom": 8, "Left": 8 },
    "Margin": { "Top": 0, "Right": 0, "Bottom": 0, "Left": 0 },
    "BackgroundColor": "#FFFFFF",
    "TitleFontWeight": "500",
    "TitleColor": "#464F60",
    "InputHeight": 84
  }
}

Recommended defaults:

{
  "Padding": { "Top": 8, "Right": 8, "Bottom": 8, "Left": 8 },
  "Margin": { "Top": 0, "Right": 0, "Bottom": 0, "Left": 0 },
  "BackgroundColor": "#FFFFFF",
  "TitleFontWeight": "500",
  "TitleColor": "#464f60",
  "InputHeight": 84
}

Configure styles by field Id, not by row/column index.

3.6 CustomSizeWidthRules

Based on form container width (not the full browser viewport), sets the maximum columns per row. Excess columns wrap into new rows left to right; ColumnFractionsPerRow is split accordingly.

"CustomSizeWidthRules": [
  { "MinWidthPx": 780, "MaxCols": 6, "Breakpoint": "lg" },
  { "MinWidthPx": 500, "MaxCols": 3, "Breakpoint": "md" },
  { "MinWidthPx": 0, "MaxCols": 1, "Breakpoint": "sm" }
]

Rule: match by MinWidthPx from largest to smallest; use the first rule where container width >= MinWidthPx, and apply its MaxCols.

3.7 ShellPresentation

HeadingChrome (title and description area):

FooterChrome (confirm and cancel buttons):

4. Complete Example

Requirements: one field per row; Name is single-line, required, helper shown as placeholder; Notes is multi-line, height 66, helper as tip; cancel confirmation enabled.

{
  "FormTitle": "Welcome aboard!",
  "FormDescription": "Please provide your basic information.",
  "ConfirmButtonText": "Submit",
  "CancelButtonText": "Cancel",
  "CancelButtonConfig": {
    "Enabled": true,
    "Title": "Discard this form?",
    "Description": "You cannot submit again after discarding."
  },
  "Fields": [
    {
      "Id": "clientField_1",
      "Widget": 1,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "name",
        "Description": "",
        "Type": "string",
        "Required": true,
        "Default": ""
      },
      "ParamRef": null,
      "DisplayName": "Name",
      "DisplayDescription": "Enter your legal name",
      "InputWidgetOption": {
        "WidgetType": 0,
        "TipShowInPlaceholder": true
      }
    },
    {
      "Id": "clientField_2",
      "Widget": 1,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "remark",
        "Description": "",
        "Type": "string",
        "Required": false,
        "Default": ""
      },
      "ParamRef": null,
      "DisplayName": "Notes",
      "DisplayDescription": "Optional notes",
      "InputWidgetOption": {
        "WidgetType": 1,
        "InputHeight": 66
      }
    }
  ],
  "Design": {
    "LayoutCells": [
      ["clientField_1"],
      ["clientField_2"]
    ],
    "ColumnFractionsPerRow": [
      [1],
      [1]
    ],
    "Gap": 8,
    "CellsChrome": {
      "clientField_1": {
        "Padding": { "Top": 8, "Right": 8, "Bottom": 8, "Left": 8 },
        "Margin": { "Top": 0, "Right": 0, "Bottom": 0, "Left": 0 },
        "BackgroundColor": "#FFFFFF",
        "TitleFontWeight": "500",
        "TitleColor": "#464F60"
      },
      "clientField_2": {
        "Padding": { "Top": 8, "Right": 8, "Bottom": 8, "Left": 8 },
        "Margin": { "Top": 0, "Right": 0, "Bottom": 0, "Left": 0 },
        "BackgroundColor": "#FFFFFF",
        "TitleFontWeight": "500",
        "TitleColor": "#464F60",
        "InputHeight": 66
      }
    },
    "CustomSizeWidthRules": [
      { "MinWidthPx": 780, "MaxCols": 6, "Breakpoint": "lg" },
      { "MinWidthPx": 500, "MaxCols": 3, "Breakpoint": "md" },
      { "MinWidthPx": 0, "MaxCols": 1, "Breakpoint": "sm" }
    ],
    "ShellPresentation": {
      "HeadingChrome": {
        "Padding": { "Top": 8, "Right": 8, "Bottom": 8, "Left": 8 },
        "Margin": { "Top": 0, "Right": 0, "Bottom": 0, "Left": 0 },
        "BackgroundColor": "#FFFFFF",
        "TitleFontWeight": "600",
        "TitleColor": "#1f2937",
        "TitleTextAlign": "left"
      },
      "FooterChrome": {
        "Padding": { "Top": 12, "Right": 16, "Bottom": 12, "Left": 16 },
        "Margin": { "Top": 12, "Right": 0, "Bottom": 0, "Left": 0 },
        "BackgroundColor": "#FFFFFF",
        "PrimaryButtonBackgroundColor": "#4584EF",
        "SecondaryButtonColor": "#FFFFFF",
        "PrimaryButtonTextColor": "#FFFFFF",
        "SecondaryButtonTextColor": "#111827"
      }
    }
  }
}

4.1 Common Snippets

Three columns on one row (1:1:1)

"LayoutCells": [["clientField_a", "clientField_b", "clientField_c"]],
"ColumnFractionsPerRow": [[1, 1, 1]]

Instruction text (not submitted)

{
  "Id": "clientField_intro",
  "Widget": 10,
  "Param": {
    "Name": "",
    "Description": "Please complete the following accurately.",
    "Type": "string",
    "Required": false,
    "Default": ""
  },
  "DisplayName": "",
  "DisplayDescription": ""
}

Number with range

"Widget": 6,
"Param": {
  "Name": "age",
  "Type": "number",
  "Required": true,
  "Default": "",
  "WfParamConstraint": { "MinNum": 1, "MaxNum": 120 }
}

Disable cancel confirmation

"CancelButtonConfig": {
  "Enabled": false
}

Email + tip helper

{
  "Id": "clientField_mail",
  "Widget": 3,
  "OutputMode": "overwrite",
  "Param": {
    "Name": "mail",
    "Description": "",
    "Type": "string",
    "Required": true,
    "Default": "",
    "WfParamConstraint": {
      "Regex": "[\\w!#$%&'*+/=?^`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^`{|}~-]+)*@(?:\\w(?:[\\w-]*\\w)?\\.)+\\w(?:[\\w-]*\\w)?"
    }
  },
  "DisplayName": "Email",
  "DisplayDescription": "Use your work email",
  "InputWidgetOption": {
    "TipShowInPlaceholder": false
  }
}

Password + placeholder helper

{
  "Id": "clientField_pwd",
  "Widget": 2,
  "OutputMode": "overwrite",
  "Param": {
    "Name": "password",
    "Description": "",
    "Type": "string",
    "Required": true,
    "Protected": true,
    "Default": ""
  },
  "DisplayName": "Password",
  "DisplayDescription": "At least 8 characters",
  "InputWidgetOption": {
    "TipShowInPlaceholder": true
  }
}

5. Notes When Writing

1. Fields must not be empty; each fillable field needs a unique Id and non-empty Param.Name.
2. Widget must match Param.Type, EnumInputs, and *WidgetOption.
3. For text controls (single/multi-line, password, email), put helper copy in DisplayDescription; use TipShowInPlaceholder to choose tip or placeholder.
4. Multi-line height: keep InputWidgetOption.InputHeight and Design.CellsChrome[<Id>].InputHeight identical; do not set height on non-multi-line fields.
5. When using Design, every Id in LayoutCells must exist in Fields.
6. ColumnFractionsPerRow must align with LayoutCells row and column counts.
7. Empty slots must be "", not omitted.
8. Output must be valid JSON; key casing must match this guide.
9. Before saving, click Preview Form on the node to verify rendering and required-field validation.