Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

srinivas_chann1
Level 7
Level 7

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

1 Accepted Solution
raj_mandalapu
Correct answer by
Community Advisor
Community Advisor

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

 

View solution in original post

0 Replies
Veena_Vikram
Community Advisor
Community Advisor

@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
Correct answer by
Community Advisor
Community Advisor

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

 

View solution in original post