Adobe Experience Manager Tutorials: AEM HTL with sightly

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>

<html data-sly-use.logic="logic.js">
<head>
    
    <title>${currentPage.title}</title>
    <meta charset="utf-8">
    </head>
    <body>
    Hello
        
        <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>

        
        <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

Integrating the AngularJS Framework into AEM HTL(Sightly) with working example.

I have seen many webpages with similar topic, but complex while we try to replicate it in our local environment. Some times they dont work or quite tough to make it work. Here I am going to take you through an easy Angular JS integration with Sightly.

Note: Please ensure you verify the angular syntax using any online tool when you update the code, because angular is strict on syntax.

What is angular JS?
Angular JS is a JavaScript library that simplifies the creation of powerful components, by extending HTML vocabulary for your application.

Why Angular JS with AEM HTL?
Angular JS is the current trend. When we need to declare dynamic views in web applications to make it extra ordinary powerful, we need Angular JS.

What is the aim of this sample?
Through this demo, you will know how to create a simple angular JS Component which performs below tasks,

- Takes user iput and diplay through angular JS tags
- Takes user click and show an element using angular JS
- User click invokes a backend WCMUse Java file and displays the data through HTL + Angular JS

Steps involved in developing AEM + Angular + HTL Component.

Create a template
Create a new template as shown below at /apps/htl/templates

Create a folder 'page' at /apps/htl/components
Create a new component at /apps/htl/components/page as shown below

Update the 'templateHTL.jsp' file content at /apps/htl/components/page/templateHTL/templateHTL.jsp with below code.
<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is your Angular HTL Component</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create and render component that uses the template
Create a component as shown below

Go to path /apps/htl/components/angular/angular.html and modify the 'angular.html' with below code
<div ng-app>
<p>Enter a value: <input type="text" ng-model="name">
<p ng-bind="name"></p>
<div ng-view></div>
<ul class="menu">
<li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>
<li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
</ul>
<div ng-view></div>
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
<script type="text/ng-template" id="/tpl1.html">
<p> First name: <input type="text" ng-model="firstname"/>
Last name: <input type="text" ng-model="lastname"/>
</p>
<p>First name:<p ng-bind="firstname"></p>
<p>Last name:<p ng-bind="lastname"></p>
</script>
<script type="text/ng-template" id="/tpl2.html" data-sly-include="template.html">

</script >

</div>

Create a 'template.html' at path /apps/htl/components/angular

<div data-sly-use.vehicleService="com.aem.VehicleService" >
<div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
<ul data-sly-list.keyName="${myClass.getVehicleDetails}">
<li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
</ul>
</div>
</div>

Create a dialog (create dialog option) at path /apps/htl/components/angular with label 'dialog'

Client Library Creation for AngularJS framework

Create a folder 'clientlibs' at /apps/htl/components/angular and Add below two properties to it.

(name:categories, Type:String[], value:cq.widget)
(name:dependencies, Type:String[], value:angularjs)

Download the latest 'angular.min.js' from angular JS Site
Create a file 'angular.min.js' in folder /apps/htl/components/angular/clientlibs; copy paste the downloaded angular.min.js content to this file.
Now you have angular JS at your crx in location /apps/htl/components/angular/clientlibs/angular.min.js

Create a new file js.txt at /apps/htl/components/angular/clientlibs; open the file 'js.txt' and paste 'angular.min.js' (without quotes) and save it.
Now you have a new client library for angular JS.

Add this in your page , open file /apps/htl/components/page/templateHTL/templateHTL.jsp andadd new client library to it by adding line

<cq:includeClientLib categories="cq.widgets" />

The Folder Structure Now

Create a WCMUse class for data.
We are creating a map with set of vehicles and populating it using HTL.

The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.

Please find the WCMUse class here. VehicleService.JAVA

Create a page that uses AngularJS functionality; Code execution

Open site admin and create a page with template 'templateHTL'. Open it in edit mode.
Drag and drop the 'angular' component to the newly created page.

Once you re load the page and start entering anything at 'Enter a Value', you can see the inline option working through angular.

Code executed: <p ng-bind="name"></p>

When you click on 'Template Load example', you can see the new templates on bottom.

Code executed:

'On Click' is added at line,
<li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>

A template place holder is at line,
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>

Script executed when the teplate got clicked,

<script type="text/ng-template" id="/tpl1.html">
<p> First name: <input type="text" ng-model="firstname"/>
Last name: <input type="text" ng-model="lastname"/>
</p>
<p>First name:<p ng-bind="firstname"></p>
<p>Last name:<p ng-bind="lastname"></p>
</script>
You can also see, on entering first name and second name, again inline in action.

When you clicked on 'Show the list of cars'
We have the Data coming from WCMUse class now as shown below.

Code executed
'On Click' is added at line,
<li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>

A template place holder is at line,
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>

Which in turn calls the script for template selection from
<script type="text/ng-template" id="/tpl2.html" data-sly-include="template.html">

</script >

This executes the template.html at path /apps/htl/components/angular/template.html

The template.html executes the WCMUse class and process the data from below code.
<div data-sly-use.vehicleService="com.aem.VehicleService" >
<div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
<ul data-sly-list.keyName="${myClass.getVehicleDetails}">
<li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
</ul>
</div>
</div>

Want the code package?
Please let me know through e-mail if you need the package.

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

Adobe Experience Manager Tutorials

Monday, 20 May 2019

HTML Template language updates which needs to be observed with AEM 6.5

Thursday, 23 February 2017

Integrating the AngularJS Framework into AEM HTL