Tips and Tricks of HTL(Sightly) Development in AEM 6.3

In the AEM world, There are a lot of changes at every moment. As the technology is growing, Adobe has done a wonderful job in the field of developer tools and maven-plugins that can make the development easier.

• They made our manual tasks automatic.
• They just speed up our development.
• They save time and stop it at the same place where we are doing wrong.

If all the above reasons exist, so yes I would like to give some time from my hectic schedule to install that on my machine and take a lot of long term advantage of it.

So today we will talk about some advantages that can help me in the development

HTL Maven Plugin:

Before this plugin, There was not any way to validate our sightly (HTL) templating language. Either it is right or wrong(syntactically), the code gets to build and when we see the page we got to know...ah… something is wrong. This plugin came in the picture as “Prevention is better than cure”.

  We just add this plugin in our content’s pom.xml and it validates HTL at the time of build. So there is no possibility of syntactical error at run time and saves a lot of effort of the developer to find out which syntax he/she has missed out.

<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> </configuration> <executions> <execution> <id>validate-scripts</id> <goals> <goal>validate</goal> </goals> <phase>compile</phase> </execution> </executions> </plugin>

AEM Brackets Extension:

Before this tool, I was always using the VLT tool but this can be a great alternative of the vault in AEM.

Benefits over Vault:

• Automatic Syncing
• List each and every file you have changed in brackets so that unnecessary changes won’t go.
• Easy to use the console

Steps by Steps installation of Brackets AEM Extension:

• The AEM Brackets Extension supports Brackets version 1.0 or greater. Download the Latest Brackets from http://brackets.io/
• Add AEM Brackets Extension:
• Go to File-> Extension Manager
• Search AEM Brackets Extension in the Search Bar.
• Install the software

Important to Note:

• Sometimes install becomes failed so you can use “install from URL “ and give the github path here.

Fig - AEM Brackets Extension 

• If this also doesn’t work, you can download the zip from github and put it on “drag zip here”.Drag zip here worked for me.
• After the installation of the extension, you can open the content package folder (jcr_root)of the project in brackets.

Connect Brackets with Server:

In order to synchronize your content to and from development AEM instance, You need to define your project Settings.

• Go to AEM->Project Settings
• Add configurations like this:

Fig - Synchronization settings

This is automatically generated “brackets.json” file in brackets which contains all the configurations, added in the above dialog.

Fig - configuration file

Advantages of AEM Brackets Extension:

1. Synchronization Content:

The AEM Brackets Extension provides synchronization based on the rules written in filter.xml. So filter.xml play a very important role in syncing the content.

• Automatic Synchronization of Changed Files:

This synchronizes changes from Brackets editor to AEM but the automatic synchronization is not applicable from AEM instance to brackets editor.

• Manual Bidirectional Synchronization:

In the Project Explorer, You can Export to Server and Import from Server options which right-clicking on a file and folder.

2. Synchronization Status: The AEM Bracket Extension provides a notification icon on the right-hand side of the console, which indicates the status of the synchronization.

Different colors represent the different status of synchronization:

Green: All data has been synchronized

Blue: Data synchronization is in progress.

Red: Data is unable to synchronize.

Yellow: Some of the files are not synchronized.

3. The full content package(whole project) can be synchronized by using the options like Export Content Package and Import Content Package in the AEM Menu.
4. The AEM Brackets Extension provides some auto-completion options that help to write “HTL attributes” and “expressions”.

AEM HTL Read–Eval–Print Loop:

This is also an interesting tool that provides a live coding environment to test HTL scripts and see outputs. For a Learning perspective, it is quite easy to see the output on the same page.

To install this on your AEM instance:

1.Download the Package

2. Install it in AEM Package Manager.

Now you can see the console from here.

Fig - REPL tool

New features of HTL in AEM 6.3

HTL (HTML templating Language) is in great demand nowadays, in terms of features it is growing after every new version of AEM.

So here we will discuss what happiness AEM 6.3 brings for us:

1. Fetch the properties of a resource: I think this is the best feature till date as to when we need to fetch some properties of a resource, we need to go for a Java class( either Sling Model and WCMPojo). But now what we can do:

<sly data-sly-use.node="/etc/commerce/">${node.jcr:title}</sly>

2. Request Attributes: In the data-sly-include and data-sly-resource you can now pass requestAttributes in order to use them in the receiving HTL-script.
Note: You can also Download the Package for this and do it at your place.

3. Date Formatting: Before AEM 6.3, If there is a need to format any date in HTL, you need to use a java class to do that. But now this work has also become very easier for us as HTL provides support of date-format, timezone, and locale.

Examples:

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

4.Number Formatting:In HTL, now we can show the number in decimal format:

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

References: http://blogs.adobe.com/experiencedelivers/experience-management/new-htl-features-aem6-3