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

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

前提条件

フォームモデルとして JSON スキーマを使用してアダプティブフォームをオーサリングする場合、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 スキーマで使用可能な情報を使用して、生成された各フィールドをマッピングします。具体的には、以下のようになります。

• title プロパティは、アダプティブフォームコンポーネントのラベルとして機能します。
• description プロパティは、アダプティブフォームコンポーネントの詳細な説明として設定されます。
• default プロパティは、アダプティブフォームフィールドの初期値として機能します。
• maxLength プロパティは、テキストフィールドコンポーネントの maxlength 属性として設定されます。
• minimum、maximum、exclusiveMinimum および 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 スキーマの要素に次の制限を追加して、アダプティブフォームコンポーネントで許容される値を制限できます。

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

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

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

サポート対象外の構成

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

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

よくある質問

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

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

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

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

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

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

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