3 exciting new features of HTL in AEM 6.5 implement today

Adobe Experience Manager (AEM) released version 6.5 on April 8, 2019. HTML Template Language (HTL) version 1.4 is part of this release. It’s a great web framework that increases security. It’s also easy to understand for non-Java developers. Here are AEM HTL 3 new features, that I find exciting in HTL 1.4 and you should start implementing them today.

AEM 6.5 introduces three new features in HTL

With the release of AEM 6.5, the HTL version is also updated to 1.4.

Following are the 3 features in HTL 1.4 that are most exciting to me.

Feature 1: data-sly-set for variable declaration

This has been long due for us developers. Now you can store a value in a variable and use it anywhere after it has been declared.

For example: let’s say we are creating a page that lists down various features of a car. Attribute ‘model’ might be something that would get used many times. We can store it in a variable and then use it elsewhere.

<!--/* define and set variable 'model' */-->
<div data-sly-set.model="${myCar.model}">some content</div>
<!--/* use 'model' variable anywhere */-->
<div>My car model: ${model}</div>

Feature 2: Using ‘in’ as a relational operator in strings, arrays, lists, objects and maps

Keyword ‘in’ can now be used as a relational operator in strings, arrays, lists, objects and maps.

string: to check if a string is contained in another string

example:

<!--/* below code will return true */-->
${'h' in 'hello world'}
<!--/* below code will return false*/-->
${'q' in 'hello world'}
<!--/* the check is case-sensitive, so the below code will return false */-->
${'H' in 'hello world'}

array or list: to check if array or list contains the attribute

example:

<!--/* if someArray has [1, 2, 3, 4, 5] then below code will return true */-->
${1 in someArray}
<!--/* if someArray has [1, 2, 3, 4, 5] then below code will return false */-->
${6 in someArray}

object or map: to check if object or map has the property

example:

<!--/* if myObject has a property 'color' then below code will return true */-->
${'color' in myObject}
<!--/* if myObject has a property 'color' then below code will return false */-->
${'blue' in myObject}

Feature 3: data-sly-list and data-sly-repeat now have control parameters: begin, step, end

Now we can use control parameters in data-sly-list and data-sly-repeat

begin – iteration begins at the item located at the specified index; the first item of the collection has index 0
step – iteration will only process every step items of the collection, starting with the first one
end – iteration ends at the item located at the specified index (inclusive)

example:

<!--/* if you want to first 5 elements of the list */-->
<ul data-sly-list="${currentPage.listChildren @ begin = 0, end = 4}">
    <li>${item.title}</li>
</ul>
<!--/* if you want to see from 5th to 10th element */-->
<div data-sly-repeat="${currentPage.listChildren @ begin = 4, end = 9}">
    <div>${item.title}</div>
</div>

Do you face issues while trying to download assets for your local environment? Disk-space constraints? keeping them up-to-date?

Here’s a neat trick: How to show AEM images in your local environment from a different server

Extra new features in HTL 1.4

Besides these 3 enhancements there are other 2 updates. These are simple enough to understand. I encourage you to try them out.

1. Identifier for data-sly-unwrap
2. Support for negative numbers

You can also read AEM 6.5 release notes here

Conclusion

These enhancements are not a huge change but will make the developer lives a little bit easier.

Me personally, I like ‘in’ relational operator enhancement the best and have already started using it.

Which one are you going to implement first? let me know in the comments below.

As always, let me know if you have any questions or queries.