繰り返し可能なセクションを使用したフォームの作成

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

繰り返し可能なセクションとは、フォームに動的に追加または削除できるパネルのことです。

例えば、就職活動の場合、求職者は前職の詳細を提供するにあたって、会社名、役職、担当していたプロジェクト、その他備考などに情報を区分けします。すべての雇用者の情報は当然異なっていますが、セクションの構成は似通っています。そのような場合には、求人応募フォームに雇用者セクションを 1 つ設けておいて、さらに必要に応じてそのようなセクションを動的に追加できるようにしておきます。動的に追加できるこれらのセクションを、繰り返し可能なセクションといいます。

以下に挙げる方法のいずれかによって、繰り返し可能なパネルを作成できます。

スクリプトを介したインスタンスマネージャーの使用

1. 編集モードで、パネルを選択し、 をタップします。サイドバーのプロパティで「パネルを繰り返し可能にする」を有効にします。「最大値」および「最小値」フィールドの値を指定します。

   「最大値」フィールドでは、パネルがそのページに表示される最大の回数を指定します。パネルの表示回数を制限しないように設定するには、「最大値」フィールドに「-1」を指定します。

   「最小値」フィールドでは、パネルがそのフォームに表示される最小の回数を指定します。「最小値」フィールドを「0」に設定すると、後で、レンダリング完了後にスクリプトを使用してすべてのインスタンスを削除できます。

   メモ

   繰り返しを許可しないパネルを作成するには、「最大値」フィールドと「最小値」フィールドの値を 1 に設定します。アコーディオンレイアウトでは、「最大値」フィールドに「-1」を指定することはできません。この場合、任意の高い数値を入力することで、最大値を制限しない設定と同様の動作を実現します。

2. パネルの親要素に繰り返しを許可する場合は、繰り返し可能なパネルのインスタンスを管理するために、追加ボタンおよび削除ボタンが親要素に含まれている必要があります。親要素にボタンを挿入し、ボタン上のスクリプトを有効にするには、以下の手順を実行します。

   1. サイドバーから、ボタンコンポーネントをパネルの親要素にドラッグ＆ドロップします。コンポーネントを選択して、「」をタップします。ルールエディターでボタンのルールが開きます。

   2. ルールエディターウィンドウで、「作成」をクリックします。

      フォームオブジェクトと関数の行で、「ビジュアルエディター」を選択します。

      1. ルール領域の WHEN で、 クリックされた ステートを選択します。

      2. 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. 繰り返しを許可するパネルの親で、 をタップします。サイドバーにプロパティが表示されます。レイアウト ドロップダウンで、「アコーディオン」を選択します。

2. 繰り返しを許可するパネルで、 をタップします。サイドバーにパネルプロパティが表示されます。「パネルを繰り返し可能にする」タブを有効にし、「最大値」および「最小値」フィールドの値を指定します。

   これで、プラス（+）ボタンと削除（）ボタンを使用して、パネルの追加と削除を行うことができるようになりました。

フォームテンプレート（XDP／XSD）からのサブフォームの繰り返しの使用

繰り返し可能なサブフォームは、アダプティブフォームの繰り返し可能なパネルに似ています。AEM Forms Designer で繰り返しのサブフォームを作成するには、以下の手順を実行します。

1. 階層パレットで、繰り返したいサブフォームの親サブフォームを選択します。
2. オブジェクトパレットの「サブフォーム」タブをクリックし、コンテンツリストで「フローレイアウト」を選択します。
3. 繰り返すサブフォームを選択します。
4. オブジェクトパレットで「サブフォーム」タブをクリックし、コンテンツリストで「配置済み」または「フローレイアウト」を選択します。
5. 「連結」タブをクリックして、「各データアイテムについてサブフォームを繰り返す」を選択します。
6. 繰り返し回数の最小値を指定する場合は、「最小値」を選択して関連するボックスに数値を入力します。このオプションを 0 に設定した場合は、データ結合時にサブフォーム内のオブジェクトにデータが提供されないと、フォームのレンダリング時にサブフォームが配置されません。
7. サブフォームの繰り返し回数の最大値を指定する場合は、「最大値」を選択して、関連するボックスに数値を入力します。「最大値」に値を入力しなければ、サブフォームの繰り返し回数は無制限になります。
8. サブフォームの繰り返し回数をデータ量に関係なく指定する場合は、「初期値」オプションを選択して、関連するボックスに数値を入力します。このオプションを選択した場合は、データが使用できないときやデータ項目が指定された「初期値」の値より少ないときにも、フォーム上に空のサブフォームインスタンスが配置されます。
9. 親サブフォームにボタンを 2 つ追加します。ひとつはインスタンスの追加に、もうひとつは繰り返し可能なサブフォームのインスタンスの削除に使用します。詳しい手順については、「アクションの作成」を参照してください。
10. ここで、アダプティブフォームにフォームテンプレートをリンクします。詳しい手順については、テンプレートに基づくアダプティブフォームの作成を参照してください。
11. 手順 9 で作成したボタンを使用して、サブフォームを追加および削除します。

添付の .zip ファイルには、繰り返し可能なサブフォーラムのサンプルが含まれています。

ファイルを入手

XML スキーマ（XSD）の繰り返し設定の使用

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>