Understanding the Differences Between data-sly-use, data-sly-resource, data-sly-include, and data-sly-template in AEM for Efficient Development

One of the critical features of AEM’s Sightly (HTL – HTML Template Language) is the use of data-sly attributes. These attributes help streamline content rendering by allowing developers to execute logic within HTML markup. Four essential data-sly attributes in AEM are data-sly-use, data-sly-resource, data-sly-include, and data-sly-template. Understanding the differences between them is key to building efficient and maintainable AEM components.

In this blog, we’ll explore each attribute, provide an overview of its use cases, and offer examples for clarity.

1. What is data-sly-use in AEM?

The data-sly-use attribute in AEM is primarily used to include and bind Java/JS objects.

Example:

<div data-sly-use.myModel="com.example.models.MyModel">
    <h1>${myModel.title}</h1>
    <p>${myModel.description}</p>
</div>

In this example, the data-sly-use binds the Sling model com.example.models.MyModel to the variable myModel. The properties of the model (e.g., title and description) can then be accessed and rendered within the HTML.

2. What is data-sly-resource in AEM?

The data-sly-resource tag is used to access resource using @path and @resourceType attribute. It helps to include result of a resource from a path specified.

Example:

<div data-sly-resource="${@path='/content/myproject/us/en/errors/404'}"></div>
<!-- renders 'sectionone' node via the resource myproject/component/text -->

<div data-sly-resource="${'sectionone' @resourceType='myproject/component/text', decoration=true}">

It has also options to modify path using –

@ appendPath, @ removeSelectors , @ addSelectors , @ selectors , @ prependPath

3. What is data-sly-include in AEM?

The data-sly-include attribute in AEM enables you to include other HTL files or components within the current file. This approach enhances the reusability of components and content fragments.

Example:

<div>
  <h1>Welcome to our website</h1>
  <div data-sly-include="components/header.html"></div>
  <p>Some content.</p>
  <div data-sly-include="components/footer.html"></div>
</div>

In this example, data-sly-include is used to include external files (header and footer) into the current template. This promotes component reuse and simplifies content management.

4. What is data-sly-template in AEM?

The data-sly-template attribute allows you to define reusable chunks of code (or templates) that can be invoked multiple times with different parameters. It enhances the maintainability of your AEM components by separating concerns and reusing logic across multiple parts of the template.

It allows us to create template and declare parameters expecting when template gets call.

<!-- Template file -->

<div data-sly-template.one="${'arg1'}">
  <h2>${arg1.title}</h2>
  <p>${arg1.description}</p>
</div>

<div data-sly-template.two="${'arg1'}">
  <h2>${arg1.title}</h2>
  <p>${arg1.description}</p>
</div>


<!-- Invocation of the template (Section 'one') -->
<div data-sly-use.myModel="com.example.models.MyModel">
    <div data-sly-call="${one( @arg1=myModel}"></div>
</div>

In this example, the data-sly-template defines two templates called one and two, which takes an arg1 and renders its title and description. The template is invoked using data-sly-call, passing the specific myModel object as an argument. This allows for reusable HTML and logic.

Happy Coding!