ADOBE EXPERIENCE MANAGER (AEM)

Sightly 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.

Applying Edit Mode Only CSS Changes

Use the available ${wcmmode.edit} and ${wcmmode.preview} boolean variables in the HTL.

For example, you have an element that is hidden which contains a parsys. Like a confirmation banner that is shown to the user after they submit a form.

.html
<sly data-sly-test.editModeStyle="${wcmmode.edit || wcmmode.preview ? 'display:block' : ''}" />

<div class="confirmation-banner" style="${editModeStyle @ context='unsafe'}" aria-hidden="true">
    ...
</div>

Another use case example is 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 || wcmmode.preview ? '' : '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>

Resources

comments powered by Disqus