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

Wel­come to part 3 of the intro­duc­tion to the HTML Tem­plate Lan­guage (HTL), for­mer­ly known as Sight­ly. In this part I want to give you some more use-cas­es and exam­ples that you can use in your com­po­nents.

Inter­est­ed in the oth­ers parts? Here they are: part 1, part 2, part 4, part 5.

HTL Arrays

Here a sam­ple around arrays:

<!--/* Accessing a value */-->
${properties['jcr:title']}

<!--/* Printing an array */-->
${aemComponent.names}

<!--/* Printing the array, separating items by ; */-->
${aemComponent.names @ join=';'}

<!--/* Dynamically accessing values */-->
<ul data-sly-list="${aemComponent.names}">
    <li>${ properties[item]}</li>
</ul>

HTL Comparisons

Here some use-cas­es on com­par­ing val­ues

<div data-sly-test="${properties.jcr:title == 'test'}">TEST</div>
<div data-sly-test="${properties.jcr:title != 'test'}">NOT TEST</div>

<div data-sly-test="${properties['jcr:title'].length > 3}">Title is longer than 3</div>
<div data-sly-test="${properties['jcr:title'].length >= 0}">Title is longer or equal to zero </div> 

<div data-sly-test="${properties['jcr:title'].length > aemComponent.MAX_LENGTH}">
    Title is longer than the limit of ${aemComponent.MAX_LENGTH}
</div>

HTL Use-API

In my sec­ond arti­cle I explained that you can call meth­ods from your cus­tom-class­es via the data-sly-use nota­tion.
In this exam­ple I will show that you can also pass in para­me­ters from your com­po­nents.

<div data-sly-use.aemComponent="${'com.myproject.components.MyComponent' @ firstName='feike', lastName='visser'}">
    ${aemComponent.fullname}
</div>

Java-code in the Use-API:

import com.adobe.cq.sightly.WCMUsePojo;
public class MyComponent extends WCMUsePojo {
    // firstName and lastName are available via Bindings 
    public String getFullname() {
        return get("firstName", String.class) + " " + get("lastName", String.class);
    }
}

In the exam­ple above you define your para­me­ters in the Use-API, and you are not restrict­ed to a type.
Via the get() method that is avail­able via the WCMUse­Po­jo class, you can get the val­ue of a bind­ing.

I hope you enjoyed this part, more parts to come 🙂

@heervisscher

Read-on

Here are the oth­er arti­cles of my intro­duc­tion series:

Oth­er posts on the top­ic:

And here oth­er resources to learn more about it:

2 comments
akash268
akash268

Unable to navigate to part 1 & 2 posts of this series.