Adding items dynamically to choice group component

AEM Forms 6.5 introduced the ability to add items dynamically to an Adaptive Forms choice group component such as CheckBox, Radio Button and Image List.

This capability is available live on Samples Server. Search for Dynamic Checkbox items card and click on “Try It”

You can add items using the visual editor as well as the code editor depending on your use case.

Using the visual editor: You can populate the items of the choice group from the results of a function call or service call. For example, you can set the items of the choice group by consuming the response of a REST API call.

In the screenshot below, we are setting the options of Loan Period(years) to the results of a service call called getLoanPeriods.

Rule Editor

Using the code editor: When you want to set the items in the choice group dynamically based on the values entered in the form. For example, the following code snippet sets the items of the checkbox to the values entered in the applicant name and spouse fields of the Adaptive Form.

In the code snippet, we are setting the items of WorkingMembers which is a checkbox component. The array for the items is being built dynamically by fetching the values of the applicantName and spouse text fields of the adaptive forms

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

The submitted data is as follows

<afUnboundData>

<data>

<applicantName>John Jacobs</applicantName>

<MaritalStatus>Married</MaritalStatus>

<spouse>Gloria Rios</spouse>

<WorkingMembers>spouse,applicant</WorkingMembers>

</data>

</afUnboundData>

Adding items using the rule editor

Adding items using the code editor

To try this on your system:

Using the code editor to add items

  • Download the assets
  • Open Forms And Documents
  • Click on “Create | File Upload” and upload the file you downloaded in the previous step
  • Preview the forms
  • Enter Applicant Name and select the Marital Status to Married
  • Enter the spouse name
  • Click Next
  • You should see checkbox populated with the applicant name and with the spouse name if the marital status is married

Using the visual editor to add items

NOTE

It is assumed that tomcat is running on port 8080 and AEM on port 4502

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now