spa experience within an aem page

[sreenu539]

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

[EstebanBustamante]

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.

[abhishekanand_ · Accepted solution]

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.