How to move common code in sightly html file to different files

[srinivas_chann1]

Hi,

I have a common piece of code in  sightly html  ,instead  of writing the repetitive  code can i put this in a different file and just invoke are there any other ways . Please suggest.

In /apps/project/testcomponent/testcomponent.html

in the testcomponent.html:-

<sly data-sly-use.a="com.project.abc">

<!-- /* with brand */ -->
<sly data-sly-test="${a.brandStyles == 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>

<!-- /* without brand */ -->
<sly data-sly-test="${a.brandStyles != 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>


I tried:-

To put this file in file in /apps/project/testcomponent/abc.html
so abc.html had:-

<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>

Now i modified in testcomponent.html:-

<sly data-sly-use.a="com.project.abc">

<!-- /* with brand */ -->
<sly data-sly-test="${a.brandStyles == 'brand'}">
<sly data-sly-include="/apps/project/testcomponent/abc.html"/>
...
</sly>

<!-- /* without brand */ -->
<sly data-sly-test="${a.brandStyles != 'brand'}">
<sly data-sly-include="/apps/project/testcomponent/abc.html"/>
...
</sly>

This throws error while page render
Please suggest how to solve this problem

Thanks

[VeenaVikraman]

@srinivas_chann1 You can use <template> in HTL to work with reusable piece of code in HTL . Please refer here https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html

You can pass parameters to the template something like below

Templates located in a different file, can be initialized with data-sly-use . Note that in this case data-sly-use and data-sly-call could also be placed on the same element:
<div data-sly-use.lib="templateLib.html">
    <div data-sly-call="${lib.one}"></div>
    <div data-sly-call="${lib.two @ title=properties.jcr:title}"></div>
</div>

Template recursion is supported:
<template data-sly-template.nav="${ @ page}">
    <ul data-sly-list="${page.listChildren}">
        <li>
            <div class="title">${item.title}</div>
            <div data-sly-call="${nav @ page=item}" data-sly-unwrap></div>
        </li>
    </ul>
</template>
<div data-sly-call="${nav @ page=currentPage}" data-sly-unwrap></div>

You can also find a sample of it usage in /apps/core/wcm/components/page/v2/page/head.html . 

[raj_mandalapu · Accepted solution]

Seems abc.html and testcomponent.html are in the same component, you don't need to call it by putting full path, you can call something like this <sly data-sly-include="abc.html"/>

The best practice is to use a template for reusable content.

I did not test below code, but your code should something like below, you can pass brandStyles as parameter to the template, inside template put test condition.

<template data-sly-template.template="${@ a}">
<sly data-sly-test="${a.brandStyles == 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>
</template>

<sly data-sly-call="${templateText @ properties=a}" />

Refer adobe docs:https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html