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

[jayv25585659]

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

[Techaspect_Solu]

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:

<template data-sly-template.tooltip="${@ text}" class="tooltip_modal">

  <div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h5>Tooltip</h5>

    </div>

    <div class="modal-body">

      <p>${text}</p>

    </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:

<div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h5>Tooltip</h5>

    </div>

    <div class="modal-body">

      <p>Sample text</p>

    </div>

</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]

Fetching via sending parameters to the template call

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

     <div data-sly-use.nav="navTemplate.html" data-sly-call="${nav.foo}"></div>

Passing/Sending parameter, use JavaScript Use-API

This is my HTL component:

<div data-sly-use.params="${'params.js' @ value1='feike', value2='visser', seperator=' '}">

    ${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

[linhmino]

How to pass a variable (not hardcoded value) to a data-sly-use statement?

[arunpatidar]

Hi,

Did you tried like below

<div data-sly-use.tempObj="${'com.demo.core.model.DemoModel' @ title=properties.title}"></div>