AEM Form 6.3 (What's New) - Single Page Applications (SPA)

[#1]

Hi,

I read in AEM Form 6.3 (What's New) that it helps to build Single Page Applications (SPA).

What is an SPA?

How is it different from regular applications?

Thanks,

Rama.

[#2 · Accepted solution]

AEM Forum wrote...

Hi,

I read in AEM Form 6.3 (What's New) that it helps to build Single Page Applications (SPA).

What is an SPA?

How is it different from regular applications?

Thanks,

Rama.

You would have probably got to known about what exactly is a SPA and how is it different from other regular application. I would now try to answer this question in the context of AEM Forms.

Let's understand this by taking a simple use-case. Say, there is an AEM/Non AEM Page which is already built and you would want to embed/use adaptive form inside this page which is a single page application(meaning no page refresh). Typically in such scenarios you would use the adaptive form inside an HTML container(which could be an iframe or a normal HTML div element) present inside your SPA.

To achieve this use-case, you could leverage the sling based REST API's of AEM Forms to refer the Adaptive Form inside your page. Basically, with the help of XML HTTP request one could bring the Adaptive Form's HTML/JS/CSS from the server to the client.

To go around cross-domain issues, one could leverage/configure the dispatcher/proxy configurations to route the request to the AEM Forms Server.

We are already in the process of documenting this entire feature(using Adaptive Form inside non-AEM page which is a SPA) as part of 6.3, its usage etc. The documentation of using Adaptive Form in an existing AEM page can be found here [1]

Hope this gives you a brief overview and answer's your query.

[1] https://helpx.adobe.com/aem-forms/6-2/embed-adaptive-form-aem-sites.html

[#3]

This is well documented here, hope this will help.

Embed adaptive forms or Interactive Communications in AEM Sites pages

Thanks!

[#4]

kautuksahni​ and rishim22446870​, how far did you guys get with "using Adaptive Form inside non-AEM page which is a SPA"?

We are using SPA on AEM 6.4 and the client wants to have adaptive forms inside the app and we cant use the AEM Form container component because it is only used inside AEM pages.

What is the best solution in solving this issue?

Thanks,

Mochabo

[#5]

Hi all,

I highly appreciate all your responses.

They are all very informative.

Thanks,

Rama.

[#6]

Firstly, moving this question to AEM Forms topic.

SPA is common web term meaning : A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

Link:- https://en.wikipedia.org/wiki/Single-page_application

You may also be interested in know diff between SPA vs Multi page applications?

Link:- https://www.uxpin.com/studio/blog/single-page-vs-multi-page-ui-design-pros-cons/

Link:- http://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages

I would request you to please google this term and there you can find many more good references.

I hope this would help you.

~kautuk

[#7]

Hi,

I think you need to look at this slide share which beautifully explained by our community member.

//http://blogs.adobe.com/aaa/2015/06/build-single-page-applications-using-angularjs-on-aem.html

~ Ratna.