Deep Dive in Sightly/HTL in AEM 6.3 Part - 2

In this blog we will take a look over tips and tricks of HTL with some project related use cases because sometimes we know the concept but we don't know where to use it.

1. Component Placeholder: When we create a component, it’s good to have a placeholder for that component in edit mode.You can add this syntax for placeholder:
<sly data-sly-test="${wcmmode.edit}">
<div class="cq-placeholder cq-marker-start" data-emptytext="Title"></div>
</sly>

2. data-sly-attribute: This block statement sets an attribute to an element. The attribute will be shown only if the value exists unless the attribute is omitted..
Use Case: Required- Let suppose we have one checkbox in my textfield component, and if the author checks it add required attribute like this else not.

<input type="text" name="usrname" required>

So to achieve this, we can do like this:
<input type="text" name="username" data-sly-attribute.required="${properties.required=='true'}"/>

3. Avoid using HTML Comments: because they become the part of final markup. So to make the dom clean, always use HTL Comments.

Avoid HTML Comments: <!-- This is HTL Comment -->
Use HTL Comments <!--/* This is HTL Comment */-->

4.Context-Sensitive:
a. styleString: There are many components where we need to provide inline CSS for functionality like background-image etc. So how to achieve that

<div style="background-image:url('${properties.bgImage @context='styleString'}');">
</div>
b. scriptString:There are many cases when we need to pass dynamic values to jquery to perform some operations like to pass a value to ajax for query parameter.

<script>
    var teaserConfig = {    skin: "${teaser.skin @ context='scriptString'}",    animationSpeed: ${teaser.animationSpeed @ context='number'}    };
</script>
You can fetch this variable in js file using window.teaserConfig.skin.

Problem: But in the above scenario, we need to use inline css and JS, which is been discouraged to keep a clean separation of concern. So is there is any better way to do so?
Solution: I think yes “data-attribute”. Through data attributes, we can’t cover all the possible scenarios of inline css and js but can try to manage it at some extent.

How to avoid inline JS: Inline js can be completely avoided using data-attributes
<div class=”test” data-path=”${properties.path}”></div>

In JS, you can fetch the value of data attribute :
var test = $(.test).data(“path”);

Through this inline js can be avoided.

How to avoid inline CSS: We need to use inline css in several components like for dynamic background-image, height and width of an image or many situations can be there.We can’t avoid inline css for these scenarios but we can use classes and write css for them if we have fixed number of options.

5. Always use existing HTML elements for block statements.
<div class="cq-placeholder cq-marker-start" data-emptytext="Title” data-sly-test="${wcmmode.edit}"></div>

6. Ternary Operator: There are so many use cases when we need to use ternary operator.In Ternary operator the syntax is very important:

${properties.pageTitle ? properties.jcr:title : resource.name}

7.Condition based on Page Template: Assume, a particular section of code only should be executed if the template of the page is /apps/geometrixx/templates/homepage.

If you write code like this:
${currentPage.template.path == ‘/apps/geometrixx/templates/homepage’}

This doesn’t work in the publish environment. So to solve this problem, you can use

${pageProperties.cq:template == ‘/apps/geometrixx/templates/homepage’}

If there is really a need to use currentPage.template.path, you will need to provide read rights to anonymous user on your template path.

You can provide read rights from OSGI Console using config option available for
Day CQ ACL Setup Service (com.day.cq.security.ACLSetup), put the entry like allow;jcr:read;anonymous;/apps/<project_identifier>/templates, After that you can cross check from permissions console tab if it took new permissions for anonymous user. You can also directly go and configure permissions for using the permissions tab also.

Configuring via OSGI Config is better approach as you can push those configure using config XML's:


Fig 1- Day CQ ACL Setup Service