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, 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, 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, columns per row, option lists, etc.]

User requirements example (write in natural language):

Title: "Onboarding Registration". Description: "Please provide accurate information."
One field per row:
Row 1: Name, required, no default.
Row 2: Department, dropdown single select, options: R&D (rd), Product (pm), Marketing (mkt), required.

1. Overall JSON Structure

{
  "FormTitle": "",
  "FormDescription": "",
  "ConfirmButtonText": "Submit",
  "CancelButtonText": "Cancel",

  "Fields": [ ],

  "Design": null
}

Variable interpolation: In FormTitle, FormDescription, button labels, 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

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"
  }
}

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"
}

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; row 1 Name required, no default; row 2 Department dropdown single select, required.

{
  "FormTitle": "Welcome aboard!",
  "FormDescription": "Please provide your basic information.",
  "ConfirmButtonText": "Submit",
  "CancelButtonText": "Cancel",
  "Fields": [
    {
      "Id": "clientField_1",
      "Widget": 1,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "name",
        "Description": "",
        "Type": "string",
        "Required": true,
        "Default": ""
      },
      "ParamRef": null,
      "DisplayName": "Name",
      "DisplayDescription": "",
      "InputWidgetOption": { "WidgetType": 0 }
    },
    {
      "Id": "clientField_2",
      "Widget": 8,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "department",
        "Description": "",
        "Type": "string",
        "Required": true,
        "Default": "",
        "EnumInputs": [
          { "Name": "R&D", "Value": "rd" },
          { "Name": "Product", "Value": "pm" },
          { "Name": "Marketing", "Value": "mkt" }
        ]
      },
      "ParamRef": null,
      "DisplayName": "Department",
      "DisplayDescription": "",
      "SingleSelectWidgetOption": { "WidgetType": 0 }
    }
  ],
  "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"
      }
    },
    "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 }
}

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. When using Design, every Id in LayoutCells must exist in Fields.
4. ColumnFractionsPerRow must align with LayoutCells row and column counts.
5. Empty slots must be "", not omitted.
6. Output must be valid JSON; key casing must match this guide.
7. Before saving, click Preview Form on the node to verify rendering and required-field validation.