In AEM6.3 there are a num­ber of new HTL fea­tures that I will out­line in this arti­cle.

Number/Date-formatting

You have now native for­mat­ting of num­bers and dates, no need any­more for writ­ing cus­tom code for this, also time­zone and locale are sup­port­ed.

Exam­ple:

<h2>${ 'dd-MMMM-yyyy hh:mm:ss' @
           format=currentPage.lastModified,
           timezone='PST',
           locale='fr'}</h2>

<h2>${ '#.00' @ format=300}</h2>

In the exam­ples you see that the for­mat is spec­i­fied first, then the val­ue you want to for­mat.

Full details on the for­mat you can use, are in the HTL-spec­i­fi­ca­tion.

data-sly-use with resources

You can now get resources direct­ly in HTL with data-sly-use, mean­ing you don’t have to write code just to get the resource.

Exam­ple:

<div data-sly-use.product=“/etc/commerce/product/12345”>
  ${ product.title }
</div>

Request-attributes

In the data-sly-include and data-sly-resource you can now pass reques­tAt­trib­ut­es in order to use them in the receiv­ing HTL-script.

This way to can prop­er­ly pass-in para­me­ters into scripts / com­po­nents.

<sly data-sly-use.settings="com.adobe.examples.htl.core.hashmap.Settings" 
        data-sly-include="${ 'productdetails.html' @ requestAttributes=settings.settings}" />

Java-code of the Set­tings class, the Map is used to pass in the reques­tAt­trib­ut­es:

public class Settings extends WCMUsePojo {

  // used to pass is requestAttributes to data-sly-resource
  public Map<String, Object> settings = new HashMap<String, Object>();

  @Override
  public void activate() throws Exception {
    settings.put("layout", "flex");
  }
}

Via a Sling-Mod­el for exam­ple you can con­sume the val­ue of the spec­i­fied reques­tAt­trib­ut­es, in this “lay­out” is inject­ed via the Map from the Use-class.

@Model(adaptables=SlingHttpServletRequest.class)
public class ProductSettings {
  @Inject @Optional @Default(values="empty")
  public String layout;

}

Fix for @extension

The @extension is now work­ing in all sce­nar­ios, before you could have a result like “www.adobe.com.html”

Now the @extension checks whether to add or not add the exten­sion.

No rea­son to not use it

${ link @ extension = 'html' }

Conclusion

These are the HTL-fea­tures added in AEM6.3, I hope this will make your pro­gram­ming-life eas­i­er 🙂

You can find more exam­ple on my github: https://​github​.com/​h​e​e​r​v​i​s​s​c​h​e​r​/​h​t​l​-​e​x​a​m​p​les

@heervisscher

0 comments