Adding items dynamically to choice group component
- Topics:
- Adaptive Forms
CREATED FOR:
- Beginner
- User
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.
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
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
- Download the assets
- Install Tomcat if you do not have it already. Instructions to install tomcat are available here
- Deploy the SampleRest.war file contained in this zip file in your Tomcat
- Open Forms And Documents
- Click on “Create | File Upload” and upload the file you downloaded in the previous step
- Preview the forms
- Enter Loan amount and tab out of the field. This will trigger the rule which displays the loan period field.
- Select the appropriate loan period(The items for the loan period are populated from the rest call)
- Select the interest rate and click on “Get Amortization Schedule”
- The amortization table should get populated. The amortization schedule is fetched using a REST call.
NOTE