How to reuse multiple component when building new one

[MichaelNeu007]

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.

[arunpatidar]

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/a... 

[ArunaS · Accepted solution]

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]

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]

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]

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