Article updated on July 27, 2016.

Here is part 5 of my intro to the HTML Template Language (HTL), formerly known as Sightly. In this part, I will focus mostly on the frequently asked questions (FAQ), along with some code examples.

Interested in the others parts? Here they are: part 1, part 2, part 3, part 4.

1. Are there core components written in HTL?

Yes, in AEM6 you can find these in /libs/wcm/foundation/components. At the moment it contains the most important components.

From AEM6.3 the “core” components can be found on this public git:¬†https://github.com/Adobe-Marketing-Cloud/aem-core-wcm-components

2. How can we use ClientLibs with HTL?

Sure. Have a look at an specific article that I wrote on that subject: HTML Template Language and Client Libraries.

3. Can I create my own data-sly attributes?

No, you can’t. HTL however has powerful extension mechanisms for reuse of logic and of markup, which can be used to modularize the code of projects. For an example, see my other article on that subject: Using server-side JavaScript with the HTML Template Language (and the same could be done with Java).

4. Can I increment a counter in HTL?

No you can’t. You can use the JavaScript Use-API or Java Use-API to implement this.

5. How can I create loop of a fixed number of items?

You can pass in an array into data-sly-list, like this:

<ul data-sly-list="${[1,2,3,4]}">
    <li>${item}</li>
</ul>

6. Can I still use tags like <cq:include> and <sling:include>?

No, this is all replaced by data-sly attributes.

7. How do I avoid HTML tags to be escaped?

When outputting rich text, all the HTML tags are escaped, and shown to the user.

To avoid this, make sure you use this notation:

${yourRichText @ context='html'}

More about it on the documentation on setting the expression display context.

8. How can I access inherited page-properties?

There is now a standard object available: inheritedPageProperties that you can use:

${inheritedPageProperties.myCustomTitle}

or:

${interitedPageProperties['node1/node2/prop1']}

More about the available global objects can be found in the documentation.

9. Can I use @Reference in the HTL Java-classes?

No you can’t. If you want to access a service you can do it via this call:

getSlingScriptHelper().getService(Service.class)

10. How can I concatenate two Strings?

This is an example how you can do this:

${'{0} {1}' @ format=['firstname','lastname']}

And another one:

${['firstname','lastname'] @ join=' '}

11. How can I remove the surrounding div when I include a page?

When you have this:

<ul data-sly-list="${currentPage.listChildren}">
    <li data-sly-resource="${item.path @ selectors='content', wcmmode='disabled'}"></li>
</ul>

The result is:

<ul>
    <li><div class="page contentpage">...</div></li>
</ul>

To remove the <div class=”page contentpage”> that wraps the page content, you can include the jcr:content resource instead:

<ul data-sly-list="${currentPage.listChildren}">
    <li data-sly-resource="${item.contentResource.path @ selectors='content', wcmmode='disabled'}"></li>
</ul>

12. Can I get the value of the request parameter in HTL?

${request.requestParameterMap['test'][0].toString}

13. htl-maven-plugin

Use the htl-maven-plugin to validate your HTL script in your maven-build.

<plugin>
  <groupId>org.apache.sling</groupId>
  <artifactId>htl-maven-plugin</artifactId>
  <version>1.0.6</version>
  <configuration>
    <sourceDirectory>${basedir}/src/main/content/jcr_root</sourceDirectory>
    <failOnWarnings>false</failOnWarnings>
  </configuration>
  <executions>
    <execution>
      <id>validate-scripts</id>
      <goals>
        <goal>validate</goal>
      </goals>
      <phase>compile</phase>
    </execution>
  </executions>
</plugin>

14. Documentation links?

Here are some:

Here are the other articles of my introduction series:

And some other articles that I wrote on the subject:

I hope that this list was useful to you.

@heervisscher

1 comments
Esha Ch
Esha Ch

I want to read dialog values from custom xtype multifield in sightly.PLease help me with how to loop through a string array in sightly.