Level 8

Solved

How to pass an object/variable to another file (using data-sly-include)?

Forum|Forum|8 years ago
February 5, 2018
4 replies
8893 views

so I'm including another file via:

<hr>${fish.name}<hr>
<div>
  <sly data-sly-include="my-include-file-here.html">
</div>

I'm wondering if I can pass my "fish" object to my-include-file-here.html.

I've looked the internet but can't find what I'm looking for.

Thanks

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 kautuk_sahni

Fetching via sending parameters to the template call

Initialize another HTL template that can then be called using data-sly-call:

Passing/Sending parameter, use JavaScript Use-API

This is my HTL component:

${params.newValue}

</div>

Please note the ${‘ ’} notation used to define the Use-API that is called: using an HTL expression allows to specify options (everything that follows the “@” symbol), which will be passed as parameters to the Use-API.

This is in my HTL JavaScript logic file “params.js”:

use(function () {

// you can reference the parameters via the this keyword.

var retValue = this.value1 + this.seperator + this.value2;

return {

newValue: retValue

};

});

Source:- HTL and the JavaScript Use-API

Techaspect_Solu

Level 7

Hi,

Your use case can be achieved by using Sightly Template and Call feature. Please refer the below example. It'll help you in achieving your use case.

templates/tooltip.html:

<h5>Tooltip</h5>

</div>

</div>

</template>

component.html:

<sly data-sly-use.tooltipTmpl="templates/tooltip.html"

data-sly-call="${tooltipTmpl.tooltip @ text='Sample text'}" data-sly-unwrap>

</sly>

Sample output would be:

<h5>Tooltip</h5>

</div>

<p>Sample text</p>

</div>

Please refer the links below for more details:

HTL Block Statements

cq5 - Pass parameters to data-sly-include in sightly/HTL - Stack Overflow

We hope this information helps!

Regards,

TechAspect Solutions

kautuk_sahni

Accepted solution

Community Manager

Fetching via sending parameters to the template call

Initialize another HTL template that can then be called using data-sly-call:

Passing/Sending parameter, use JavaScript Use-API

This is my HTL component:

${params.newValue}

</div>

Please note the ${‘ ’} notation used to define the Use-API that is called: using an HTL expression allows to specify options (everything that follows the “@” symbol), which will be passed as parameters to the Use-API.

This is in my HTL JavaScript logic file “params.js”:

use(function () {

// you can reference the parameters via the this keyword.

var retValue = this.value1 + this.seperator + this.value2;

return {

newValue: retValue

};

});

Source:- HTL and the JavaScript Use-API

Kautuk Sahni