AEM sightly - include html - Pass data | Community
Skip to main content
S
SonuR1
Level 3
November 26, 2021
Solved

AEM sightly - include html - Pass data

  • November 26, 2021
  • 1 reply
  • 9424 views

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. 

 

 

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by B_Sravan

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.

1 reply

B_Sravan
Community Advisor
B_SravanCommunity AdvisorAccepted solution
Community Advisor
November 26, 2021

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.

    Terms & ConditionsAccessibility statement

    Loading footer...