ドキュメントAEM as a Cloud Serviceユーザーガイド

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 開発者
  • 管理者
  • ユーザー
バージョン
記事リンク
AEM 6.5
ここをクリックしてください
AEM as a Cloud Service
この記事

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

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

繰り返し可能性

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

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

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

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

フォーム内の繰り返し可能なセクションの追加または削除 add-or-delete-repeatable-section-in-panel-container

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

パネルコンテナを繰り返し可能にする make-panel-container-repeatable

「アクセシビリティ」タブ

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

  1. パネルコンテナを選択して、 cmppr をクリックします。

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

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

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

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

インスタンスマネージャーを使用した繰り返し可能なセクションの追加（スクリプトを使用） add-repeatable-section-using-instance-manager-via-scripts

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

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

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

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

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

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

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

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

https://video.tv.adobe.com/v/3421052/adaptive-forms-repeatable-sections-repeat-sections/?quality=12&learn=on

インスタンスマネージャー（スクリプト経由）を使用した繰り返し可能なセクションの削除 delete-repeatable-section-using-instance-manager-via-scripts

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

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

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

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

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

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

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

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

https://video.tv.adobe.com/v/3421620/adaptive-forms-repeatable-sections

NOTE
フィールドが繰り返し可能なパネルに属する場合、スクリプトで名前を指定して直接アクセスすることはできません。フィールドにアクセスするには、instances の InstanceManager API を使用してフィールドが属している繰り返し可能インスタンスを指定します。instances の API InstanceManagerを使用するための構文を以下に示します。
<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
NOTE
パネルのすべてのインスタンスがアダプティブフォームから削除されている場合、削除されたパネルのインスタンスを追加するには、_panelName 構文を使用してパネルのインスタンスマネージャをキャプチャし、インスタンスマネージャーの addInstance API を使用して削除されたインスタンスを追加します。例えば、_panelName.addInstance() です。削除されたパネルのインスタンスを 1 つ追加します。

フォームテンプレート（XDP／XSD）からのサブフォームの繰り返しの使用 using-repeating-subforms-from-form-template-xdp-xsd

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

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

関連トピック see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab