How to pull child page content in parent page? | Community
Skip to main content
Z
Zendarkke
Level 2
October 8, 2024
Solved

How to pull child page content in parent page?

  • October 8, 2024
  • 3 replies
  • 998 views

Hi , i am trying to build more complex aem components. Imagine we have a structure as below

Products(parent page)
    -Mobile (child page 1)
    -Tablet (child page 2)

I have a component in parent Products page with list items authored to names of child pages. Now when i click on Mobile i want the mobile page contents to be populated in the component. How to achieve this?

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 SureshDhulipudi

you can use Sling Parameterized option right - 

 

 

To pass parameters from HTL (HTML Template Language) to a Sling Model in Adobe Experience Manager (AEM), you can use data attributes in your HTL and retrieve them in the Sling Model using the @ScriptVariable or @RequestAttribute annotations.

 

HTL script sends parameters to the Sling Model - The model manipulates these parameters in its method and returns the result for display.

 

<sly data-sly-use.myModel="${'com.example.core.models.ParameterizedModel' @ myParameterOne='Hello', myParameterTwo='World'}"
data-sly-test.isReady="${myModel.isReady()}">

<p>
${myModel.value}
</p>

</sly>

<sly data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!isReady}">
</sly>

https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/advanced/sling-model-parameters

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
October 8, 2024

Hi @zendarkke 

How would you like to display the mobile or tablet content on the parent page?

Do you want to show the entire child page, or just specific sections like the title, description, etc.? If so, you can use the Sling Resource API to read the child page's content and display it.

Alternatively, you could fetch the full content using the mobile.content.html and render it on the client side.

Arun Patidar
    Z
    ZendarkkeAuthor
    Level 2
    October 15, 2024

    I would like to pull the data from the components present in the child page and display it in my component in the homepage. Is there a way to do this without creating a content api?

    SureshDhulipudi
    Community Advisor
    SureshDhulipudiCommunity AdvisorAccepted solution
    Community Advisor
    October 8, 2024

    you can use Sling Parameterized option right - 

     

     

    To pass parameters from HTL (HTML Template Language) to a Sling Model in Adobe Experience Manager (AEM), you can use data attributes in your HTL and retrieve them in the Sling Model using the @ScriptVariable or @RequestAttribute annotations.

     

    HTL script sends parameters to the Sling Model - The model manipulates these parameters in its method and returns the result for display.

     

    <sly data-sly-use.myModel="${'com.example.core.models.ParameterizedModel' @ myParameterOne='Hello', myParameterTwo='World'}"
    data-sly-test.isReady="${myModel.isReady()}">

    <p>
    ${myModel.value}
    </p>

    </sly>

    <sly data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
    data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!isReady}">
    </sly>

    https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/advanced/sling-model-parameters

      khamat_bn
      khamat_bn
      Level 4
      October 8, 2024

      @zendarkke 
      if we want to load data/content from child pages like from mobile or tablet - we need to create sling model to fetch the data and HTL to display it, but there will be ajax changes as well. check below codes . 


      and below is ajax code which is main 

       

        Terms & ConditionsAccessibility statement

        Loading footer...