how to build the form summary in AEM forms

[#1]

I recently started using AEM forms. Currently I am working on a requirement where we need to display the summary of all the form fields to the customer before submitting the form. I have come across two out of the box components i.e. "verify step" and "summary step". However these components are displaying a pdf document part of an iframe instead of HTML. But I need to make some styling changes like adding edit links so that the user can edit it. I was not sure whether its recommended to use these components for my requirement. Are there any other OOTB components which I can use for my requirement ?

[#2]

Maybe use additional panel and in that show a separate read-only fragment with similar bindings as your AF.

[1] Adobe Experience Manager Help | Adaptive form fragments

[#3]

I have asked the Form team to look here.

[#4]

Thanks for the reply !!

I had a similar thought too and I tried it by creating similar form fileds for the summary as well and disabled them. I was not sure if its recommended to take this route. However I had some challenges in styling them to make it look as a summary page since they were all input fields.

I also thought of an other way where we just create a component with plain HTML of the summary and dynamically bind the values of the form fields to this component using javascript.

[#5]

That would be really helpful. Thanks for the reply !!

[#6]

Styling could be done separately in Style mode. That shouldn't be any problem. I could do that easily - Used Fragment in Summary. See attached doc.

AF-Summary-Styling.pdf ‏168 KB

[#7]

I dont see any attached doc except for the fragments url in your earlier comment. Did you attach any ?

[#8]

Previous comment

"Styling could be done separately in Style mode. That shouldn't be any problem. I could do that - used fragment in Summary panel."

Here is the file :

Shared Files - Acrobat.com