New Features in AEM6.1 Sightly

In this blog, I will explain the new features in AEM6.1 Sightly. These features will make your sightly code shorter and simpler. These features are listed below.

1. Introduction of <sly> tag
2. data-sly-repeat
3. URL manipulation

local for i18n I will explain these newly introduced sightly features in the form of questions and answers, so let’s start.

Q1) What is the use of <sly> tag?
This tag is used to remove extra divs generated when we include a resource in our component’s HTML file using Sightly code.

Q2) We can do that using data-sly-unwrap, why <sly>?
For explaining this, let’s consider we have to include a parsys component in our HTML without extra divs using data-sly-unwrap, then your code line will be

<div data-sly-resource="${@ path='par', resourceType='foundation/components/parsys'}" data-sly-unwrap="true" ></div> or
<div data-sly-resource="${@ path='par', resourceType='foundation/components/parsys'}" data-sly-unwrap ></div>

It will work fine but in this case, you have to first define a <div> tag to use the data-sly-resource attribute and you also have to write data-sly-unwrap to remove this extra <div> tag.

Won’t it be simple if you didn’t have to write this extra <div> tag and data-sly-unwrap?

Q3) How to use <sly> tag? Or what is the syntax of <sly> tag?
If you want to write the same line using the <sly> tag, then the code will be-

<sly data-sly-resource="${@ path='par', resourceType='foundation/components/parsys'}" /> or
<sly data-sly-resource="${@ path='par', resourceType='foundation/components/parsys'}"></sly>

Here, you can see the difference between the old approach and <sly> tag.

Q4) Will <sly> tag not generate any extra divs?
Yes, it will not generate any extra <div> tag or any HTML DOM element, you can think of it as a replacement of data-sly-unwrap Sightly tag.

Q5) Is data-sly-unwrap deprecated or removed from AEM6.1 Sightly?
No, you can use it as well but as you have a much better <sly> tag I think data-sly-unwrap is not required. I think it is available only to support the AEM6.0 Sightly code.

Q6) What is the data-sly-repeat tag in Sightly?
This tag is used to iterate any of the list elements.

Q7) Can we do that using data-sly-list in Sightly?
Yes, you can do that by using a data-sly-list but the only difference is that, if you use data-sly-repeat, you will not have to provide any container element.

Q8) Not getting your point, could you please elaborate on your statement i.e. any container element?
Let us consider you want to iterate all child pages of the currentPage object. Then, firstly use data-sly-list to write the code as

<div data-sly-list="${ currentPage.listChildren }">
${item.name}
</div>

The output will be generated as
test1 test2 test3 test4
And when you view the HTML element structure in your debugger it will be
<div>
    Test1
    Test2
    Test3
    Test4
<div>

Now use data-sly-repeat
<div data-sly-repeat="${ currentPage.listChildren }">
    ${item.name}
</div>

Output will be
test1
test2
test3
test4

And when you view the HTML element structure in your debugger it will be
<div>
    test1
</div>
<div>
    test2
</div>
<div>
    test3
</div>
<div>
    test4
</div>

You can see these generated DOM elements in the debugger’s Elements tab.

Q9) We can achieve the same DOM structure using a data-sly-list, is it required to use data-sly-repeat for the same?
No, it is not required but using data-sly-repeat your HTML code will become shorter. For e.g. If you want to achieve
<div>
    test1
</div>
<div>
    test2
</div>
<div>
    test3
</div>
<div>
    test4
</div>

output, then the code you have to write with data-sly-list will be

<div data-sly-list="${ currentPage.listChildren }" data-sly-unwrap>
<div> ${item.name} </div>
</div>

Here you have to add data-sly-unwrap and <div> tag for each element. But by using data-sly-repeat, these tags will not be required and your HTML looks more refined and simple.

Q10) What is URL manipulation in AEM6.1 Sightly?
In AEM 6.1 you can do some URL manipulations, which are not available in AEM6.0 Sightly. Some of the examples are:
1. Adding extension with the code
${'content/geometrixx/en'@ extension='json'}

Output will be
content/geometrixx/en.json

2. Adding scheme (http or https) if required
${'content/geometrixx/en'@ scheme='http', extension='json'}

Output will be
http://content/geometrixx/en.json

3. Adding Selectors
${'content/geometrixx/en'@ selectors='s1', extension='html'}

Output will be
content/geometrixx/en.s1.html
4. Adding Fragments
${currentPage.path @ selectors='s1.s2', extension='html', fragment='blog'}

Output will be
content/geometrixx/en.s1.s2.html#blog

Q11) What is the locale for i18n in the newly introduced sightly features?
This locale is a newly introduced object in AEM6.1. When we work with i18n in Sightly, we can use this object to set custom locale. It can be used as
${'Hello World' @ i18n, locale=request.locale}

Note – This object is not present in AEM6

I am also sharing the Git repository link where you can find demo examples for these properties.

Git repository link is:
https://bitbucket.org/argildx/accunity-blog-snippets/src/master/

Source: https://www.argildx.com/technology/new-features-aem-6-1-sightly/