メインコンテンツまでスキップ

JSON Editor

JSON Editor は構造化された JSON コンテンツを編集・確認します。このフィールドは Form の状態、検証、送信範囲に含まれます。

1. 利用場面​

主な用途：

  • 高度な設定オブジェクト
  • API 要求の断片
  • JSON 構造を保つ編集データ

2. 追加と設定​

  1. Form Section の Fields に JSON Editor を追加します。
  2. バックエンド DTO のプロパティと一致する、安定した一意の Field Key / Name を設定します。
  3. 以下の固有プロパティを設定し、必要に応じて Required、Help Text、Full row、条件式を追加します。
  4. Design Preview で初期値とレイアウトを確認し、Form の Validate / Submit でデータ経路全体をテストします。

3. 主なプロパティ​

プロパティ役割
Default Textフィールドの初期値、内容、または形式を設定します。
Help TextDesign Preview と Runtime での表示方法を制御します。
Full rowDesign Preview と Runtime での表示方法を制御します。
Requiredこの動作を有効または無効にします。
Visible Whenバインド、送信、応答で使用するデータ形状を定義します。

Field Key、Required、Help Text、Full row、Visible When などの共通設定は Form フィールド契約から提供されます。表には JSON Editor で特に重要な設定を示します。

4. フォーム値とバックエンド契約​

送信される値： 有効な JSON 値です。API が 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 の概要 を参照してください。

に最終更新