Adobeでは、最新の拡張可能なデータキャプチャを使用することをお勧めします コアコンポーネント 対象: 新しいアダプティブFormsの作成 または AEM SitesページへのアダプティブFormsの追加. これらのコンポーネントは、アダプティブFormsの作成における大幅な進歩を表し、印象的なユーザーエクスペリエンスを実現します。 この記事では、基盤コンポーネントを使用してアダプティブFormsを作成する古い方法について説明します。
繰り返し可能なセクションとは、フォームに動的に追加または削除できるパネルのことです。
例えば、就職活動の場合、求職者は前職の詳細を提供するにあたって、会社名、役職、担当していたプロジェクト、その他備考などに情報を区分けします。すべての雇用者の情報は当然異なっていますが、セクションの構成は似通っています。そのような場合には、求人応募フォームに雇用者セクションを 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 つ追加します。
パネルには、様々なレイアウトオプションがあります。アコーディオンデザインオプションのレイアウトでは、繰り返し可能なパネルをすぐに使用できます。アコーディオンデザインオプションのレイアウトで繰り返し可能なパネルを使用するには、以下の手順を実行します。
繰り返しを許可するパネルの親で、 をタップします。サイドバーにプロパティが表示されます。レイアウト ドロップダウンで、「アコーディオン」を選択します。
繰り返しを許可するパネルで、 をタップします。サイドバーにパネルプロパティが表示されます。「パネルを繰り返し可能にする」タブを有効にし、「最大値」および「最小値」フィールドの値を指定します。
これで、プラス(+)ボタンと削除()ボタンを使用して、パネルの追加と削除を行うことができるようになりました。
繰り返し可能なサブフォームは、アダプティブフォームの繰り返し可能なパネルに似ています。AEM Forms Designer で繰り返しのサブフォームを作成するには、以下の手順を実行します。
添付の .zip ファイルには、繰り返し可能なサブフォーラムのサンプルが含まれています。
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>
アコーディオンデザインではないレイアウトの場合、インスタンスの追加と削除を行うには、アダプティブフォームのボタンコンポーネントを使用してください。