JSON スキーマを使用したアダプティブフォームの作成 creating-adaptive-forms-using-json-schema

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

バージョン
記事リンク
AEM as a Cloud Service
ここをクリックしてください
AEM 6.5
この記事

前提条件 prerequisites

フォームモデルとして JSON スキーマを使用してアダプティブフォームをオーサリングする場合、JSON スキーマの基本を理解している必要があります。この記事を読む前に、以下のコンテンツを読んでおくことをお勧めします。

フォームモデルとしての JSON スキーマの使用 using-a-json-schema-as-form-model

Adobe Experience Manager Forms では、既存の JSON スキーマをフォームモデルとして使用したアダプティブフォームの作成がサポートされています。JSON スキーマは、組織内のバックエンドシステムによってデータが作成または使用される構造を表します。使用する JSON スキーマは、v4 仕様に準拠している必要があります。

JSON スキーマの使用上の主な特長を以下に示します。

  • JSON の構造は、アダプティブフォームのオーサリングモードの「コンテンツファインダー」タブでツリーとして表示されます。JSON 階層からアダプティブフォームに要素をドラッグして追加できます。
  • 関連付けられたスキーマに準拠する JSON を使用して、フォームに事前入力できます。
  • ユーザーが入力したデータは、送信時には関連付けられたスキーマに適合する JSON として送信されます。

JSON スキーマは、単純型要素と複合型要素で構成されています。要素には、その要素にルールを追加する属性が含まれています。これらの要素や属性がアダプティブフォーム上にドラッグされると、自動的に該当するアダプティブフォームコンポーネントにマッピングされます。

JSON 要素とアダプティブフォームコンポーネントのマッピングは、次のように行われます。

