繰り返し可能なセクション（コアコンポーネント）を使ったフォームの作成

繰り返し可能なセクションとは、同じデータの複数のインスタンスに関する情報を収集するために、複製または繰り返し実行できるフォームの一部を指します。

例えば、ある人物の職歴に関する情報を収集するために使用するフォームについて考えてみましょう。前の各職務の詳細を取得するための繰り返し可能なセクションがある場合があります。繰り返し可能なセクションには、通常、会社名、役職、雇用日、職務責任などのフィールドが含まれます。繰り返し可能なセクションの複数のインスタンスを追加して、保持している各ジョブに関する情報を入力できます。

この記事を最後まで読むと、以下の操作を実行できるようになります。

• アダプティブフォーム内に繰り返し可能なセクションを作成する
• アダプティブフォームコンポーネントの繰り返し回数の最小数または最大数を設定する
• 繰り返し可能なセクションに対して追加または削除のアクションを設定するために、ルールエディターを使用する

パネル、アコーディオン、水平タブ、またはウィザードコンポーネントを使用して、アダプティブフォームのセクションを繰り返し可能にすることができます。パネル、アコーディオン、水平タブ、またはウィザードコンポーネントに子コンポーネントを追加して、フォーム内に繰り返し可能なセクションを作成できます。

このドキュメントの例は、パネルコンポーネントに基づいています。同じ手順を実行して、アコーディオン、水平タブ、およびウィザードコンポーネントを繰り返すことができます。

フォーム内の繰り返し可能なセクションの追加または削除

フォーム内でパネルを繰り返したり、繰り返し可能なパネルを削除したりする場合、フォーム作成者はボタンコンポーネントを使用してパネルのインスタンスを追加または削除します。フォームに繰り返し可能なセクション（パネル）を追加または削除するには、次の手順を実行します。

• パネルコンテナを繰り返し可能にする
• 繰り返し可能なセクションを追加する
• 繰り返し可能なセクションを削除する

パネルコンテナを繰り返し可能にする

パネルを繰り返し可能にするには、次の手順を実行します。

1. パネルコンテナを選択し、「 」を選択します。 .

2. 繰り返しパネル​をクリックし、パネルを繰り返し可能にする​のスイッチをオンにします。

3. 最小繰り返し可能セクションの必要に応じて​最小繰り返し回数​を設定します。パネルを繰り返しない場合、または繰り返しパネルを削除するには、最小繰り返し回数​を 0 に設定できます。デフォルトでは、最小繰り返し回数の値は 0 です。

4. 最大繰り返し回数​を設定して、必要な回数パネルを繰り返します。デフォルトの値は無限です。

   メモ

   • 最小繰り返し回数を -ve 値にすることはできません。
   • 繰り返しを許可しないパネルを作成するには、最大値フィールドと最小値フィールドの値を 1 に設定します。

インスタンスマネージャーを使用した繰り返し可能なセクションの追加（スクリプトを使用）

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

1. ボタンコンポーネント​をパネルの親要素に追加します。以下のビデオの例では、ラベル名 Add とフィールド名 AddPanel のボタンコンポーネントが使用されています。コンポーネントを選択し、「 」を選択します。 . ルールエディターでボタンコンポーネントのルールが開きます。

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

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

   1. ルール領域の WHEN で、 クリックされた ステートを選択します。
   2. THEN で、「インスタンスを追加」を選択し、 を使用してパネルをドラッグ＆ドロップするか、「オブジェクトをドロップまたは次から選択」を使用して選択します。

   フォームオブジェクトと関数の行で、「コードエディター」を選択します。「ルールを編集」をクリックして、コード領域で以下の操作を行います。

   • 「パネルを追加ボタン」を作成するには、this.panel.instanceManager.addInstance() を指定します。

   「完了」をクリックします。

インスタンスマネージャー（スクリプト経由）を使用した繰り返し可能なセクションの削除

パネルの親要素には、繰り返し可能なパネルのインスタンスを削除するために削除ボタンが含まれている必要があります。親要素にボタンを挿入し、ボタン上のスクリプトを有効にして反復可能なパネルを削除するには、以下の手順を実行します。

1. ボタンコンポーネント​をパネルの親要素に追加します。下のビデオでは、ラベル名 DELETE が付いたボタンコンポーネントおよびフィールド名 DeletePanel が使用されます。コンポーネントを選択し、「 」を選択します。 . ルールエディターでボタンコンポーネントのルールが開きます。

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

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

   1. ルール領域の WHEN DeletePanel で、クリックされた​ステートを選択します。
   2. THEN で、「インスタンスを削除」を選択し、 を使用してパネルをドラッグ＆ドロップするか、「オブジェクトをドロップまたは次から選択」を使用して選択します。

   フォームオブジェクトと関数の行で、「コードエディター」を選択します。「ルールを編集」をクリックして、コード領域で以下の操作を行います。

   • 「パネルを削除」ボタンを作成するには、this.panel.instanceManager.removeInstance(this.panel.instanceIndex) を指定します。

   「完了」をクリックします。

フォームテンプレート（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>

関連トピック

• AEM アダプティブフォームの作成
• AEM Sites ページへ AEM アダプティブフォームを追加
• AEM アダプティブフォームへテーマを適用
• AEM アダプティブフォームへコンポーネントを追加
• AEM アダプティブフォームでの Captcha の使用
• AEM アダプティブフォームの PDF バージョン（DoR）を生成
• AEM アダプティブフォームを翻訳
• フォームの使用状況を追跡するアダプティブフォームの Adobe Analytics を有効にする
• Microsoft SharePoint へアダプティブフォームを接続
• Microsoft Power Automate へアダプティブフォームを接続
• Microsoft OneDrive へアダプティブフォームを接続
• Microsoft Azure Blob Storage へアダプティブフォームを接続
• Salesforce へアダプティブフォームを接続
• AEM アダプティブフォームで Adobe Sign を使用
• アダプティブフォームの新しいロケールを追加
• データベースへアダプティブフォームデータを送信
• REST エンドポイントへアダプティブフォームデータを送信
• AEM ワークフローへアダプティブフォームデータを送信
• フォームポータルを使用して AEM web サイト上の AEM アダプティブフォームを一覧表示