Arti­cle updat­ed on July 27, 2016.

Here is part 5 of my intro to the HTML Tem­plate Lan­guage (HTL), for­mer­ly known as Sight­ly. In this part, I will focus most­ly on the fre­quent­ly asked ques­tions (FAQ), along with some code exam­ples.

Inter­est­ed in the oth­ers 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 con­tains the most impor­tant com­po­nents.

From AEM6.3 the “core” com­po­nents can be found on this pub­lic git: https://​github​.com/​A​d​o​b​e​-​M​a​r​k​e​t​i​n​g​-​C​l​o​u​d​/​a​e​m​-​c​o​r​e​-​w​c​m​-​c​o​m​p​o​n​e​nts

2. How can we use ClientLibs with HTL?

Sure. Have a look at an spe­cif­ic arti­cle that I wrote on that sub­ject: HTML Tem­plate Lan­guage and Client Libraries.

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

No, you can’t. HTL how­ev­er has pow­er­ful exten­sion mech­a­nisms for reuse of log­ic and of markup, which can be used to mod­u­lar­ize the code of projects. For an exam­ple, see my oth­er arti­cle on that sub­ject: Using serv­er-side JavaScript with the HTML Tem­plate Lan­guage (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 imple­ment 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 attrib­ut­es.

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

When out­putting rich text, all the HTML tags are escaped, and shown to the user.

To avoid this, make sure you use this nota­tion:

${yourRichText @ context='html'}

More about it on the doc­u­men­ta­tion on set­ting the expres­sion dis­play con­text.

8. How can I access inherited page-properties?

There is now a stan­dard object avail­able: inherit­ed­Page­Prop­er­ties that you can use:

${inheritedPageProperties.myCustomTitle}

or:

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

More about the avail­able glob­al objects can be found in the doc­u­men­ta­tion.

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

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

getSlingScriptHelper().getService(Service.class)

10. How can I concatenate two Strings?

This is an exam­ple how you can do this:

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

And anoth­er 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 con­tent­page”> that wraps the page con­tent, 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-plu­g­in to val­i­date 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 oth­er arti­cles of my intro­duc­tion series:

And some oth­er arti­cles that I wrote on the sub­ject:

I hope that this list was use­ful 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.