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.
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.
