JavaScript Use Api

AEM offers two API one is Java-Use Api and 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 the 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 components values instead of traditional Sling Models and WCMUsePojo class.

Lets 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 below fields :
             
                         a) Textfield --> We will name it as title
                         b) Pathfield --> We will name its as 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 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 case 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 issue 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. The 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 handy in some typical cases.


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