互動表單：JSON 配置指南

前言

在 互動式表單 節點中，選擇 JSON 設定 後，您可以根據本指南的規則定義自訂表單的 JSON 架構。

由於這些規則相對較為複雜，我們建議您將下方整段內容與本指南其他部分一併提供給您的 AI：

您是 GoInsight Interactive Form JSON configuration expert。請根據《互動式表單 JSON 設定指南》嚴格生成 FormSchema JSON。
1. 在根層級，請使用 FormTitle、FormDescription、ConfirmButtonText、CancelButtonText、Fields 和 Design（PascalCase 命名慣例）。
2. 每個可填寫的欄位必須具備獨特的 Id；Param.Name 為英文提交鍵；DisplayName 為英文 UI 標籤。
3. 控制項必須使用 Widget 枚舉（1 文字方塊，2 密碼方塊，3 電子郵件方塊，4 日期選取器，5 時間選取器，6 數字方塊，7 布林開關，8 單選下拉式選單，9 多選下拉式選單，10 富文字方塊），並依據指南提供必要的 *WidgetOption 和 EnumInputs。
4. 使用 Param.WfParamConstraint 進行驗證；請勿使用 validationRules 陣列。
5. 佈局：LayoutCells 參考 Id；空槽請使用 ""；ColumnFractionsPerRow 與每行對齊；需要設定樣式時，請新增 CellsChrome 和 ShellPresentation。
6. 僅輸出有效 JSON，不包含註解，且請勿建立指南中未定義的 Widget 類型或欄位。
7. 使用者需求：[描述欄位需求：是否必填、預設值、每行列數、選項列表等]

使用者需求範例（以自然語言描述）：

標題：「員工入職註冊」。描述：「請提供正確資訊。」
每行一個欄位：
第 1 行：姓名，必填，無預設值。
第 2 行：部門，下拉式單選，選項：研發（rd）、產品（pm）、行銷（mkt），必填。

1. 整體 JSON 架構

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

  "Fields": [ ],

  "Design": null
}

變數插值：在FormTitle、FormDescription、按鈕標籤、Param.Default及其他字串中，您可以使用{{#NodeId.ParamName#}}在執行時替換工作流程變數。

命名慣例：

• 所有鍵使用PascalCase（例如FormTitle，而不是formTitle）。
• 每個欄位必須具備獨特的Id（例如clientField_1）；Param.Name為提交的參數名稱（英文識別碼，例如userName）。
• 使用Design時，LayoutCells中的每個非空字串必須與某個欄位的Id相符。

2. 欄位 (Fields)

2.1 欄位物件結構

2.2 控制項類型 (Widget)

JSON 設定僅支援上述表格中的控制項類型。請勿使用未列出的Widget值。

2.3 Param（參數）

預設值規則：

• 具備輸入控制項的欄位：預設值將預先填入控制項中。
• 當使用者未填寫欄位時：string 會成為空字串；其他類型則視為無值。
• 僅當Required為false且無有效輸入時，才會使用Default。

變數參考（ParamRef）：

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

未引用變數時，請使用null。

2.4 驗證（WfParamConstraint）

電子郵件範例：

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

2.5 選項（EnumInputs）

適用於 Widget 8 和 9。

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

• Name：UI 中顯示的文字
• Value：提交的數值

3. 佈局與樣式（Design）

Design控制位置、欄寬比例、間距、外部樣式及響應式列換行。控制項類型及驗證功能定義在Fields中。

當Design為null時，欄位會依序垂直堆疊。若需要多欄、欄寬比例或自訂樣式，請使用Design。

3.1 Design 結構概覽

3.2 LayoutCells

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

• 外部陣列 = 行；內部陣列 = 列。
• 非空值為欄位 Id。
• "" = 空槽佔位符；必須保留——請勿移除，否則會破壞欄寬比例。
• 標題和頁腳按鈕不在此陣列中。

3.3 ColumnFractionsPerRow

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

• 必須與LayoutCells的行和列數相符。
• 若缺失或不相符，此行會退回到等寬列。
• 權重僅影響同一行內的相對寬度。

3.4 Gap

主要表單網格的列和行間距，以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"
  }
}

建議預設值：

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

依欄位 Id 設定樣式，而非依列/行索引。

3.6 CustomSizeWidthRules

基於表單容器寬度（非完整瀏覽器視窗），設定每行最大列數。多餘的列會從左到右包裹進新行；ColumnFractionsPerRow因此會被分割。

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

規則：依MinWidthPx從大到小進行匹配；使用第一個容器寬度 >= MinWidthPx的規則，並套用其MaxCols。

3.7 ShellPresentation

HeadingChrome（標題及描述區）：

FooterChrome（確認和取消按鈕）：

4. 完整範例

需求：每行一個欄位；第 1 行 姓名必填，無預設值；第 2 行 部門下拉式單選，必填。

{
  "FormTitle": "歡迎加入！",
  "FormDescription": "請提供您的基本資訊。",
  "ConfirmButtonText": "提交",
  "CancelButtonText": "取消",
  "Fields": [
    {
      "Id": "clientField_1",
      "Widget": 1,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "name",
        "Description": "",
        "Type": "string",
        "Required": true,
        "Default": ""
      },
      "ParamRef": null,
      "DisplayName": "姓名",
      "DisplayDescription": "",
      "InputWidgetOption": { "WidgetType": 0 }
    },
    {
      "Id": "clientField_2",
      "Widget": 8,
      "OutputMode": "overwrite",
      "Param": {
        "Name": "department",
        "Description": "",
        "Type": "string",
        "Required": true,
        "Default": "",
        "EnumInputs": [
          { "Name": "研發", "Value": "rd" },
          { "Name": "產品", "Value": "pm" },
          { "Name": "行銷", "Value": "mkt" }
        ]
      },
      "ParamRef": null,
      "DisplayName": "部門",
      "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 常見程式碼片段

三列排列在一行（1:1:1）

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

說明文字（無需提交）

{
  "Id": "clientField_intro",
  "Widget": 10,
  "Param": {
    "Name": "",
    "Description": "請正確完成下方內容。",
    "Type": "string",
    "Required": false,
    "Default": ""
  },
  "DisplayName": "",
  "DisplayDescription": ""
}

帶有範圍的數字

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

5. 編寫注意事項

1. Fields不可留空；每個可填寫欄位需具備獨特的Id及非空的Param.Name。
2. Widget必須與Param.Type、EnumInputs及*WidgetOption相符。
3. 使用Design時，LayoutCells中的每個Id必須存在於Fields內。
4. ColumnFractionsPerRow必須與LayoutCells的行和列數對齊。
5. 空槽必須寫為""，不可省略。
6. 輸出必須為有效 JSON；鍵名大小寫需與本指南保持一致。
7. 儲存前，請在節點上點擊預覽表單以驗證渲染效果及必填欄位的合法性。