項目を選択グループコンポーネントに動的に追加

AEM Forms 6.5 では、アダプティブフォーム選択グループコンポーネント(チェックボックス、ラジオボタン、画像リストなど)に項目を動的に追加する機能が導入されました。

ユースケースに応じて、ビジュアルエディターやコードエディターを使用して項目を追加できます。

ビジュアルエディターの使用: ​関数呼び出しまたはサービス呼び出しの結果から、選択グループの項目を入力できます。 例えば、REST API 呼び出しの応答を使用して、選択グループの項目を設定できます。

以下のスクリーンショットでは、 Loan Period(years) のオプションを、getLoanPeriods というサービス呼び出しの結果に設定しています。

ルールエディター

コードエディターの使用:フォームに入力された値に基づいて、選択グループの項目を動的に設定する場合。 例えば、次のコードスニペットでは、チェックボックスの項目を、アダプティブフォームの申込者の名前と配偶者のフィールドに入力された値に設定します。

コードスニペットでは、チェックボックスコンポーネントである WorkingMembers の項目を設定します。 項目の配列は、アダプティブフォームの applicantName および spouse テキストフィールドの値を取得することで、動的に作成されています。


 if(MaritalStatus.value=="Married")
  {
WorkingMembers.items =["spouse="+spouse.value,"applicant="+applicantName.value];
  }
else
  {
    WorkingMembers.items =["applicant="+applicantName.value];
  }

送信されたデータは次のようになります

<afUnboundData>

<data>

<applicantName>John Jacobs</applicantName>

<MaritalStatus>Married</MaritalStatus>

<spouse>Gloria Rios</spouse>

<WorkingMembers>spouse,applicant</WorkingMembers>

</data>

</afUnboundData>

ルールエディターを使用した項目の追加

コードエディターを使用した項目の追加

お使いのシステムでこれを試す方法は次のとおりです。

コードエディターを使用した項目の追加

  • アセットをダウンロード
  • Forms とドキュメントを開く
  • 「作成/ファイルのアップロード」をクリックし、前の手順でダウンロードしたファイルをアップロードします
  • Forms をプレビュー
  • 「申込者名」を入力し、「配偶者の有無」を「既婚」に選択します
  • 配偶者の名前を入力
  • 「次へ」をクリックします。
  • 配偶者の有無が既婚の場合は、申込者の名前と配偶者の名前が入力されたチェックボックスが表示されます

ビジュアルエディターを使用した項目の追加

NOTE
Tomcat はポート 8080 で、AEM はポート 4502 で実行されていると想定されています
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e