spa experience within an aem page | Community
Skip to main content
sreenu539
Level 7
July 11, 2024
Solved

spa experience within an aem page

  • July 11, 2024
  • 2 replies
  • 740 views

Hi,

 

Client has a requirement to display three screens, each screen will have set of questions and user entered need to carried across different screens / stateful.

 

How would you do this in AEM. My consideration is this would be a react or angular component that need to be rendered somehow on aem page.

Does anyone had these kind of requirement, implemented ?

 

Any useful links or guidance on this helps.

 

Thanks,

Sri

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by abhishekanand_

Hi @sreenu539 

In a similar project, I used Redux for state management. It provided a centralized store for user input across different React components representing distinct sections or steps. This approach helped maintain a consistent state and simplified communication between component which ensures state persists as users navigate between them.

you can build the three-screen user flow with React integrated into AEM:

Create three React components for each screen, each handling the question forms and user interactions.
Develop Sling Models in AEM to provide initial data for each screen (e.g., question content, pre-filled values).
Use React's data fetching mechanisms (e.g., fetch API or libraries like axios) to retrieve data from Sling Models on component mount. This populates the initial state of your React components.
Store user input within your chosen state.

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 12, 2024

Hi, 

When you refer to 'screens,' do you mean something like a 3-step form? If so, I think it's just a matter of building the multi-form app using the technology you prefer (Angular, React, VanillaJS) and handling data through localStorage. From the AEM side, you just need to ensure that if you use Angular or React, the JS core is available when these pages are loaded. You can find some examples of multi-form apps here:

React: https://makerkit.dev/blog/tutorials/multi-step-forms-reactjs

Angular: https://medium.com/@hbilaiya2/angular-multi-step-form-with-reactive-forms-sorcery-f34cd0941e2c

Vanilla JS: https://spacebro.io/articles/crate-multistep-form-vanilla-js (I would prefer this to avoid extra JS resources)

 

Hope this helps.

Esteban Bustamante
abhishekanand_
Community Advisor
abhishekanand_Community AdvisorAccepted solution
Community Advisor
July 13, 2024

Hi @sreenu539 

In a similar project, I used Redux for state management. It provided a centralized store for user input across different React components representing distinct sections or steps. This approach helped maintain a consistent state and simplified communication between component which ensures state persists as users navigate between them.

you can build the three-screen user flow with React integrated into AEM:

Create three React components for each screen, each handling the question forms and user interactions.
Develop Sling Models in AEM to provide initial data for each screen (e.g., question content, pre-filled values).
Use React's data fetching mechanisms (e.g., fetch API or libraries like axios) to retrieve data from Sling Models on component mount. This populates the initial state of your React components.
Store user input within your chosen state.

Abhishek Anand