AEM adaptive forms implementation using REST webservice

[sankarr26533925]

Requirement :

Form contains 6 different input fields and submit button. We will invoke rest webservice(JSON request/response) to get dropdown values, checkbox values.

• 1st Field(Name) - Textbox
• 2nd Field(City) - Dropdown(Values fetched from Webservice. Assume values are Bangalore, Chennai, Hyderabad)
• 3rd Field(Interests) - Checkbox(multiple selections and Values fetched from Webservice. Assume values are Swimming, Cycling, Running)
• 4th Field(Gender) - Radiobox(Male or Female)
• 5th Field(Education details) - Table(4 columns - Qualification, Year of passout(dropdown), Percentage, Institution City(dropdown) )
• 6th Field(Education documents) - Attachment(multiple attachments)

For adding the details in table, User has to click addtabledata button which display the below popup.

Add Table data popup(contains 2 textboxes,2 dropdowns and add button). After user enter/select data in this popup and click add button, user entered data will be displayed in the table.

Once the form is submitted, all the data(including attachments) will be stored in third party system via rest webservice. Approver can either reject or approve the submitted form.

User should be allowed to edit the form again if the form is rejected state.

User should be able to access the form(readonly mode) if the form is submitted or approved state

Functionality 1 :

User enter/select the following values in below input fields and submit the form.
Arun
Bangalore
Swimming and Running
Male
B.E | 2009 | 98 | Bangalore
Degree certificate, Provisional certificate

Functionality 2 :

If the form is in SUBMITTED state, User should access the same form which should display all the user entered information(including attachments) in readonly mode(all fields should be auto filled using rest webservice).

Functionality 3 :

If the form is in REJECTED state, User should access the same form which should display all the user entered information in edit mode.
All the input fields(including attachments) should be auto filled using rest webservice.
User can change the dropdown/checkbox/radiobox value or update/remove table data/attachment and submit the form again.

Modifed value :

Madan
Chennai
Cycling and Running
Male
B.E | 2010 | 97 | Chennai
Degree certificate

Query:

1) Is this implementation possible in AEM adaptive forms using JSON schema ? Is there any other way to implement this three functionalities in AEM forms?

As of now, I completed functionality-1 using Basic adaptive form without JSON schema(form data model as NONE). Calling webservice from rule editor and displayed the data for dropdown/checkbox fields.

I read the below links to implement the functionality-3

https://docs.adobe.com/content/help/en/experience-manager-64/forms/adaptive-forms-advanced-authoring... mentioned in this link is not related to rest webservice)

https://helpx.adobe.com/in/experience-manager/6-4/forms/using/configure-data-sources.html(Looks like this approach work only in Adobe cloud platform). We are not using Adobe cloud platform

[Mayank_Gandhi]

Use-case is achievable using forms. What's the specific need of schema here? That doesn't seem to be impacting the functionality anyway.

[sankarr26533925]

@Mayank_Gandhi Thanks for your response.

I have explained my requirement with single section only for understanding. However there are 6 to 7 sections in single form, which need to be filled by user before submitting.

We have different webservices for getting individual dropdown values and for saving each section. So we are planning to use JSON schema which help us to prefill the data for each section in functionality-3.

There are different webservices to get each section details which are entered during form submission.

With respect to functionality-3, i have the following question. 

As I mentioned earlier, we are populating dropdown values by calling webservice from rule editor  for functionality-1. For functionality-3, we have used prefill concept using JSON schema (com.adobe.forms.common.service.DataProvider) to display the user  entered values in each section.

In Custom prefill class, we are invoking webservice call to get each section details and binding the data to form.

https://docs.adobe.com/content/help/en/experience-manager-learn/forms/adaptive-forms/prefill-service...

However we have to show both all dropdown values(which is from rule editor for functionality-1) along with user selected value. Please let me know how to display user selected value along with other dropdown values for functionality-3.

[Mayank_Gandhi]

Is there a screenshot or something that you can share, this is not very clear to me.

[Mayank_Gandhi]

There are 2 things: 1. AJAX call to dropdown 2. loading the prefill You might be knowing already when prefill is being loaded with Rejected as a new form would not have any submitted data at first. I assume that you have a flag to handle and differentiate a form that is new versus a submitted form. The basic thing in this case would be to make synchronous JS call or use promises. Post completion of first AJAX CALL issue a promise and do a FDM call if promise is resolved. You should also do a setValue for dropdown in later.

[sankarr26533925]

@Mayank_Gandhi - Thanks for responding to this query.

In below screenshots, Checkbox name was wrongly entered as "Male" instead of "Gender". Please ignore it.

Functionality -1(User entering the values and submitting the form. It is in draft state)

For City dropdown, webservice is invoked from rule editor via Ajax to get city dropdown values.

Functionality -3(User reentering the values and submitting the form again. It is in rejected state)

We are using prefill concept using JSON schema (com.adobe.forms.common.service.DataProvider) to display the user entered values while submitting the form.

We created Custom prefill class(implements DataProvider) which invokes webservice call to get form details(Name, City, Interests Gender) in JSON format and binds the data to form.

Json Format:

{
"PersonDetails": {
"name" : "test",
"city" : "chennai",
"gender" : "male",
"interest" : ["Swimming", "Running"]
}
}

https://docs.adobe.com/content/help/en/experience-manager-learn/forms/adaptive-forms/prefill-service...

We have to show both all dropdown values(Bangalore, Chennai, Hyderabad) along with user selected value(Chennai) in City dropdown. As mentioned above, I am loading city dropdown values from Rule editor and user selected value via Custom Prefill class. Please let me know how to load the dropdown values along with user selected value in single place instead of loading from different places(rule editor and Custom Prefill class)

[Mayank_Gandhi]

There are 2 things:

1. AJAX call to dropdown

2. loading the prefill

You might be knowing already when prefill is being loaded with Rejected as a new form would not have any submitted data at first. I assume that you have a flag to handle and differentiate a form that is new versus a submitted form. The basic thing in this case would be to make synchronous JS call or use promises. Post completion of first AJAX CALL issue a promise and do a FDM call if promise is resolved. You should also do a setValue for dropdown in later.

[sankarr26533925]

@Mayank_Gandhi 

Thanks for you response.

So for FDM call, i have to follow instruction as per below link. Create data model using Swagger file since we are using Rest webservice.

https://helpx.adobe.com/in/experience-manager/6-3/forms/using/invoke-form-data-model-services.html

So the below prefill service will not be useful for this functionality  because both(Custom Prefill class and Ajax call to load dropdown values) are happening at different time.

https://docs.adobe.com/content/help/en/experience-manager-learn/forms/adaptive-forms/prefill-service...

As per your below point, FDM call will not set selected dropdown value. It will just populate all other input fields(other than dropdown and Checkbox values) in the form. In this case, how to read the value(User selected) in rule editor to set dropdown value. Should we make another FDM call to get user selected dropdown value(what user selected while creating the form) ?

You should also do a setValue for dropdown in later.