Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

AEM sightly - include html - Pass data

Avatar

Level 3

Hi all,

 

I'm trying to include html files in sightly and having issue while passing attributes to html file. 

Below is what I'm trying:

 

original HTL code: 

<sly data-sly-use.model="com.test.SampleModel">
Heading: ${model.title}
<!-- PART 1 -->
<sly data-sly-list.pageList1="${model.pagesList1}">
<ul>
<li>
Page Title: ${pageList1.title}
</li>
</ul>
</sly>
<!-- PART 2 -->
<sly data-sly-list.pageList2="${model.pagesList2}">
<ul>
<li>
Page Title: ${pageList2.title}
</li>
</ul>
</sly>
</sly>

 

I want to have different html for PART1 & PART2 and write logic over there.

 

Wanted to change something like below:

<sly data-sly-use.model="com.test.SampleModel">
Heading: ${model.title}

<sly data-sly-include="part1.html"></sly>
<!-- PART 2 -->
<sly data-sly-include="part2.html"></sly>

</sly>

But questions is how do I pass model object to the included file so that I don't need to call sling model on each file?

 

please advise. 

 

 

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

you can use HTL's template and call and also using them you can pass data.

 

Inside your component create a template folder(not mandatory but to maintain clean folder structure), under template folder, create a "template.html" file.

In "template.html", have your part-1 and part-2 variations like below. 

<template data-sly-template.partOne="${@ dataObject}">your part 1 html code</template>
<template data-sly-template.partTwo="${@ dataObjectExample}">your part 2 html code</template>

 

on your component.html,  you can use the above template file as below.

 

<sly data-sly-use.model="com.test.SampleModel">
<div data-sly-use.htmlVariation="/./template.html (path to template.html)">
    <div data-sly-call="${htmlVariation.partOne @ dataObject=model.pageList1}"></div>
    <div data-sly-call="${htmlVariation.partTwo @ dataObjectExample=model.pageList2}"></div>
</div>
</sly>

 

by using @ option, you can pass the date from your model to your respective template.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

you can use HTL's template and call and also using them you can pass data.

 

Inside your component create a template folder(not mandatory but to maintain clean folder structure), under template folder, create a "template.html" file.

In "template.html", have your part-1 and part-2 variations like below. 

<template data-sly-template.partOne="${@ dataObject}">your part 1 html code</template>
<template data-sly-template.partTwo="${@ dataObjectExample}">your part 2 html code</template>

 

on your component.html,  you can use the above template file as below.

 

<sly data-sly-use.model="com.test.SampleModel">
<div data-sly-use.htmlVariation="/./template.html (path to template.html)">
    <div data-sly-call="${htmlVariation.partOne @ dataObject=model.pageList1}"></div>
    <div data-sly-call="${htmlVariation.partTwo @ dataObjectExample=model.pageList2}"></div>
</div>
</sly>

 

by using @ option, you can pass the date from your model to your respective template.