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

Avatar

Avatar
Contributor 2
Level 8
AEM_Forum
Level 8

Likes

147 likes

Total Posts

631 posts

Correct reply

4 solutions
Top badges earned
Contributor 2
Validate 100
Validate 50
Validate 25
Validate 10
View profile

Avatar
Contributor 2
Level 8
AEM_Forum
Level 8

Likes

147 likes

Total Posts

631 posts

Correct reply

4 solutions
Top badges earned
Contributor 2
Validate 100
Validate 50
Validate 25
Validate 10
View profile
AEM_Forum
Level 8

02-04-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 1
Level 2
rishim22446870
Level 2

Likes

2 likes

Total Posts

32 posts

Correct reply

12 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 10
Affirm 1
View profile

Avatar
Boost 1
Level 2
rishim22446870
Level 2

Likes

2 likes

Total Posts

32 posts

Correct reply

12 solutions
Top badges earned
Boost 1
Affirm 5
Affirm 3
Affirm 10
Affirm 1
View profile
rishim22446870
Level 2

03-04-2017

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

Answers (5)

Answers (5)

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

327 likes

Total Posts

1,150 posts

Correct reply

185 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

327 likes

Total Posts

1,150 posts

Correct reply

185 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

16-05-2019

This is well documented here, hope this will help.

Embed adaptive forms or Interactive Communications in AEM Sites pages

Thanks!

Avatar

Avatar
Level 1
mochabom
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile

Avatar
Level 1
mochabom
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile
mochabom
Level 1

04-04-2019

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

Avatar

Avatar
Contributor 2
Level 8
AEM_Forum
Level 8

Likes

147 likes

Total Posts

631 posts

Correct reply

4 solutions
Top badges earned
Contributor 2
Validate 100
Validate 50
Validate 25
Validate 10
View profile

Avatar
Contributor 2
Level 8
AEM_Forum
Level 8

Likes

147 likes

Total Posts

631 posts

Correct reply

4 solutions
Top badges earned
Contributor 2
Validate 100
Validate 50
Validate 25
Validate 10
View profile
AEM_Forum
Level 8

04-04-2017

Hi all,

I highly appreciate all your responses.

They are all very informative.

Thanks,

Rama.

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,383 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,198 likes

Total Posts

6,383 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

03-04-2017

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

Avatar

Avatar
Validate 25
MVP
Ratna_Kumar
MVP

Likes

159 likes

Total Posts

755 posts

Correct reply

134 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Validate 25
MVP
Ratna_Kumar
MVP

Likes

159 likes

Total Posts

755 posts

Correct reply

134 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ratna_Kumar
MVP

03-04-2017

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.