Expand my Community achievements bar.

Understand the flow of AEM + SPA

Avatar

Level 2

Hi,

I want to understand the flow of AEM + SPA how the en.model.json/home.model.json was formed and called to load. Is it in AEM or In UI it form en.model.json and called. Can anyone help the same. 

Thanks & Regards,

Kalyan

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

9 Replies

Avatar

Community Advisor

Hello @Kalyan_ChakravarthyCh ,

are you referring to any documents/videos for it? Do you mind posting the link here. That would help explain the use case a little better.

thank you.

Avatar

Level 7

I believe AEM SPA is using Sling Model Exporter to get JSON representation of requested page. As you don't have HTL. You only serve a JSON to your React or Angular components.

 

Sling Model Exporter documentation:

https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/development/understan...

 

You can find a nice reply in my opinion here : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/model-json-not-showing-com...

 

Another article on SPA topic, where model.json is also mentioned, even thought I believe is very clear what is the purpose of model.json in general (not only in SPA context): https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/spa-aem-how-can-we-apply-b...

 

And here in the Introduction it explains high level how SPA works: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

 

 

Avatar

Level 2

Hi @Tethich ,

 

Thank you for the details. Iam looking how the home.model.json is loading from frontend. How it is forming the home.model.json and calling from UI.  

 

Thanks & Regards,

Kalyan

Avatar

Level 7

Is this what are you looking for ?

 

Screenshot_20241124-210845_Samsung Internet.jpg

Or you need the under the hood coding and logic stuff that the framework is doing ?

Avatar

Level 2

Hi @Tethich ,


Yes Iam looking the hood coding and logic stuff that the framework is doing regarding how model.json is forming and calling in AEM-spa-model-manager

 

Thanks & Regards,

Kalyan

Avatar

Community Advisor
 

Formation of en.model.json/home.model.json

  1. AEM Backend (Content Rendering)
    • In AEM, a resource-oriented approach is used to serve content. Each page or resource corresponds to a Sling Model or Component model, which is responsible for providing the content as a JSON structure.
    • When you create a page in AEM (e.g., en, home), a Page Model is associated with it. This model includes:
      • Page properties (e.g., title, description).
      • Content hierarchy and components (e.g., header, footer, body).
      • Data from individual components exposed by their respective Sling Models.
    • The model.json file for a page is generated dynamically when requested via the model.json URL for that page:
      lua
      <page-path>.model.json
      For example:
      bash
      /content/mysite/en.model.json /content/mysite/home.model.json
    • The Sling Model Exporter serializes the data into JSON format using annotations like @exporter in Java.

Calling en.model.json/home.model.json

  1. UI Layer (SPA Framework)

    • The SPA (typically built using React, Angular, or Vue.js) integrates with the AEM backend via the JSON output.
    • The SPA uses the AEM SPA Editor JavaScript SDK to fetch the model.json dynamically:
      • On page load, the SPA sends a request to AEM to fetch the model.json of the current page.
      • Example request:
        bash
        GET /content/mysite/en.model.json
      • The SDK processes the response and maps the JSON structure to the UI components.
  2. Dynamic Data Loading

    • The SPA is designed to use the JSON data to render its components dynamically:
      • Page-level content is mapped to the SPA layout.
      • Component-level content is injected into the respective React/Angular/Vue components.
  3. Routing in SPA

    • When navigating within the SPA, additional model.json files for sub-pages or components might be requested dynamically.
    • For example:
      bash
      /content/mysite/en/about.model.json

 

Avatar

Administrator

@Kalyan_ChakravarthyCh Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni