How to reuse multiple component when building new one | Community
Skip to main content
MichaelNeu007
MichaelNeu007
Level 2
December 4, 2024
Solved

How to reuse multiple component when building new one

  • December 4, 2024
  • 3 replies
  • 1839 views

Hello, 

 

I am trying to develop a new component that would reuse multiple already developed components. In our project I have never seen an example where people would do it though.

 

For example, how do I in HTL use a core button component and author it? Basically, I would imagine something like this:

 

<sly data-sly-use.myComponent="com.example.aem.core.components.MyCustomComponent"> <!-- Use the button core component --> <core-wcm-components:button sling:resourceType="core/wcm/components/button/v2/button" href="/path/to/link" title="Click here" iconBefore="chevron-right" displayType="outline" size="large" align="center"> </core-wcm-components:button> </sly>

 

I want it to statically render already pre-authored from the HTL without the ability for the authors (content creators) to change it.

 

Ideally I would like to then nest my container components with some content component but I imagine that would be done in a similar fashion.

Something like a React component but right now just using HTL.

Best answer by ArunaS

Create a new component with the name that you want and re-use the pieces from other components to implement dialog properties.

You have to create HTL files and sling models for the new components. 

if you want to re-use the HTL you have to create HTL templates and re-use HTL into your component-specific HTL file.

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
December 4, 2024

Hi @michaelneu007 
Here is the example of reusing title, text and image core components and creating new component called 'text-and-image'

 

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/components/text-and-image/text-and-image.html 

Arun Patidar
    A
    ArunaSAccepted solution
    Level 2
    December 4, 2024

    Create a new component with the name that you want and re-use the pieces from other components to implement dialog properties.

    You have to create HTL files and sling models for the new components. 

    if you want to re-use the HTL you have to create HTL templates and re-use HTL into your component-specific HTL file.

      MichaelNeu007
      MichaelNeu007Author
      Level 2
      December 6, 2024

      HTL templates is probably what I should be using in my use case. I guess components are meant to be authored and not just used in the HTL.

      bhavigoyal
      bhavigoyal
      Level 4
      December 7, 2024

      Hi @michaelneu007,

      You can use data-sly-resourec to include multiple components in your new created one's HTL, and in data-sly-resource give path to your compopnent that you want to include.

        daniel-strmecki
        Community Advisor and Adobe Champion
        daniel-strmeckiCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        December 7, 2024

        Hi @michaelneu007,

        As @bhavigoyal pointed out, reusing existing components in HTL can be achieved with data-sly-resource. For example, if you want to build a teaser component from the existing image and text components, this is how your teaser.html could look like:

        <div class="teaser"> <div class="teaser__image"> <!-- Include the existing image component --> <div data-sly-resource="${resource.path + '/image'}"></div> </div> <div class="teaser__text"> <!-- Include the existing text component --> <div data-sly-resource="${resource.path + '/text'}"></div> </div> </div>

        You can ensure child components are always created in the _cq_template.xml

        <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" jcr:primaryType="nt:unstructured" jcr:title="Teaser" sling:resourceType="your-project/components/teaser"> <image jcr:primaryType="nt:unstructured" sling:resourceType="your-project/components/image" /> <text jcr:primaryType="nt:unstructured" sling:resourceType="your-project/components/text" /> </jcr:root>

         

        Good luck,

        Daniel

          Terms & ConditionsAccessibility statement

          Loading footer...