How to pass an object/variable to another file (using data-sly-include)? | Community
Skip to main content
jayv25585659
jayv25585659
Level 8
Feb 5, 2018 3:35 AM UTC
Solved

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

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.
    kautuk_sahni
    kautuk_sahniAccepted solution
    Employee
    Feb 5, 2018 9:26 AM UTC

    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

    Kautuk Sahni
    View reply

    4 replies

    arunpatidar
    arunpatidar
    New Participant
    Jun 14, 2019 10:58 AM UTC

    Hi,

    Did you tried like below

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

    Translate
    Arun Patidar
    linhmino
    linhmino
    New Participant
    Jun 14, 2019 10:22 AM UTC

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

    Translate
      kautuk_sahni
      kautuk_sahniAccepted solution
      Employee
      Feb 5, 2018 9:26 AM UTC

      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

      Translate
      Kautuk Sahni
        Techaspect_Solu
        Techaspect_Solu
        Level 7
        Feb 5, 2018 5:21 AM UTC

        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

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...