Understand the flow of AEM + SPA | Community
Skip to main content
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 Nikhil-Kumar
 

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 @3484101 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

 

5 replies

Preetpal_Bindra
Community Advisor
Preetpal_BindraCommunity Advisor
Community Advisor
November 24, 2024

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.

    Tethich
    Community Advisor
    TethichCommunity Advisor
    Community Advisor
    November 24, 2024

    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/understand-sling-model-exporter

     

    You can find a nice reply in my opinion here : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/model-json-not-showing-component-json-at-page-level-but-only-at/td-p/361848

     

    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-business-logic-in-model-json-output/m-p/355814

     

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

     

     

      K
      Kalyan_ChakravarthyChAuthor
      Level 2
      November 24, 2024

      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

      Tethich
      Community Advisor
      TethichCommunity Advisor
      Community Advisor
      November 24, 2024

      Is this what are you looking for ?

       

       

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

        Nikhil-Kumar
        Community Advisor
        Nikhil-KumarCommunity AdvisorAccepted solution
        Community Advisor
        November 25, 2024
         

        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 @3484101 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

         

          kautuk_sahni
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          November 26, 2024

          @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
          Imran Khan
          Community Advisor
          Imran KhanCommunity Advisor
          Community Advisor
          November 26, 2024

          @kalyan_chakravarthych Follow below blog to get overall understanding on AEM + SPA using JSON

          https://medium.com/@toimrank/aem-react-spa-fb10256dbdce

           

            Terms & ConditionsAccessibility statement

            Loading footer...