Today I am going to write about HTL. HTL comes from HTML Template Language and is the recommended server-side template system for the HTML in AEM. This was introduced to take place of the JSP (JavaServer Pages) which was used in the previous versions of AEM.
I always notice that when somebody comes new into an AEM project and I am talking about HTL they do not have a clue what I am talking about. My advice if you want to start working with an AEM application please read the AEM documentation about HTL. I will write in this post what are the important points which you need to know in order to write server-side HTML.
Before starting creating any component in AEM we need to know about the following topics in HTL:
- Global Objects
- Block Statements
- Expression Language
Global Objects
In the first moment after you create the corresponding html file of your AEM component you need to know that you can access some objects which are called Global Objects. The most used global objects are:
| Object name | Description |
|---|---|
| properties | contains the list of properties of the current resource, for example your component; type org.apache.sling.api.resource.ValueMap |
| pageProperties | a list of page properties which contains your component; type org.apache.sling.api.resource.ValueMap |
| inheritedPageProperties | list of inherited page properties of the current page; type org.apache.sling.api.resource.ValueMap |
| currentPage | allow access to the current page where the component is included; type com.day.cq.wcm.api.Page |
| resource | allow access to the current resource in this case is the component resource; type org.apache.sling.api.resource.Resource |
| request | allow access to the current request; type org.apache.sling.api.SlingHttpServletRequest |
| response | allow access to the current response where you can add headers, cookies; type org.apache.sling.api.SlingHttpServletResponse |
You can find more global objects on the adobe documentation about this at AEM Global Objects.
Block Statements
The most used statements are:
1. data-sly-use - initializes a helper object and expose it through a variable. Below you can see example of usages.
- initialize a javascript object which is in the same directory with the template file
<div data-sly-use.head="head.js">${head.title}</div>
<div data-sly-use.head="${'head.js' @param='test'}">${head.title}</div>
- initialize a Java object which is in the same directory with the template file
<div data-sly-use.head="Head">${head.title}</div>
- initialize a Java object which is in not in the same directory with the template file
<div data-sly-use.head="org.example.mypackage.Head">${head.title}</div>
- initialize another HTL template
<div data-sly-use.header="headerTemplate.html" data-sly-call="${header.simple}"></div>
2. data-sly-unwrap - removes the host element.
<p data-sly-unwrap>Hello there!</p>
The result of the expression above is : Hello there! without any html tag.
3. data-sly-attribute - add attributes to the host element.
<p data-sly-attribute.id="test">Hello there!</p>
The result of the expression above is:
<p id="test">Hello there!</p>
4. data-sly-test - conditional expression if the condition is true then the host element is displayed otherwise is removed.
<div data-sly-test.cond="${flag1 && flag2}">When flag1 and flag2 are true I am displayed!</div>
5. data-sly-list - repeats the host element for every element from the enumerable.
<ul>
<li data-sly-list.child="${resource.listChildren}">
<span>index: ${childList.index}</span>
<span>value: ${child.title}</span>
</li>
</ul>
Inside the list using the childList you also have access to the following properties:
- count - one based counter (1…length)
- first - true if the current element is the first one
- middle - true if the current element is not the first or the last
- last - true if the current element is the last
- odd - true if the index is odd
- even - true if the index is even
6. data-sly-resource - includes the result of rendering the indicating resource.
<div data-sly-resource="path/to/resource"></div>
<div data-sly-resource="${resource.path}"></div>
<div data-sly-resource="${'test' @ resourceType='my/resource/type'}"></div>
7. data-sly-include - replaces the content of the host element with the markup generated by the HTL file which is included.
<div data-sly-include="path/to/template.html"></div>
8. data-sly-template - defines a template.
<template data-sly-template.test="${ @ text}"><h2>${text}</h2></div>
9. data-sly-call - calls a template defined by the data-sly-template.
<template data-sly-template.test="${ @ text}"><h2>${text}</h2></div>
<div data-sly-call="${test @ text='testText'}"></div>
Expression Language
The HTL uses an expression language to access the data structure. This expressions are delimited by ${ and }. The expression syntax contains variables, operators, literals and options. In the AEM documentation you can fin much more about this just folow the link AEM Expression Language.
This is the summary about the HTL if you follow the links that I provide it you will find much more. Thank you for reading this if you like it please feel free to share it. If you have any suggestion I am open to it.