JSON スキーマを使用したアダプティブフォームの作成

最終更新日: 2023-07-28
  • 作成対象:
  • Beginner
    Intermediate
    User
    Developer

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

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

前提条件

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

フォームモデルとしての JSON スキーマの使用

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 を持つ繰り返し可能なパネル。同種の配列のみがサポートされます。そのため、項目制限は、配列でなくオブジェクトである必要があります。

共通のスキーマプロパティ

アダプティブフォームは 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 スキーマのサンプル

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"
  }
 }
}

再使用可能なスキーマ定義

定義キーを使用して、再使用可能なスキーマを識別します。再使用可能なスキーマ定義を使用して、フラグメントを作成します。これは、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 スキーマ定義でのフィールドの事前設定

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
}

フォームオブジェクトのスクリプトまたは式の設定

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 イベントでのフィールドの非表示

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

値コミットイベントでの別のフィールドの値の設定

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

アダプティブフォームコンポーネントで許容される値の制限

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

スキーマプロパティ

データタイプ

説明

コンポーネント

maximum

文字列

数値および日付の上限を指定します。デフォルトでは、最大値が含まれます。

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

minimum

文字列

数値および日付の下限を指定します。デフォルトでは、最小値が含まれます。

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

exclusiveMaximum

ブール値

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

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

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

exclusiveMinimum

ブール値

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

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

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

minLength

文字列

コンポーネントで許可される最小文字数を指定します。最小の長さは 0 以上である必要があります。

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

pattern

文字列

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

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

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

スキーマ準拠データを有効にする

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

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

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

サポート対象外の構成

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

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

よくある質問

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

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

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

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

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

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

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

このページ