"birthDate": {
              "type": "string",
              "format": "date",
              "pattern": "date{DD MMMM, YYYY}",
              "aem:affKeyword": [
                "DOB",
                "Date of Birth"
              ],
              "description": "Date of birth in DD MMMM, YYYY",
              "aem:afProperties": {
                "displayPictureClause": "date{DD MMMM, YYYY}",
                "displayPatternType": "date{DD MMMM, YYYY}",
                "validationPatternType": "date{DD MMMM, YYYY}",
                "validatePictureClause": "date{DD MMMM, YYYY}",
                "validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
              }
JSON の要素、プロパティ、属性
アダプティブフォームコンポーネント

enum および enumNames 制約を含む string プロパティ。

構文

{

"type" : "string",

"enum" : ["M", "F"]

"enumNames" : ["Male", "Female"]

}

ドロップダウンコンポーネント:

  • enumNames にリストされた値はドロップボックスに表示されます。
  • enum にリストされた値は計算に使用されます。

format 制約を含む string プロパティ。例えば、メール、日付など。

構文

{

"type" : "string",

"format" : "email"

}

  • type が string で format が email の場合、メールコンポーネントがマップされます。
  • type が string で format が hostname の場合、検証を含むテキストボックスコンポーネントがマップされます。

{

"type" : "string",

}

テキストフィールド
number プロパティ
サブタイプが float に設定された数値フィールド
integer プロパティ
サブタイプが integer に設定された数値フィールド
boolean プロパティ
切り替え
object プロパティ
パネル
array プロパティ
minItems および maxItems にそれぞれ等しい min および max を持つ繰り返し可能なパネル。同種の配列のみがサポートされます。そのため、項目制限は、配列でなくオブジェクトである必要があります。

共通のスキーマプロパティ common-schema-properties

アダプティブフォームは JSON スキーマで使用可能な情報を使用して、生成された各フィールドをマッピングします。具体的には、以下のようになります。

  • title プロパティは、アダプティブフォームコンポーネントのラベルとして機能します。
  • description プロパティは、アダプティブフォームコンポーネントの詳細な説明として設定されます。
  • default プロパティは、アダプティブフォームフィールドの初期値として機能します。
  • maxLength プロパティは、テキストフィールドコンポーネントの maxlength 属性として設定されます。
  • minimummaximumexclusiveMinimum および exclusiveMaximum プロパティは、数値ボックスコンポーネントに使用されます。
  • DatePicker component の範囲をサポートするために、追加の JSON スキーマプロパティ minDate および maxDate が用意されています。
  • minItems および maxItems プロパティは、パネルコンポーネントに追加または削除される可能性のある項目/フィールドの数を制限するために使用されます。
  • readOnly プロパティは、アダプティブフォームコンポーネントの readonly 属性を設定します。
  • required プロパティは、アダプティブフォームフィールドを必須としてマークします。一方、パネル(タイプがオブジェクト)の場合、最終的に送信された JSON データには、そのオブジェクトに対応する空の値を持つフィールドがあります。
  • pattern プロパティは、アダプティブフォームで検証パターン(正規表現)として設定されます。
  • JSON スキーマファイルの拡張子は、.schema.json を維持する必要があります。例えば、<filename>.schema.json のように指定します。

JSON スキーマのサンプル sample-json-schema

JSON スキーマの例を示します。

{
 "$schema": "https://json-schema.org/draft-04/schema#",
 "definitions": {
  "employee": {
   "type": "object",
   "properties": {
    "userName": {
     "type": "string"
    },
    "dateOfBirth": {
     "type": "string",
     "format": "date"
    },
    "email": {
     "type": "string",
     "format": "email"
    },
    "language": {
     "type": "string"
    },
    "personalDetails": {
     "$ref": "#/definitions/personalDetails"
    },
    "projectDetails": {
     "$ref": "#/definitions/projectDetails"
    }
   },
   "required": [
    "userName",
    "dateOfBirth",
    "language"
   ]
  },
  "personalDetails": {
   "type": "object",
   "properties": {
    "GeneralDetails": {
     "$ref": "#/definitions/GeneralDetails"
    },
    "Family": {
     "$ref": "#/definitions/Family"
    },
    "Income": {
     "$ref": "#/definitions/Income"
    }
   }
  },
  "projectDetails": {
   "type": "array",
   "items": {
    "properties": {
     "name": {
      "type": "string"
     },
     "age": {
      "type": "number"
     },
     "projects": {
      "$ref": "#/definitions/projects"
     }
    }
   },
   "minItems": 1,
   "maxItems": 4
  },
  "projects": {
   "type": "array",
   "items": {
    "properties": {
     "name": {
      "type": "string"
     },
     "age": {
      "type": "number"
     },
     "projectsAdditional": {
      "$ref": "#/definitions/projectsAdditional"
     }
    }
   },
   "minItems": 1,
   "maxItems": 4
  },
  "projectsAdditional": {
   "type": "array",
   "items": {
    "properties": {
     "Additional_name": {
      "type": "string"
     },
     "Additional_areacode": {
      "type": "number"
     }
    }
   },
   "minItems": 1,
   "maxItems": 4
  },
  "GeneralDetails": {
   "type": "object",
   "properties": {
    "age": {
     "type": "number"
    },
    "married": {
     "type": "boolean"
    },
    "phone": {
     "type": "number",
     "aem:afProperties": {
      "sling:resourceType": "/libs/fd/af/components/guidetelephone",
      "guideNodeClass": "guideTelephone"
     }
    },
    "address": {
     "type": "string"
    }
   }
  },
  "Family": {
   "type": "object",
   "properties": {
    "spouse": {
     "$ref": "#/definitions/spouse"
    },
    "kids": {
     "$ref": "#/definitions/kids"
    }
   }
  },
  "Income": {
   "type": "object",
   "properties": {
    "monthly": {
     "type": "number"
    },
    "yearly": {
     "type": "number"
    }
   }
  },
  "spouse": {
   "type": "object",
   "properties": {
    "name": {
     "type": "string"
    },
    "Income": {
     "$ref": "#/definitions/Income"
    }
   }
  },
  "kids": {
   "type": "array",
   "items": {
    "properties": {
     "name": {
      "type": "string"
     },
     "age": {
      "type": "number"
     }
    }
   },
   "minItems": 1,
   "maxItems": 4
  }
 },
 "type": "object",
 "properties": {
  "employee": {
   "$ref": "#/definitions/employee"
  }
 }
}

再使用可能なスキーマ定義 reusable-schema-definitions

定義キーを使用して、再使用可能なスキーマを識別します。再使用可能なスキーマ定義を使用して、フラグメントを作成します。これは、XSD での複合型の識別と同じです。定義を含む JSON スキーマのサンプルを以下に示します。

{
  "$schema": "https://json-schema.org/draft-04/schema#",

  "definitions": {
    "address": {
      "type": "object",
      "properties": {
        "street_address": { "type": "string" },
        "city":           { "type": "string" },
        "state":          { "type": "string" }
      },
      "required": ["street_address", "city", "state"]
    }
  },

  "type": "object",

  "properties": {
    "billing_address": { "$ref": "#/definitions/address" },
    "shipping_address": { "$ref": "#/definitions/address" }
  }
}

上記の例では、各顧客が出荷先と請求先の両方の住所を持つ顧客レコードを定義します。どちらの住所も構造(都道府県、市区町村、番地など)が同じ場合は、住所が重複しないようにすることをお勧めします。また、今後変更が行われたときに、簡単にフィールドを追加したり削除したりできます。

JSON スキーマ定義でのフィールドの事前設定 pre-configuring-fields-in-json-schema-definition

aem:afProperties プロパティを使用して JSON スキーマのフィールドを事前構成し、カスタムのアダプティブフォームコンポーネントにマップできます。以下に例を示します。

{
    "properties": {
        "sizeInMB": {
            "type": "integer",
            "minimum": 16,
            "maximum": 512,
            "aem:afProperties" : {
                 "sling:resourceType" : "/apps/fd/af/components/guideTextBox",
                 "guideNodeClass" : "guideTextBox"
             }
        }
    },
    "required": [ "sizeInMB" ],
    "additionalProperties": false
}

フォームオブジェクトのスクリプトまたは式の設定 configure-scripts-or-expressions-for-form-objects

アダプティブフォームの式言語は JavaScript です。すべての式は、有効な JavaScript™ の式で、アダプティブフォームのスクリプトモデル API を使用しています。フォームオブジェクトを事前設定して、フォームイベントの式を評価できます。

アダプティブフォームの式やスクリプトをアダプティブフォームのコンポーネント用に事前設定するには、aem:afproperties プロパティを使用します。例えば、initialize イベントがトリガーされると、次のコードは電話フィールドの値を設定し、値をログに出力します。

"telephone": {
  "type": "string",
  "pattern": "/\\d{10}/",
  "aem:affKeyword": ["phone", "telephone","mobile phone", "work phone", "home phone", "telephone number", "telephone no", "phone number"],
  "description": "Telephone Number",
  "aem:afProperties" : {
    "sling:resourceType" : "fd/af/components/guidetelephone",
    "guideNodeClass" : "guideTelephone",
    "events": {
      "Initialize" : "this.value = \"1234567890\"; console.log(\"ef:gh\") "
    }
  }
}

フォームオブジェクトのスクリプトや式を構成するには、forms-power-user グループのメンバーである必要があります。次の表に、アダプティブフォームコンポーネントでサポートされるすべてのスクリプトイベントを示します。

コンポーネント
イベント
initialize
Calculate
視認性
Validate(検証)
Enabled
値コミット
クリック
オプション
テキストフィールド
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
数値フィールド
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
数値ステッパー
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
ラジオボタン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
電話番号
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
切り替え
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
ボタン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
チェックボックス
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
ドロップダウン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
画像選択
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
データ入力フィールド
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
日付選択
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
メール
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
ファイル添付
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
はいチェックマークアイコン
画像
はいチェックマークアイコン
はいチェックマークアイコン
描画
はいチェックマークアイコン
はいチェックマークアイコン
パネル
はいチェックマークアイコン
はいチェックマークアイコン

JSON でのイベントの使用例としては、initialize イベントでフィールドを非表示にし、値コミットイベントで別のフィールドの値を設定する例があります。スクリプトイベントの式の作成について詳しくは、アダプティブフォームの式を参照してください。

前述の例のサンプル JSON コードを以下に示します。

initialize イベントでのフィールドの非表示 hiding-a-field-on-initialize-event

"name": {
    "type": "string",
    "aem:afProperties": {
        "events" : {
            "Initialize" : "this.visible = false;"
        }
    }
}

値コミットイベントでの別のフィールドの値の設定 configure-value-of-another-field-on-value-commit-event

"Income": {
    "type": "object",
    "properties": {
        "monthly": {
            "type": "number",
            "aem:afProperties": {
                "events" : {
                    "Value Commit" : "IncomeYearly.value = this.value * 12;"
                }
            }
        },
        "yearly": {
            "type": "number",
            "aem:afProperties": {
                "name": "IncomeYearly"
            }
        }
    }
}

アダプティブフォームコンポーネントで許容される値の制限 limit-acceptable-values-for-an-adaptive-form-component

JSON スキーマの要素に次の制限を追加して、アダプティブフォームコンポーネントで許容される値を制限できます。

スキーマプロパティ
データタイプ
説明
コンポーネント
maximum
文字列
数値および日付の上限を指定します。デフォルトでは、最大値が含まれます。
  • 数値ボックス
  • 数値ステッパー
  • 日付選択
minimum
文字列
数値および日付の下限を指定します。デフォルトでは、最小値が含まれます。
  • 数値ボックス
  • 数値ステッパー
  • 日付選択
exclusiveMaximum
ブール値

true の場合、フォームのコンポーネントで指定された数値または日付は、maximum プロパティに指定された数値または日付よりも小さい値である必要があります。

false の場合、フォームのコンポーネントで指定された数値または日付は、maximum プロパティに指定された数値または日付以下の値である必要があります。

  • 数値ボックス
  • 数値ステッパー
  • 日付選択
exclusiveMinimum
ブール値

true の場合、フォームのコンポーネントで指定された数値または日付は、minimum プロパティに指定された数値または日付よりも大きい値である必要があります。

false の場合、フォームのコンポーネントで指定された数値または日付は、minimum プロパティに指定された数値または日付以上の値である必要があります。

  • 数値ボックス
  • 数値ステッパー
  • 日付選択
minLength
文字列
コンポーネントで許可される最小文字数を指定します。最小の長さは 0 以上である必要があります。
  • テキストボックス
maxLength
文字列
コンポーネントで許可される最大文字数を指定します。最大の長さは 0 以上である必要があります。
  • テキストボックス
pattern
文字列

文字のシーケンスを指定します。文字が指定されたパターンに適合すると、コンポーネントはその文字を受け入れます。

この pattern プロパティは、対応するアダプティブフォームコンポーネントの検証パターンにマッピングされます。

  • XSD スキーマにマップされるすべてのアダプティブフォームコンポーネント
maxItems
文字列
配列の項目の最大数を指定します。項目の最大数は 0 以上である必要があります。
minItems
文字列
配列の項目の最小数を指定します。項目の最小数は 0 以上である必要があります。

スキーマ準拠データの有効化 enablig-schema-compliant-data

フォーム送信時にすべての JSON スキーマベースのアダプティブフォームでスキーマに準拠したデータを生成できるようにするには、次の手順に従います。

  1. https://server:host/system/console/configMgr で Experience Manager web コンソールに移動します。
  2. アダプティブフォームおよびインタラクティブ通信 web チャネルの設定 ​を見つけます。
  3. その設定を選択して編集モードで開きます。
  4. スキーマ準拠データを生成 ​チェックボックスをオンにします。
  5. 設定を保存します。

アダプティブフォームおよびインタラクティブ通信 web チャネルの設定

サポート対象外の構成 non-supported-constructs

アダプティブフォームは次の JSON スキーマ構成をサポートしていません。

  • Null タイプ
  • any などの Union タイプ
  • OneOf、AnyOf、AllOf、NOT
  • 同種の配列のみがサポートされます。そのため、項目制限は、配列でなくオブジェクトである必要があります。

よくある質問 frequently-asked-questions

繰り返し可能なサブフォーム(minOccurs 値または maxOccurs 値が 1 より大きい)では、サブフォーム(任意の複合型から生成された構造)の個々の要素をドラッグできないのはなぜですか?

繰り返し可能なサブフォームでは、完全なサブフォームを使用する必要があります。選択した一部のフィールドのみを使用する場合は、構造全体を使用し、不要部分を削除します。

コンテンツファインダーに長く複雑な構造があります。特定の要素を見つけるにはどうすればよいですか?

以下の 2 つのオプションがあります。

  • ツリー構造をスクロールする
  • 検索ボックスを使用して、要素を検索する

JSON スキーマファイルの拡張子は何ですか。

JSON スキーマファイルの拡張子は、.schema.json にする必要があります。例えば、<filename>.schema.json のように指定します。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2