Make a API call on page load and use across all components in the Page | Community
Skip to main content
R
rajakumare1
Level 2
September 13, 2021
Solved

Make a API call on page load and use across all components in the Page

  • September 13, 2021
  • 3 replies
  • 5424 views

Hi All,

 

I am new to the AEM World. What is the best way to make a api all on page load and use the data from the api on all the components in the page. 

 

Note: Currently I have a OSGI Service and a model that is invokes the OSGi call. Not sure what is the correct design approach.

 

Thanks,

Rajakumar

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 Fanindra_Surat

Hi @rajakumare1 ,

 

Consider below approach -

 

At a page level, preferably in a Page component Model you can make an API call and save the API response in the request object attribute. Specifically like,

String apiResponse = customService.getResponse();
// Set the api response to the request object attribute
request.setAttribute("result", apiResponse);

 

To reuse this in component, read the attribute value from the request object itself in the corresponding Sling Model for the component. Sample code below:

// To get the request object
@SlingObject
SlingHttpServletRequest request;
// To read the API response
   String apiResponse = request.getAttribute("result");

 

This way, your API will be invoked only once, as the Page component model executes only once per page load and the response can then be reused across any component on the page.

 

Hope this helps!

 

Thanks,

Fani

3 replies

Kiran_Vedantam
Community Advisor
Kiran_VedantamCommunity Advisor
Community Advisor
September 13, 2021

Hi @rajakumare1,

 

I am not sure if you are wanting to trigger the API call on a particular page or every page with particular resource type.

 

You can do the below things:

  1. You can trigger an ajax call on the page load and call the servlet
  2. You can trigger a servlet on page resource type
    1. Issue: Triggers on every page with the same resource
  3. Ideal way would be to tie the servlet call to a particular component - hidden and drag and drop the component in the page to get the response and then play with the API response.

 

Hope this helps.

 

Thanks,

Kiran Vedantam.

    R
    rajakumare1Author
    Level 2
    September 13, 2021

    Thanks for your Response.

     

    But how do I share the data accress multiple component in the same page.

    all components use the data from the same  api call which again is calling a 3rd party. We dont want to make the same call repeatedly for each component

      Kiran_Vedantam
      Community Advisor
      Kiran_VedantamCommunity Advisor
      Community Advisor
      September 13, 2021

      You can do multiple things for it.

       

      1. Once you get the data to Front end, do the dom manipulation
      2. Save it to a node in AEM and access it from every component

      But I am still not clear why every component needs the data. In that case why cant we create a single component by including the resources of different components.

       

      Thanks,

      Kiran Vedantam.

        raj_mandalapu
        raj_mandalapu
        Level 7
        September 13, 2021

        Hi @rajakumare1 

        There are couple of approaches and how frequently the data is going to change is important thing.

        Approach 1: 

        • You can make a call to external API, via AJAX and get the response on page load.
        • In your components put empty div tags 
        • on page load read the response of the Ajax request and dynamically populate the components.
        • The advantage with this is you are not hitting AEM server, which will help to reduce load on the AEM instance.
        • You need to check the caching strategy for this.

        Approach 2:

        • If data does not change very frequently then you can write a scheduler which executes every 24 or 12 or 6hrs and gets the data.
        • Store that data into the AEM instance by creating separate node.
        • Write sling models to read that data
        • Instantiate sling models in your components and render.
        • If data does not change then there is no point of hitting external API for every request, you do not need to worry about caching here.

         

          Fanindra_Surat
          Community Advisor
          Fanindra_SuratCommunity AdvisorAccepted solution
          Community Advisor
          September 13, 2021

          Hi @rajakumare1 ,

           

          Consider below approach -

           

          At a page level, preferably in a Page component Model you can make an API call and save the API response in the request object attribute. Specifically like,

          String apiResponse = customService.getResponse();
          // Set the api response to the request object attribute
          request.setAttribute("result", apiResponse);

           

          To reuse this in component, read the attribute value from the request object itself in the corresponding Sling Model for the component. Sample code below:

          // To get the request object
          @SlingObject
          SlingHttpServletRequest request;
          // To read the API response
             String apiResponse = request.getAttribute("result");

           

          This way, your API will be invoked only once, as the Page component model executes only once per page load and the response can then be reused across any component on the page.

           

          Hope this helps!

           

          Thanks,

          Fani

            Terms & ConditionsAccessibility statement

            Loading footer...