Expand my Community achievements bar.

SOLVED

How to reuse multiple component when building new one

Avatar

Level 2

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 2

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.

View solution in original post

3 Replies

Avatar

Community Advisor

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



Arun Patidar

Avatar

Correct answer by
Level 2

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.

Avatar

Level 2

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.