Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象: 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用してアダプティブFormsを作成する古い方法について説明します。
バージョン | 記事リンク |
---|---|
AEM as a Cloud Service | ここをクリックしてください |
AEM 6.5 | この記事 |
フォームモデルとして JSON スキーマを使用してアダプティブフォームをオーサリングする場合、JSON スキーマの基本を理解している必要があります。この記事を読む前に、以下のコンテンツを読んでおくことをお勧めします。
Adobe Experience Manager Forms では、既存の JSON スキーマをフォームモデルとして使用したアダプティブフォームの作成がサポートされています。JSON スキーマは、組織内のバックエンドシステムによってデータが作成または使用される構造を表します。使用する JSON スキーマは、v4 仕様に準拠している必要があります。
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 プロパティ。 構文
|
ドロップダウンコンポーネント:
|
format 制約を含む string プロパティ。例えば、メール、日付など。 構文
|
|
|
テキストフィールド |
number プロパティ |
サブタイプが float に設定された数値フィールド |
integer プロパティ |
サブタイプが integer に設定された数値フィールド |
boolean プロパティ |
切り替え |
object プロパティ |
パネル |
array プロパティ | minItems および maxItems にそれぞれ等しい min および max を持つ繰り返し可能なパネル。同種の配列のみがサポートされます。そのため、項目制限は、配列でなくオブジェクトである必要があります。 |
アダプティブフォームは JSON スキーマで使用可能な情報を使用して、生成された各フィールドをマッピングします。具体的には、以下のようになります。
title
プロパティは、アダプティブフォームコンポーネントのラベルとして機能します。description
プロパティは、アダプティブフォームコンポーネントの詳細な説明として設定されます。default
プロパティは、アダプティブフォームフィールドの初期値として機能します。maxLength
プロパティは、テキストフィールドコンポーネントの maxlength
属性として設定されます。minimum
、maximum
、exclusiveMinimum
および exclusiveMaximum
プロパティは、数値ボックスコンポーネントに使用されます。DatePicker component
の範囲をサポートするために、追加の JSON スキーマプロパティ minDate
および maxDate
が用意されています。minItems
および maxItems
プロパティは、パネルコンポーネントに追加または削除される可能性のある項目/フィールドの数を制限するために使用されます。readOnly
プロパティは、アダプティブフォームコンポーネントの readonly
属性を設定します。required
プロパティは、アダプティブフォームフィールドを必須としてマークします。一方、パネル(タイプがオブジェクト)の場合、最終的に送信された JSON データには、そのオブジェクトに対応する空の値を持つフィールドがあります。pattern
プロパティは、アダプティブフォームで検証パターン(正規表現)として設定されます。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" }
}
}
上記の例では、各顧客が出荷先と請求先の両方の住所を持つ顧客レコードを定義します。どちらの住所も構造(都道府県、市区町村、番地など)が同じ場合は、住所が重複しないようにすることをお勧めします。また、今後変更が行われたときに、簡単にフィールドを追加したり削除したりできます。
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 コードを以下に示します。
"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 スキーマの要素に次の制限を追加して、アダプティブフォームコンポーネントで許容される値を制限できます。
スキーマプロパティ |
データタイプ |
説明 |
コンポーネント |
|
文字列 |
数値および日付の上限を指定します。デフォルトでは、最大値が含まれます。 |
|
|
文字列 |
数値および日付の下限を指定します。デフォルトでは、最小値が含まれます。 |
|
|
ブール値 |
true の場合、フォームのコンポーネントで指定された数値または日付は、maximum プロパティに指定された数値または日付よりも小さい値である必要があります。 false の場合、フォームのコンポーネントで指定された数値または日付は、maximum プロパティに指定された数値または日付以下の値である必要があります。 |
|
|
ブール値 |
true の場合、フォームのコンポーネントで指定された数値または日付は、minimum プロパティに指定された数値または日付よりも大きい値である必要があります。 false の場合、フォームのコンポーネントで指定された数値または日付は、minimum プロパティに指定された数値または日付以上の値である必要があります。 |
|
|
文字列 |
コンポーネントで許可される最小文字数を指定します。最小の長さは 0 以上である必要があります。 |
|
maxLength |
文字列 | コンポーネントで許可される最大文字数を指定します。最大の長さは 0 以上である必要があります。 |
|
|
文字列 |
文字のシーケンスを指定します。文字が指定されたパターンに適合すると、コンポーネントはその文字を受け入れます。 pattern プロパティは、対応するアダプティブフォームコンポーネントの検証パターンにマッピングされます。 |
|
maxItems |
文字列 | 配列の項目の最大数を指定します。項目の最大数は 0 以上である必要があります。 | |
minItems |
文字列 | 配列の項目の最小数を指定します。項目の最小数は 0 以上である必要があります。 |
フォーム送信時に、すべての JSON スキーマベースのアダプティブFormsでスキーマに準拠したデータを生成するには、次の手順に従います。
https://server:host/system/console/configMgr
.アダプティブフォームは次の JSON スキーマ構成をサポートしていません。
繰り返し可能なサブフォーム(minOccurs 値または maxOccurs 値が 1 より大きい)では、サブフォーム(任意の複合型から生成された構造)の個々の要素をドラッグできないのはなぜですか?
繰り返し可能なサブフォームでは、完全なサブフォームを使用する必要があります。選択した一部のフィールドのみを使用する場合は、構造全体を使用し、不要部分を削除します。
コンテンツファインダーに長く複雑な構造があります。特定の要素を見つけるにはどうすればよいですか?
以下の 2 つのオプションがあります。
JSON スキーマファイルの拡張子は何ですか。
JSON スキーマファイルの拡張子は、.schema.json にする必要があります。例えば、<filename>.schema.json のように指定します。