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.

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

Transcript
In this video, we’ll take a look at populating the items of a radio button group dynamically, in AM form 6 or 5 you can now populate the items of a checkbox or a radio button group dynamically. So what I have here, is a simple radio button group, which is called the loan period. As you can see, any radio button group when you want to use, it must have at least two items in this options here. So, I’m going to provide two dummy items.
These values will be replaced when we get the response from our rest endpoint all, so I’m going to save this. And then to populate these items dynamically, I’m going to open up the rule editor, create a new rule, and I’m going to select, “set options of.” So there are a number of options available for you from the drop down list here. Select “set options of,” so I’m going to set options of long period years, which is my radio button group, I’m going to select the service output. And the name of my service is going to be called “get loan periods.” This service does not require any input parameters, and then I mapped the output to the display and the data value. So, every item in the radio button group needs to have a display value and a data value. In my case, both of these values are going to be the same. So once I’ve created a rule on my radio button group, I click “done” to save and then I close this. So let’s take a look at my form data model, which was the service which we called to populate our radio button group. So this is my form data model. And when I execute the test, these are the values that I get. In my case is going to be 5, 10, and 15 So my radio button group will have these values, of 5, 10, and 15. So let’s see this in action. So here is my form, and when I refresh my form here, I enter a low amount, say of 50,000.
Tap out and my loan period is now populated by the results of that rest end point call. I select a loan period. I select the interest. and then when I click on “get amortization schedule,” it makes another REST API call, which returns me the amortization schedule for this particular loan amount and the loan period and the interest rate. So this is how you can use an external endpoint to populate the results of your radio button group. In the next video, we will take a look at how you can populate the items of a checkbox using the API.

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
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e