JavaScript Use Api

AEM offers two API one is Java-Use API and the other is Javascript-Use-Api for the sightly to consume the values. Javascript-Use API allows developers to write server-side code in the front end. The code written in the javascript gets converted into Java and uses the already available Java libraries. In the backend, AEM uses an open-source implementation of Javascript known as RHINO which converts the code written in javascript into Java.

I have recently used this API for rendering many component values instead of traditional Sling Models and WCMUsePojo class.

Let's start with a simple example of rendering the properties of a component:
1) For any individual component create a javascript file (example comp.js) parallel to the Html file.
2) Now suppose the component has the below fields :

a) Textfield --> We will name it as title
b) Pathfield --> We will name it as the path.
c) Multifield --> We will name it as primaryLinks.

3) Add the below code in the javascript file created as a part of component earlier :

use(function () {
return {
title: properties.get("title"),
path: properties.get("path"),
primaryLinks: resource.getResourceResolver().getResource(currentNode.getPath() +"/primaryLinks")
}
});

4) Now in order to get the values to add the below code in Html

<sly data-sly-use.comp="comp.js">

${comp.title}
${comp.path}

<ul data-sly-list.compNav="${comp.primaryLinks}">
<li>${compNav.propertyValue}
</ul>

</sly>

As we can see there are already predefined objects available to be used. Following are the objects available which were there when we had global.jsp into the picture.

a) currentNode
b) currentPage
c) resource
d) log
e) sling
f) pageProperties
g) properties
h) pageManager
i) component
j) designer
k) currentDesign
l) currentStyle

Sometime we need some of the Java Packages available , in order to do the same in javascript use the following code:

var resourceResolver = resource.getResourceResolver().getResource("pathof Node");
var Node= resourceResolver.adaptTo(Packages.javax.jcr.Node);

One of the use cases where I have used the javascript use api was getting the tag name and title from the Tag Path I was getting from the backend. This is also one of the issues I saw in sightly is the iteration of Map of Objects.

Example: If you have Map<Object, Map<Object...>, the iteration of this object doesn't work in sightly so in order to get tag name and title I passed the tag path in the map and got the name and title of the tag using the javascript api.

So in order to implement the above example we need to pass the tag path from the HTML to javascript.

In HTML
<sly data-sly-use.params="${'comp.js' @value=value}"></sly>

Here value will tagPath that will be coming from the backend. Then you can pass it in the sly data-sly-list for all the paths while Iterating.

Now in the js use the code as below to get the tag name and tag title

use(function () {
// you can reference the parameters via the this keyword.
var resourceResolver = resource.getResourceResolver();
var tagManager = resourceResolver.adaptTo(Packages.com.day.cq.tagging.TagManager);
var tag = tagManager.resolve(this.value1);
var name = tag.name;
var title = tag.title;

return {
title: title,
name:name
};
});

The javascript use api is somewhat different than the usual Sling Models and WCMUsePojo , but it sometimes comes in handy in some typical cases.

For more information, there is the official documentation for the RHINO framework available.