AEM Sightly aka HTL Tips & Resources

Tips & Resources for using Sightly Hypertext Template Language (HTL) in Adobe Experience Manager (AEM). For more information, the HTML Template Language Specification is a comprehensive HTL resource.

Sightly/ HTL Tips

? Sightly comparing a string value
Say we have a string 'heroType' and having some values. We need to test its value to 'AL', we can use below code to compare it.

<div data-sly-test="${style.getHeroType == 'AL' }">Hello</div>

? Check a list's(formatList) size using below code
<sly data-sly-test.emptysize ="${subcategoryUse.formatList.size > 0 }" />

? Check a list item count is greater than zero in sightly
Java List : shopList; Use class : subcategoryUse

<sly data-sly-list.listItem="${subcategoryUse.shopList}">
<sly data-sly-test.count="${listItemList.index > 0}">
//Do your task here if count is more than zero
</sly>

? Passing a value to Use  class from sightly:
<sly    data-sly-use.integerUse="${'com.....IntegerUse' @ text=item}">

And in Use class IntegerUse.java read it as,
String text = get("text", String.class);

? Iterating over a list
Java List: firstList

list="${quantumUse.firstList}">
//Use list item here using '{item}'
</sly>

? When a Java list contains an object holding multiple values, each value can be retrieved as below
<a x-cq-linkchecker="valid" href="${listItem.getUrl}.html"><img src="${listItem.getitemImage}" class="image-responsive"></a>
or
<p>${listItem.getpriceInteger} <span>${listItem.getpriceDecimal}</span>

? Test multiple items in sightly
<sly data-sly-test="${listItem.selectLogo && listItem.displayLogo}">
OR
<div data-sly-test="${listItem.selectCategoryBadge.length > 0 && listItem.displayCategoryBadge}"

Applying Edit Mode Only CSS Changes

Use the available ${wcmmode.edit} the boolean variable in the HTL. A use case could be to remove global CSS classes when they are hiding components with display:none;. For example,

.css

@media screen and (min-width:768px){

    .mobile-only {

        display: none;

    }

}



In the HTL template, if edit mode, set the ${classMobileOnly} variable to empty. Otherwise, it contains the mobile-only class name for inclusion.

.html

<sly data-sly-test.classMobileOnly="${wcmmode.edit ? '' : 'mobile-only'}" />

<div class="${['links-container', classMobileOnly] @ join=' '}" aria-hidden="true">

    ...

</div>

Note the sightly expression contains an array of CSS class names with a join in the class attribute value. This helps prevent extra whitespace around class names.

Component Nesting

Scenario: you have components that you would like to bring into another component template. In this example, we have a header component in the content page template that has two components nested within its header element.

For the header component, AEM won’t let you bring up an edit dialog unless the resource has a div element wrapper instead of sly tag. e.g.,

<header id="myapp-header">

    <div data-sly-resource="${'top-nav' @ resourceType='/apps/myapp/components/structure/top-nav'}"></div>

    <div data-sly-resource="${'main-nav' @ resourceType='/apps/myapp/components/structure/main-nav'}"></div>

</header>

Instead of this, which only allows you to bring up the dialog for the main-nav in author mode.

<header id="myapp-header">

    <sly data-sly-resource="${'top-nav' @ resourceType='/apps/myapp/components/structure/top-nav'}"></sly>

    <sly data-sly-resource="${'main-nav' @ resourceType='/apps/myapp/components/structure/main-nav'}"></sly>

</header>

Display Context

To protect against cross-site scripting (XSS) vulnerabilities, HTL automatically recognizes the context within which an output string is to be displayed within the final HTML output, and escapes that string appropriately.

It is also possible to override the automatic display context handling with the context option.

${properties.jcr:title @ context='html'}          <!--/* Use this in case you want to output HTML - Removes markup that may contain XSS risks */-->

${properties.jcr:title @ context='text'}          <!--/* Use this for simple HTML content - Encodes all HTML */-->

${properties.jcr:title @ context='elementName'}   <!--/* Allows only element names that are white-listed, outputs 'div' otherwise */-->

${properties.jcr:title @ context='attributeName'} <!--/* Outputs nothing if the value doesn't correspond to the HTML attribute name syntax - doesn't allow 'style' and 'on*' attributes */-->

${properties.jcr:title @ context='attribute'}     <!--/* Applies HTML attribute escaping */-->

${properties.jcr:title @ context='uri'}           <!--/* Outputs nothing if the value contains XSS risks */-->

${properties.jcr:title @ context='scriptToken'}   <!--/* Outputs nothing if the value doesn't correspond to an Identifier, String literal or Numeric literal JavaScript token */-->

${properties.jcr:title @ context='scriptString'}  <!--/* Applies JavaScript string escaping */-->

${properties.jcr:title @ context='scriptComment'} <!--/* Context for Javascript block comments. Outputs nothing if value is trying to break out of the comment context */-->

${properties.jcr:title @ context='scriptRegExp'}  <!--/* Applies JavaScript regular expression escaping */-->

${properties.jcr:title @ context='styleToken'}    <!--/* Outputs nothing if the value doesn't correspond to the CSS token syntax */-->

${properties.jcr:title @ context='styleString'}   <!--/* Applies CSS string escaping */-->

${properties.jcr:title @ context='styleComment'}  <!--/* Context for CSS comments. Outputs nothing if value is trying to break out of the comment context */-->

${properties.jcr:title @ context='comment'}       <!--/* Applies HTML comment escaping */-->

${properties.jcr:title @ context='number'}        <!--/* Outputs zero if the value is not a number */-->

${properties.jcr:title @ context='unsafe'}        <!--/* Use this at your own risk, this disables XSS protection completely */-->

Resources
https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md
Experience Manager HTL Help

HTML Template Language Specification
AEM