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

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

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

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

  1. 繰り返しを許可するパネルの上で「編集」をクリックします。コンポーネントを編集ウィンドウで「繰り返しの設定」タブをクリックしてから、最大数および最小数フィールドの値を指定します。

    最大数フィールドでは、パネルがそのページ上に登場してよい最大の回数を指定します。パネルの登場回数を制限しないように設定するには、最大数フイールドに「-1」を入力します。

    最小数フィールドでは、パネルがそのフォーム上に登場してよい最小の回数を指定します。後で最小数フィールドの値に「0」を指定した場合は、レンダリング完了後にスクリプトを介してすべてのインスタンスを削除することができます。

    注意:

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

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

    1. サイドキックから、ボタンコンポーネントをパネルの親要素にドラッグ&ドロップします。ボタンコンポーネントを右クリックし、コンテキストメニューから「編集」を選択します。ボタンの編集ウィンドウが表示されます。

    2. ボタンの編集ウィンドウで、「スクリプト」タブをクリックします。クリック式フィールドで、目的に応じて以下の操作を行います。

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

      OK」をクリックします。

      注意:

      フィールドが繰り返し可能パネルに属する場合、スクリプトで名前を指定して直接アクセスすることはできません。フィールドにアクセスするには、InstanceManagerinstances の API を使用してフィールドが属している繰り返し可能インスタンスを指定します。InstanceManagerinstances の 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

      詳しくは、「Class: InstanceManager#instances」を参照してください。

    3. 削除ボタンを追加するには、別のボタンコンポーネントをドラッグ&ドロップし、クリック式フィールドの値を
      this.panel.instanceManager.removeInstance(this.panel.instanceIndex).に設定します。

       

親パネルに対するアコーディオンレイアウトの使用

1 つのパネルにはさまざまなレイアウトを選択することができます。アコーディオンデザインのレイアウトでは、繰り返し可能パネルをただちに使用することができます。アコーディオンデザインのレイアウトで繰り返し可能パネルを使用するには、以下の手順を実行します。

  1. 繰り返しを許可するパネルの親要素上で「編集」をクリックします。コンポーネントを編集ウィンドウが表示されます。パネルレイアウトドロップダウンで、「アコーディオンデザインのレイアウト」オプションを選択します。

  2. 繰り返しを許可するパネルで、「編集」をクリックします。コンポーネントを編集ウィンドウが表示されます。「繰り返しの設定」タブを選択し、最大数フィールドおよび最小数フィールドに値を入力します。

    これにより、プラスボタン(+)とクロスボタン(x)を使用してパネルの追加と削除を行えるようになりました。

フォームテンプレート(XDP/XSD)からのサブフォームの繰り返しの使用

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

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

ダウンロード

XML Schema(XSD)の繰り返し設定の使用

XML Schema、または任意の複合タイプエレメントの minOccours および maxOccurs プロパティから繰り返し可能なパネルを作成できます。「XML Schema をフォームモデルとして使用する場合のアダプティブフォームの作成」を参照してください。

以下のコードでは、SampleType パネルで minOccours および maxOccurs プロパティが使用されています。

<?xml version="1.0" encoding="utf-8" ?> 
    <xs:schema targetNamespace="http://adobe.com/sample.xsd"
                    xmlns="http://adobe.com/sample.xsd"
                    xmlns:xs="http://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>

注意:

アコーディオンデザインではないレイアウトの場合は、インスタンスの追加と削除を行うには、アダプティブフォームのボタンコンポーネントを使用します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー