data sly call example with a tutorial

[Rama_KrishnaNy]

Hi all,

Could you please direct me to a data sly call example with a tutorial that I could run and try out?

The concept is not very clear to me.

Appreciate all your replies.

Thanks,

RK.

[SantoshSai · Accepted solution]

Hi @Rama_KrishnaNy,

In HTL, data-sly-call is used to invoke a template (like a function) and pass parameters to it. This helps you re-use logic across your component’s HTML files.

Let me explain you using a simple real-world example

Let’s say you want to create a reusable button template that you can call multiple times with different values.

File Structure:

/apps/myproject/components/content/mycomponent/
├── mycomponent.html
├── _button.html
└── .content.xml

1. Create a template in _button.html

This is a reusable button component.

<!-- _button.html -->
<template data-sly-template.button="${@ text, link}">
    <a href="${link}" class="btn btn-primary">${text}</a>
</template>

Here:

• @ text, link are parameters.

• ${text} and ${link} are used inside the button.

2. Call the template in mycomponent.html

Now use data-sly-call to include the button in your component.

<!-- mycomponent.html -->
<sly data-sly-use.buttonTemplate="_button.html" />

<div>
    <h2>Welcome to My Component</h2>

    <!-- Call the template -->
    <sly data-sly-call="${buttonTemplate.button @ text='Visit Adobe', link='https://www.adobe.com'}" />
    
    <sly data-sly-call="${buttonTemplate.button @ text='Google', link='https://www.google.com'}" />
</div>

Here:

• data-sly-use.buttonTemplate="_button.html" loads the file with the template.

• data-sly-call="${buttonTemplate.button @ ...}" invokes the template with parameters.

Output (HTML Rendered)

<div>
  <h2>Welcome to My Component</h2>
  <a href="https://www.adobe.com" class="btn btn-primary">Visit Adobe</a>
  <a href="https://www.google.com" class="btn btn-primary">Google</a>
</div>

How to try it?

1. Create a new component in your local AEM project.

2. Add the two HTML files (_button.html and mycomponent.html).

3. Use this component on a page in your local AEM instance.

4. Check the output in the browser.

Why use data-sly-call?

• Avoids repetition.

• Makes HTML cleaner and modular.

• Easier to maintain.

To deepen your understanding, consider exploring the following resources:

1. Getting Started with HTL: An introductory guide to HTL in AEM.
   Getting Started with HTL

2. HTL Specification: Detailed documentation on HTL syntax and features.
   HTL Specification

3. HTL Code Samples: Practical examples demonstrating various HTL features.
   HTL Code Samples

4. Community Tutorial on data-sly-template and data-sly-call: A step-by-step guide with examples.
   AEM data-sly-template and data-sly-call usage

This video tutorial demonstrates how to define and call templates in AEM:

• Video: AEM Sightly #2 | Create and call Template using data-sly-template and data-sly-call

Hope that helps!