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

AEM sightly - include html - Pass data

SonuR1
Level 2
Level 2

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
BattiniSravan
Correct answer by
Level 4
Level 4

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
BattiniSravan
Correct answer by
Level 4
Level 4

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.