繰り返し可能なセクションとは、フォームに動的に追加またはフォームから動的に削除できるパネルのことです。
例えば、就職活動の場合、求職者は前職の詳細を提供するにあたり、会社名、役職、担当していたプロジェクト、その他備考などに情報を区分けします。すべての雇用者の情報は当然異なっていますが、セクションの構成は似通っています。そのような場合には、求人応募フォームに雇用者セクションを 1 つ設けておいて、さらに必要に応じてそのようなセクションを動的に追加できるようにしておきます。動的に追加できるこれらのセクションを、繰り返し可能なセクションといいます。
以下に挙げる方法のうちいずれかによって、繰り返し可能なパネルを作成できます。
編集モードで、パネルを選択し、をタップします。 サイドバーのプロパティで「パネルを繰り返し可能にする」を有効にします。「最大」フィールドと「最小」フィールドに値を指定します。
最大数フィールドでは、パネルがそのページ上に登場してよい最大の回数を指定します。パネルの登場回数を制限しないように設定するには、最大数フイールドに「-1」を入力します。
最小数フィールドでは、パネルがそのフォーム上に登場してよい最小の回数を指定します。後で最小数フィールドの値に「0」を指定した場合は、レンダリング完了後にスクリプトを介してすべてのインスタンスを削除することができます。
繰り返しを許可しないパネルを作成するには、最大数フィールドと最小数フィールドに 1 を入力します。アコーディオンレイアウトの場合は、最大数フィールドに「-1」を指定することはできません。この場合は任意の高い数値を入力することにより、最大数を制限しない設定と同様の動作を実現します。
パネルの親要素に繰り返しを許可する場合は、繰り返し可能なパネルのインスタンスを管理するために追加ボタンおよび削除ボタンが親要素に含まれている必要があります。次の手順を実行して、親にボタンを挿入し、ボタンのスクリプトを有効にします。
サイドバーから、ボタンコンポーネントをパネルの親要素にドラッグ&ドロップします。コンポーネントを選択し、をタップします。 ルールエディターでボタンのルールが開きます。
ルールエディターウィンドウで、「作成」をクリックします。
「フォームオブジェクトと関数」の行で、「ビジュアルエディター」を選択します。
ルール領域のWHENで、がクリックされた状態を選択します。
THENで、次の操作を行います。
フォームオブジェクトと関数の行で、「コードエディター」を選択します。「ルールを編集」をクリックし、コード領域で次の操作を行います。
this.panel.instanceManager.addInstance()
()を指定します。this.panel.instanceManager.removeInstance(this.panel.instanceIndex)
を指定します「完了」をクリックします。
フィールドが繰り返し可能パネルに属する場合、スクリプトで名前を指定して直接アクセスすることはできません。フィールドにアクセスするには、InstanceManager
のinstances
APIを使用して、フィールドが属する繰り返し可能なインスタンスを指定します。 InstanceManager
でinstances
APIを使用する構文は次のとおりです。
<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.value
AA2 データを読み込むには次のように指定します。
Panel1.instanceManager.instances[1].textbox.value
詳しくは、AEM Forms Java API リファレンスの「Class: InstanceManager#instances」を参照してください。
パネルのすべてのインスタンスがアダプティブフォームから削除された場合、削除されたパネルのインスタンスを追加するには、_panelName構文を使用してパネルのインスタンスマネージャーを取り込み、インスタンスマネージャーのaddInstance APIを使用して削除されたインスタンスを追加します。 例えば、_panelName.addInstance() は削除されたパネルのインスタンスを 1 つ追加します。
1 つのパネルにはさまざまなレイアウトを選択することができます。アコーディオンデザインのレイアウトでは、繰り返し可能パネルをただちに使用することができます。アコーディオンデザインのレイアウトで繰り返し可能パネルを使用するには、以下の手順を実行します。
繰り返しを許可するパネルの親要素上で、をタップします。 サイドバーにプロパティが表示されます。レイアウトドロップダウンで、「アコーディオン」を選択します。
繰り返しを許可するパネルで、をタップします。 サイドバーにパネルのプロパティが表示されます。「パネルを繰り返し可能にする」タブを有効にし、最大数および最小数フィールドの値を指定します。
これで、プラス(+)ボタンと削除()ボタンを使用して、パネルの追加と削除を行うことができます。
繰り返し可能なサブフォームは、アダプティブフォームにおける繰り返し可能なパネルに似ています。AEM Formsデザイナーで、次の手順を実行して繰り返しサブフォームを作成します。
添付の .zip ファイルには、繰り返し可能なサブフォーラムのサンプルが含まれています。
XML Schema、または任意の複合タイプエレメントの minOccours および maxOccurs プロパティから繰り返し可能なパネルを作成できます。「XML Schema をフォームモデルとして使用する場合のアダプティブフォームの作成」を参照してください。
以下のコードでは、SampleType
パネルで minOccours および 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>
アコーディオンデザインではないレイアウトの場合は、インスタンスの追加と削除を行うには、アダプティブフォームのボタンコンポーネントを使用します。