Display Bootstrap Modal Data Grid in AEM Adaptive forms

[abhilash1289-TP]

I am working on a requirement where I need to display results from back end service in Modal window with ability to search results within the model window and allow end user to select multiple rows/items from the modal. I need to display these selected items in adaptive form table component upon closing the dialog.

I have seen below article similar to my use case from one of our community member

[Sample] How to create and use Modal in an Adaptive Form

Since my requirement is enhanced version of above use case , I have few queries in below mentioned points from implementing this.

Writing more HTML content to adaptive form static text field

Place heavy scripting related to Modal window in form initialize event

Using third party client libraries to implement the complex functionality

I would like to know more about above mentioned items along with cleaner design approach . I was also thinking about developing this form without using adaptive forms however this solution may not be feasible since it is one in the group of adaptive forms in the client forms portal !

[Mayank_Gandhi · Accepted solution]

Writing more HTML content to adaptive form static text field

-> You can create your own custom component

Place heavy scripting related to Modal window in form initialize event

-> Does all the script actually need to be on form Initialize? Can you split the JS calls and add them on some other actions before the modal dialog is open.

Using third party client libraries to implement the complex functionality

-> Yes you can do that but as you are talking about calling the service and displaying the data in modal, I would be cautious of the fact that you will be changing the form at the background which may or may not work in desired way and check for support of third-party libraries are supported on all the devices.