Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Custom Component in AEM 6.5 - Referencing Core Component HTML

Avatar

Level 1

Hello,

I'm learning the ropes of AEM 6.5, and am trying to create a custom container component. The documents state that best practice is to utilize core components as much as possible, which is exactly what I'm trying to do. As such, my "ImageContainer" component utilizes "core/wcm/components/image/v1/container" for its functionality.

This custom component works perfectly as intended when "imagecontainer.html" is implemented as such:

<div data-sly-use.imagecontainer="com.mycompany.www.core.models.ImageContainer"
class="cmp-imagecontainer__container ${properties.styleType}">

<!-- contents from 'container.html' -->

<sly data-sly-use.container="com.adobe.cq.wcm.core.components.models.LayoutContainer">
<sly data-sly-test.responsive="${container.layout == 'RESPONSIVE_GRID'}"
data-sly-use.responsiveGridTemplate="responsiveGrid.html"
data-sly-call="${responsiveGridTemplate.responsiveGrid @ container=container}"></sly>
<sly data-sly-test.simple="${!responsive}"
data-sly-use.simpleTemplate="simple.html"
data-sly-call="${simpleTemplate.simple @ container=container}"></sly>
</sly>

<!-- end contents -->
</div>

However, the implementation above directly copies code from "container.html". Every time "container.html" is updated, this component would need to be updated as well. I'd prefer to have a solution that directly references "container.html" and passes in the model properties:

<div data-sly-use.imagecontainer="com.mycompany.www.core.models.ImageContainer"
class="cmp-imagecontainer__container ${properties.styleType}">

<!-- code inserted here that directly references container.html -->

<div data-sly-include="{'container.html' @ properties=properties}"></div>

<!-- this does not work -->
</div>

I'm not sure what combination of sling actions and properties would need to be used to get this to work. There's data-sly-use, data-sly-template, data-sly-include, among many others. A nudge in the right direction would help me a lot.

Topics

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You just need to add following. That should work. Since, you are planning to leave the OOTB one as it is, you need not send properties. It already uses a Sling Model which will provide relevant properties.

 

<sly data-sly-include="container.html" />

Aanchal Sikka

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

You just need to add following. That should work. Since, you are planning to leave the OOTB one as it is, you need not send properties. It already uses a Sling Model which will provide relevant properties.

 

<sly data-sly-include="container.html" />

Aanchal Sikka

Avatar

Level 1

i want to add some properties in container html data-sly-test="${!Properties.hideComponent}" in this html <sly data-sly-use.container="com.adobe.cq.wcm.core.components.models.LayoutContainer" data-sly-test="${!Properties.hideComponent}">
${!Properties.hideComponent}
<sly data-sly-test.responsive="${container.layout == 'RESPONSIVE_GRID'}"
data-sly-use.responsiveGridTemplate="responsiveGrid.html"
data-sly-call="${responsiveGridTemplate.responsiveGrid @ container=container}"></sly>
<sly data-sly-test.simple="${!responsive}"
data-sly-use.simpleTemplate="simple.html"
data-sly-call="${simpleTemplate.simple @ container=container}"></sly>
</sly> but this is not working