HTML Template language updates which needs to be observed with AEM 6.5
While working on AEM 6.5, we can use a set of new HTL Features which are listed below.
1) There is a new operator 'in' which helps to check availability of an item in strings, arrays and objects.
Usage:
${'c' in 'abc'}
${10 in myArray}
${'b' in myObject}
2) A new data-sly-set to define variables in HTL
Usage:
<sly data-sly-set.title="${currentPage.description}"/>${description}
3) More control for the list iteration using parameters 'begin,step,end'
Usage:
<h2 data-sly-repeat = "${currentPage.listChildren @ begin =1 , step =2 }"> ${item.title} </h2>
4) data-sly-unwrap improvement with identifiers
Usage:
<div data-sly-unwrap.isUnwrapped="${myFirstCondition || mySecondCondition}">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
5) Now htl supports negative numbers
So while working with AEM 6.5 , dont forget to utilise this improvements as part of HTL development.
Demo of the new HTL features:
Sample Code given below,
template.html
<!DOCTYPE html>
<!--/* Calling the server-side JS script for all view logic that Sightly cannot do */-->
<html data-sly-use.logic="logic.js">
<head>
<!--/* Expressions allow to easily output variables */-->
<title>${currentPage.title}</title>
<meta charset="utf-8">
</head>
<body>
Hello
<!--/* To allow some HTML, use the following context option */-->
<p>${properties.jcr:description @ context='html'}</p>
${'a' in logic.myObject}
${10 in logic.myArray}
${'d' in logic.myString}
<div data-sly-unwrap.isUnwrapped= "${'d' in logic.myObject }">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
<p data-sly-use.logic="logic.js" data-sly-unwrap>#### World</p>
<!--/* Iterating over any collection or iterable is easy */-->
<ul data-sly-list="${logic.myPage.listChildren @ begin =2 , step =1}">
<li><a href="${item.path}.html">${item.title}</a></li>
</ul>
<ul data-sly-list="${logic.myPage.listChildren}">
<li> ${item.title} </li>
</ul>
</body>
</html>
logic.js
----------
use(function () {
return{
myString: "abcd",
myArray: [10,100,1000],
myObject: {
a: "Hello",
b: "World"
},
myPage: pageManager.getPage('/content/we-retail/us/en')
};
});
More Like This:
AEM 6.5 Site related new features
AEM 6.5 Specific new features in Assets section
New Features in AEM 6.5 Forms
Foundation updates in AEM 6.5 which a developer should be aware of
Cloud Manager for AEM 6.5 New features
Storage concepts in AEM 6.5
HTML Template language updates which needs to be observed with AEM 6.5
While working on AEM 6.5, we can use a set of new HTL Features which are listed below.
1) There is a new operator 'in' which helps to check availability of an item in strings, arrays and objects.
Usage:
${'c' in 'abc'}
${10 in myArray}
${'b' in myObject}
2) A new data-sly-set to define variables in HTL
Usage:
<sly data-sly-set.title="${currentPage.description}"/>${description}
3) More control for the list iteration using parameters 'begin,step,end'
Usage:
<h2 data-sly-repeat = "${currentPage.listChildren @ begin =1 , step =2 }"> ${item.title} </h2>
4) data-sly-unwrap improvement with identifiers
Usage:
<div data-sly-unwrap.isUnwrapped="${myFirstCondition || mySecondCondition}">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
5) Now htl supports negative numbers
So while working with AEM 6.5 , dont forget to utilise this improvements as part of HTL development.
Demo of the new HTL features:
Sample Code given below,
template.html
<!DOCTYPE html>
<!--/* Calling the server-side JS script for all view logic that Sightly cannot do */-->
<html data-sly-use.logic="logic.js">
<head>
<!--/* Expressions allow to easily output variables */-->
<title>${currentPage.title}</title>
<meta charset="utf-8">
</head>
<body>
Hello
<!--/* To allow some HTML, use the following context option */-->
<p>${properties.jcr:description @ context='html'}</p>
${'a' in logic.myObject}
${10 in logic.myArray}
${'d' in logic.myString}
<div data-sly-unwrap.isUnwrapped= "${'d' in logic.myObject }">
text <span data-sly-test = "${isUnwrapped}"> is unwrapped </span>
</div>
<p data-sly-use.logic="logic.js" data-sly-unwrap>#### World</p>
<!--/* Iterating over any collection or iterable is easy */-->
<ul data-sly-list="${logic.myPage.listChildren @ begin =2 , step =1}">
<li><a href="${item.path}.html">${item.title}</a></li>
</ul>
<ul data-sly-list="${logic.myPage.listChildren}">
<li> ${item.title} </li>
</ul>
</body>
</html>
logic.js
----------
use(function () {
return{
myString: "abcd",
myArray: [10,100,1000],
myObject: {
a: "Hello",
b: "World"
},
myPage: pageManager.getPage('/content/we-retail/us/en')
};
});
More Like This:
AEM 6.5 Site related new features
AEM 6.5 Specific new features in Assets section
New Features in AEM 6.5 Forms
Foundation updates in AEM 6.5 which a developer should be aware of
Cloud Manager for AEM 6.5 New features
Storage concepts in AEM 6.5
HTML Template language updates which needs to be observed with AEM 6.5
No comments:
Post a Comment