跳至主要内容

JSON Editor 控制項介紹

JSON Editor 編輯並檢查 JSON 結構化內容。它會加入所在 Form 的欄位狀態、驗證與提交範圍。

1. 適用情境​

常見用途：

  • 進階設定物件
  • API 請求片段
  • 需要保留 JSON 結構的可編輯資料

2. 新增與設定​

  1. 把 JSON Editor 加入 Form Section 的 Fields 區域。
  2. 設定穩定且唯一的 Field Key / Name，並與後端 DTO 屬性一致。
  3. 設定下列元件屬性，再視需要加入 Required、Help Text、Full row 與條件運算式。
  4. 在 Design Preview 檢查初始值與版面，並使用 Form Validate / Submit 驗證完整資料流程。

3. 主要屬性​

屬性作用
Default Text設定欄位使用的初始值、內容或格式。
Help Text控制欄位在 Design Preview 與 Runtime 中的顯示方式。
Full row控制欄位在 Design Preview 與 Runtime 中的顯示方式。
Required啟用或關閉此行為。
Visible When定義表單繫結、提交或回應的資料形狀。

Field Key、Required、Help Text、Full row、Visible When 等通用屬性由 Form 欄位契約提供；本表列出使用 JSON Editor 時最需要注意的設定。

4. 表單值與後端契約​

提交值： 有效 JSON 值；串接前要明確後端接收 JSON 字串或解析後物件。

{
  "retry": 3,
  "enabled": true
}

範例只說明資料形狀；API 仍應依業務 DTO 驗證型別、範圍與權限。

5. 驗證、條件與互動​

所有欄位都可使用 Required、Visible When、Disabled When、Required When、Dependencies 與 Clear When Hidden。條件運算式只控制互動，不取代後端權限與驗證。

元件能力： 欄位值會進入 Form 狀態；只有屬性面板實際顯示的事件可用於 Interaction。

6. 使用建議​

設定建議： 限制內容大小，並依情境做逸出、清理或 Schema 驗證；不可直接執行使用者輸入的程式碼或 HTML。

返回 Form 總覽，瞭解版面、驗證、提交、草稿與後端協定。

最後於 更新