3

I have a piece of Sightly/HTL code as follows - 

<div 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>${properties.tooltip_textfield}</p>
    </div>
  </div>
</div>

Please note that ${properties.tooltip_textfield} is hard coded into the code. I am including this code in my component like this - 

<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" data-sly-unwrap></div>

Now I want to pass a parameter to data-sly-include statement so that when my HTML code is rendered, the passed parameter should be placed in place of ${properties.tooltip_textfield} .

In other words -

Calling this 

<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" parameter= "Dummy Text" data-sly-unwrap></div>

Should render this -

<div 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>Dummy Text</p>
        </div>
      </div>
    </div>

Is this possible? Thanks in Advance!

Archit Arora
  • 2,508
  • 7
  • 43
  • 69
  • 1
    duplicate:https://stackoverflow.com/questions/45325568/aem-sightly-how-to-reuse-variables/45326997#45326997 – iusting Jul 27 '17 at 12:31

1 Answers1

6

I believe what you're after is the Sightly Template and Call feature.

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>
mickleroy
  • 998
  • 5
  • 8
  • 1
    Hi, I am having difficulties with achieving this. I have 2 html, and I want to include html1 into html2, so in my html2 I've included it something like ` ` But when I run, I get **Identifier /apps/base/components/content/html1.html cannot be correctly instantiated by the Use API**. Could you please suggest if am missing anything? – Guruprasad J Rao Dec 17 '18 at 13:03