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 display content), with the required *WidgetOption and EnumInputs from the guide.
4. Use Param.WfParamConstraint for validation; do not use a validationRules array.
5. Layout: `Design.CellsLayout` references field `Id`s; use `""` for empty slots; align `ColumnFractionsPerRow` per row; put spacing in `FormLayoutGlobal.Gap`; use `CellsStyle` and `FormShellStyle` for styling.
6. Output only valid JSON—no comments—and do not invent Widget types or fields not defined in the guide; in `EnumInputs`, include only `Name` and `Value`—do not copy editor-only fields such as `chosen` or `selected`.
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 CellsLayout must match some field's Id.

2. Fields (Fields)

2.1 Field Object Structure

Optional fields: Widget 10 (display content) needs only Id, Widget, and Param at minimum; DisplayName, DisplayDescription, OutputMode, and ParamRef may be omitted. For Widget 1–9, include DisplayName, "OutputMode": "overwrite", and "ParamRef": null when not binding a variable.

2.2 Control Types (Widget)

JSON configuration supports Widget 1–10 only (see the table above). Do not use unlisted Widget values or invent controls such as file upload that are not in the table.

Param.Type vs Widget (types used in JSON configuration):

The server parameter model also defines object, file, file-array, and other types, but interactive form JSON configuration does not provide matching controls. Do not invent those Widget / Param.Type combinations for JSON forms.

2.2.1 WidgetType subtypes

Some controls use *WidgetOption.WidgetType to choose the UI variant:

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.
• bool type: write "true" or "false" as strings, e.g. "Default": "false".
• Widget 10 (display content) exception: Param.Default holds the on-page display body—it is not a prefilled input default and does not follow the third rule above.

Variable reference (ParamRef):

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

Use null when not referencing a variable.

2.4 Validation (WfParamConstraint)

The constraints below apply to JSON-configured controls. There is no file upload control in JSON configuration—do not use FileType, FileCount, or other file-related rules.

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

Include only these two fields. If copying JSON from the visual editor, remove internal fields such as chosen and selected before using the schema.

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 CellsLayout

"CellsLayout": [
  ["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 CellsLayout 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 FormLayoutGlobal

"FormLayoutGlobal": {
  "Gap": 8,
  "FormWidthPercent": 100
}

3.5 CellsStyle

"CellsStyle": {
  "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 AdaptiveRules

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.

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

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

3.7 FormShellStyle

HeadingStyle (title and description area):

FooterStyle (confirm and cancel buttons):

4. Complete Example

Requirements: one field per row; row 1 Name required, no default; row 2 Department 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": 1 }
    }
  ],
  "Design": {
    "CellsLayout": [
      ["clientField_1"],
      ["clientField_2"]
    ],
    "ColumnFractionsPerRow": [
      [1],
      [1]
    ],
    "FormLayoutGlobal": {
      "Gap": 8,
      "FormWidthPercent": 100
    },
    "CellsStyle": {
      "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"
      }
    },
    "AdaptiveRules": [
      { "MinWidthPx": 780, "MaxCols": 6, "Size": "lg" },
      { "MinWidthPx": 500, "MaxCols": 3, "Size": "md" },
      { "MinWidthPx": 0, "MaxCols": 1, "Size": "sm" }
    ],
    "FormShellStyle": {
      "HeadingStyle": {
        "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"
      },
      "FooterStyle": {
        "Padding": { "Top": 12, "Right": 16, "Bottom": 12, "Left": 16 },
        "Margin": { "Top": 12, "Right": 0, "Bottom": 0, "Left": 0 },
        "BackgroundColor": "#FFFFFF",
        "PrimaryButtonBackgroundColor": "#4584EF",
        "SecondaryButtonBackgroundColor": "#FFFFFF",
        "PrimaryButtonTextColor": "#FFFFFF",
        "SecondaryButtonTextColor": "#111827"
      }
    }
  }
}

4.1 Common Snippets

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

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

Display content (not submitted)

Minimal structure; DisplayName and similar fields may be omitted.

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

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, non-empty Param.Name, and "OutputMode": "overwrite"; Widget 10 uses Param.Name: "" and omits OutputMode.
2. Widget must match Param.Type, EnumInputs, and *WidgetOption; pick the correct WidgetType per 2.2.1 for single/multi select, text, and boolean controls.
3. When using Design, every Id in CellsLayout must exist in Fields.
4. ColumnFractionsPerRow must align with CellsLayout row and column counts.
5. Empty slots must be "", not omitted.
6. Output must be valid JSON; key casing must match this guide.
7. Each EnumInputs item should contain only Name and Value; do not copy chosen, selected, or other fields from visual-editor exports.
8. Use only Widget 1–10 and the Param.Type values listed here; do not invent unsupported controls such as file upload.
9. At the root level, include only FormTitle, FormDescription, ConfirmButtonText, CancelButtonText, Fields, and Design; do not write runtime-only fields such as InvokerName or InvokerToolName.
10. Before saving, click Preview Form on the node to verify rendering and required-field validation.