Custom Component in AEM 6.5 - Referencing Core Component HTML
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.
