繰り返し可能なセクションを使用したフォームの作成 creating-forms-with-repeatable-sections
アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。
繰り返し可能なセクションとは、フォームに動的に追加または削除できるパネルのことです。
例えば、就職活動の場合、求職者は前職の詳細を提供するにあたって、会社名、役職、担当していたプロジェクト、その他備考などに情報を区分けします。すべての雇用者の情報は当然異なっていますが、セクションの構成は似通っています。そのような場合には、求人応募フォームに雇用者セクションを 1 つ設けておいて、さらに必要に応じてそのようなセクションを動的に追加できるようにしておきます。動的に追加できるこれらのセクションを、繰り返し可能なセクションといいます。
以下に挙げる方法のいずれかによって、繰り返し可能なパネルを作成できます。
スクリプトを介したインスタンスマネージャーの使用 using-instance-manager-via-scripts-nbsp
-
編集モードで、パネルを選択し、それから
「最大値」フィールドでは、パネルがそのページに表示される最大の回数を指定します。パネルの表示回数を制限しないように設定するには、「最大値」フィールドに「-1」を指定します。
「最小値」フィールドでは、パネルがそのフォームに表示される最小の回数を指定します。「最小値」フィールドを「0」に設定すると、後で、レンダリング完了後にスクリプトを使用してすべてのインスタンスを削除できます。
note note NOTE 繰り返しを許可しないパネルを作成するには、「最大値」フィールドと「最小値」フィールドの値を 1 に設定します。アコーディオンレイアウトでは、「最大値」フィールドに「-1」を指定することはできません。この場合、任意の高い数値を入力することで、最大値を制限しない設定と同様の動作を実現します。 -
パネルの親要素に繰り返しを許可する場合は、繰り返し可能なパネルのインスタンスを管理するために、追加ボタンおよび削除ボタンが親要素に含まれている必要があります。親要素にボタンを挿入し、ボタン上のスクリプトを有効にするには、以下の手順を実行します。
-
サイドバーから、ボタンコンポーネントをパネルの親要素にドラッグ＆ドロップします。コンポーネントを選択して、
-
ルールエディターウィンドウで、「作成」をクリックします。
フォームオブジェクトと関数の行で、「ビジュアルエディター」を選択します。
-
ルール領域の WHEN で、 クリックされた ステートを選択します。
-
THEN で、以下の操作を行います。
- 「パネルを追加」ボタンを作成するには、「インスタンスを追加」を選択し、
- 「パネルを削除」ボタンを作成するには、「インスタンスを削除」を選択し、
- 「パネルを追加」ボタンを作成するには、「インスタンスを追加」を選択し、
フォームオブジェクトと関数の行で、「コードエディター」を選択します。「ルールを編集」をクリックして、コード領域で以下の操作を行います。
- 「パネルを追加ボタン」を作成するには、
this.panel.instanceManager.addInstance()を指定します。 - 「パネルを削除」ボタンを作成するには、
this.panel.instanceManager.removeInstance(this.panel.instanceIndex)を指定します。
「完了」をクリックします。
note note NOTE フィールドが繰り返し可能なパネルに属する場合、スクリプトで名前を指定して直接アクセスすることはできません。フィールドにアクセスするには、 instancesのInstanceManagerAPI を使用してフィールドが属している繰り返し可能インスタンスを指定します。instancesの APIInstanceManagerを使用するための構文を以下に示します。<panelName>.instanceManager.instances[<instanceNumber>].<fieldname>例えば、テキストボックスを持つ繰り返し可能なパネルを含むアダプティブフォームを作成するとします。このフォームに 3 つの繰り返し可能テキストボックスを事前入力するには、以下の xml が必要です。 <panel1><textbox1>AA1</panel1></textbox1><panel1><textbox1>AA2</panel1></textbox1><panel1><textbox1>AA3</panel1></textbox1>AA1 データを読み込むには、以下のように指定します。 Panel1.instanceManager.instances[0].textbox.valueAA2 データを読み込むには、以下のように指定します。 Panel1.instanceManager.instances[1].textbox.value詳しくは、AEM Forms Java API リファレンスの「Class: InstanceManager#instances」を参照してください。 note note NOTE パネルのすべてのインスタンスがアダプティブフォームから削除されている場合、削除されたパネルのインスタンスを追加するには、_panelName 構文を使用してパネルのインスタンスマネージャーをキャプチャし、インスタンスマネージャーの addInstance API を使用して削除されたインスタンスを追加します。例えば、_panelName.addInstance() です。削除されたパネルのインスタンスを 1 つ追加します。 -
-
親パネルに対するアコーディオンレイアウトの使用 using-the-accordion-layout-for-the-parent-panel-nbsp
パネルには、様々なレイアウトオプションがあります。アコーディオンデザインオプションのレイアウトでは、繰り返し可能なパネルをすぐに使用できます。アコーディオンデザインオプションのレイアウトで繰り返し可能なパネルを使用するには、以下の手順を実行します。
-
繰り返しを許可するパネルの親で、
-
繰り返しを許可するパネルで、
これで、プラス（+）ボタンと削除（
フォームテンプレート（XDP／XSD）からのサブフォームの繰り返しの使用 using-repeating-subforms-from-form-template-xdp-xsd
繰り返し可能なサブフォームは、アダプティブフォームの繰り返し可能なパネルに似ています。AEM Forms Designer で繰り返しのサブフォームを作成するには、以下の手順を実行します。
- 階層パレットで、繰り返したいサブフォームの親サブフォームを選択します。
- オブジェクトパレットの「サブフォーム」タブをクリックし、コンテンツリストで「フローレイアウト」を選択します。
- 繰り返すサブフォームを選択します。
- オブジェクトパレットで「サブフォーム」タブをクリックし、コンテンツリストで「配置済み」または「フローレイアウト」を選択します。
- 「連結」タブをクリックして、「各データアイテムについてサブフォームを繰り返す」を選択します。
- 繰り返し回数の最小値を指定する場合は、「最小値」を選択して関連するボックスに数値を入力します。このオプションを 0 に設定した場合は、データ結合時にサブフォーム内のオブジェクトにデータが提供されないと、フォームのレンダリング時にサブフォームが配置されません。
- サブフォームの繰り返し回数の最大値を指定する場合は、「最大値」を選択して、関連するボックスに数値を入力します。「最大値」に値を入力しなければ、サブフォームの繰り返し回数は無制限になります。
- サブフォームの繰り返し回数をデータ量に関係なく指定する場合は、「初期値」オプションを選択して、関連するボックスに数値を入力します。このオプションを選択した場合は、データが使用できないときやデータ項目が指定された「初期値」の値より少ないときにも、フォーム上に空のサブフォームインスタンスが配置されます。
- 親サブフォームにボタンを 2 つ追加します。ひとつはインスタンスの追加に、もうひとつは繰り返し可能なサブフォームのインスタンスの削除に使用します。詳しい手順については、「アクションの作成」を参照してください。
- ここで、アダプティブフォームにフォームテンプレートをリンクします。手順について詳しくは、テンプレートに基づいてアダプティブフォームを作成を参照してください。
- 手順 9 で作成したボタンを使用して、サブフォームを追加および削除します。
添付の .zip ファイルには、繰り返し可能なサブフォーラムのサンプルが含まれています。
XML スキーマ（XSD）の繰り返し設定の使用 using-repeat-settings-of-an-xml-schema-xsd-br
XML スキーマ、または任意の複合タイプ要素の minOccurs および maxOccurs プロパティから、繰り返し可能なパネルを作成できます。XML スキーマについて詳しくは、XML スキーマをフォームモデルとして使用してアダプティブフォームを作成を参照してください。
以下のコードでは、SampleType パネルで minOccurs および maxOccurs プロパティが使用されています。
<?xml version="1.0" encoding="utf-8" ?>
<xs:schema targetNamespace="https://adobe.com/sample.xsd"
xmlns="https://adobe.com/sample.xsd"
xmlns:xs="https://www.w3.org/2001/XMLSchema"
>
<xs:element name="sample" type="SampleType"/>
<xs:complexType name="SampleType">
<xs:sequence>
<xs:element name="leaderName" type="xs:string" default="Enter Name"/>
<xs:element name="assignmentStartDate" type="xs:date"/>
<xs:element name="gender" type="GenderEnum"/>
<xs:element name="noOfProjectsAssigned" type="IntType"/>
<xs:element name="assignmentDetails" type="AssignmentDetails"
minOccurs="0" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="AssignmentDetails">
<xs:attribute name="name" type="xs:string" use="required"/>
<xs:attribute name="durationOfAssignment" type="xs:unsignedInt" use="required"/>
<xs:attribute name="numberOfMentees" type="xs:unsignedInt" use="required"/>
<xs:attribute name="descriptionOfAssignment" type="xs:string" use="required"/>
<xs:attribute name="financeRelatedProject" type="xs:boolean"/>
</xs:complexType>
<xs:simpleType name="IntType">
<xs:restriction base="xs:int">
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="GenderEnum">
<xs:restriction base="xs:string">
<xs:enumeration value="Female"/>
<xs:enumeration value="Male"/>
</xs:restriction>
</xs:simpleType>
</xs:schema>