How to pass an object/variable to another file (using data-sly-include)? | Community
Skip to main content
jayv25585659
jayv25585659
February 5, 2018
Solved

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

  • February 5, 2018
  • 1 reply
  • 3175 views

so I'm including another file

<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. If it's possible, how can  I do it?

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

1 reply

Techaspect_Solu
Techaspect_SoluAccepted solution
February 5, 2018

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

Terms & ConditionsAccessibility statement

Loading footer...