Custom Component in AEM 6.5 - Referencing Core Component HTML

[kernja]

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.

[aanchal-sikka · Accepted solution]

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" />

[AryanJha]

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