HOW TO INCLUDE ONE COMPONENT WITHIN ANOTHER COMPONENT? | Community
Skip to main content
A
ac6600
Level 2
July 29, 2022
Solved

HOW TO INCLUDE ONE COMPONENT WITHIN ANOTHER COMPONENT?

  • July 29, 2022
  • 3 replies
  • 9480 views

I need some help in including a component inside another component.

This is the scenario:
1. I have a page-hero component
2. I have a request info component

Now I want to add this request-info component in the exact middle of page-hero.

Can anyone please help me out with the steps that I have to follow in order to achieve this.
Note: I am very new to AEM and have been using it since the past 6-7 months.

@kautuk_sahni @briankasingli @arunpatidar @debal_das 

Thanks in advance!!

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 SantoshSai

Hi @ac6600 ,

You can use data-sly-resource 

data-sly-resource includes the result of rendering the indicated resource through the sling resolution and rendering process.

eg.

<sly data-sly-resource="${resource @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

where "wcm/foundation/components/responsivegrid" is path to your component.

Hope that helps!

Regards,

Santosh

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity AdvisorAccepted solution
Community Advisor
July 30, 2022

Hi @ac6600 ,

You can use data-sly-resource 

data-sly-resource includes the result of rendering the indicated resource through the sling resolution and rendering process.

eg.

<sly data-sly-resource="${resource @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

where "wcm/foundation/components/responsivegrid" is path to your component.

Hope that helps!

Regards,

Santosh

Santosh Sai
    DEBAL_DAS
    DEBAL_DAS
    New Member
    July 30, 2022

    Let's suppose I want to include image component inside hero-image component then I will use below htl code to include image component -

     

    <sly data-sly-resource="${'image' @ resourceType='weretail/components/content/image'}"></sly>

    Debal Das, Senior AEM Consultant
      Manu_Mathew_
      Community Advisor
      Manu_Mathew_Community Advisor
      Community Advisor
      July 30, 2022

      @ac6600 

      data-sly-resource includes the result of rendering the indicated resource through the sling resolution and rendering process. It helps include result of a resource from a path specified. The sling resolution and rendering process will process the indicated resource from path and result will be included.

      In your case you just have to use - 

      <sly data-sly-resource="${'requestInfo' @ resourceType='path of request info component'}"></sly>

      within the html of your page-hero component.

       

      for more details fon HTLs:

      https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=en

       

       
        Terms & ConditionsAccessibility statement

        Loading footer...