Guide for working with Templates and Call in Sightly AEM 6.1

Recently a question came up on how to use create templates and call them in sightly. I will try my best to explain this concept and at the end you will have a some idea on how you can work with it.

Note: Do not get confused with term ‘templates’. We are not referring to the templates used for creating page, instead we are referring to feature in Sightly

Let’s get started with concept and followed by examples…

1. Template (data-sly-template)
These are the HTML blocks which act a function. Every blocks will have an identifier and like normal function they do accept parameters. When you are defining the block, you can define all parameters that will be accepted by it.
Example 1:

<template data-sly-template.first> 

    This is my first Template. 

</template>

Now, I have created a simple template with identifier as ‘first‘.

Inorder to use this block you call them with the identifier, which brings us to next part…

2. Call (data-sly-call)
Call will help you to get a declared HTML block or template.

<div data-sly-call="${first}"></div>

Above statement will call our template with identifier ‘first‘.

Output HTML:
<div>This is my first Template.</div>

Let’s take a look at more complex examples…

Example 2: Passing parameters to templates
Template:

<template data-sly-template.second="${@ x, y, z}"> Value of x = ${x}, y= ${y}, z= ${z} </template>

Call:
<div data-sly-call=”${second @ x=1, y=2, z=3}”></div>

Output HTML:
<div>
Value of x = 1, y= 2, z= 3
</div>

Example 3: Template in different file
Example 1, 2 were based on the assumptions that our templates are present in the same file in which we are calling them, but there will be many scenarios when you need to use a template created in some other html files and you will call them in a different file.

Template:
It will be presented at path /apps/project/component/content/sightly-demo/mytemplates.html

<template data-sly-template.third="${@ x, y, z}" > Value of x= ${x}, y= ${y}, z= ${z} 

</template>

Call:
The file in which we will call this is present at path /apps/project/component/content/sightly-demo/sightly-demo.html

<div data-sly-use.data="mytemplates.html" data-sly-call="${data.third @ x=1, y=2, z=3}">

</div>

You can use “data-sly-use” which will help you to get a reference to the file. Path to the file can be absolute or relative.

Output HTML:
<div>Value of x = 1, y= 2, z= 3</div>

At last, I will show one more example which will include the concept of example 1, 2, 3 and also our template will make a call to sightly JS file before returning the html.

Example 4:
Template:

<template data-sly-template.fourth="${@ page}" data-sly-use.tmpl="${'simple.js' @ page=page, descriptionLength=50}"> <h1>${tmpl.title}</h1> 

<p>${tmpl.description}</p> 

</template>

simple.js

use(function() {

 var Constants = {

  DESCRIPTION_PROP: "jcr:description"

 };

 var title = this.page.getNavigationTitle() || this.page.getTitle() || this.page.getName();

 var description = this.page.getProperties().get(Constants.DESCRIPTION_PROP, "").substr(0, this.descriptionLength);

 return {

  title: title,

  description: description

 };

});

Call:

<div data-sly-use.tmpl="mytemplates.html" data-sly-call="${tmpl.fourth @ page=currentPage}">

</div>

Output HTML:
<div>
<h1>English</h1>
<p>This is a demo page. It shows how to use templates</p>
</div>

If you are not aware of how to use JavaScript Use API in Sightly do check this article JavaScript Use-API with a Simple component in Sightly