Hello,
I have the following nested properties in one of my pages:
I'm unable to access these properties with HTL:
Any info on this will be great.
Thanks...
Solved! Go to Solution.
Hi Akash,
You could get children of carouselImages in a list using Sling model or WcmUse Api like this:
private java.util.List<Resource> list;
final Resource resource = request.getResource();
Resource childResource = resource.getChild("links");
Iterator<Resource> resources = resource.listChildren();
while (resources.hasNext()) {
list.add(resources.next());
}
And, then using that model in sighly using
<sly data-sly-use.model="org.sample.Model"></sly>
<sly data-sly-list=${model.list}>
{item.<property-name>}
</sly>
try ${properties["carouselImages/item0/isActive"]}
Hi awadheshv,
This sure is helpful and thank you for replying.
The only issue with hard-coding item0 is that there could be n number of items and cannot be known when building the component. Is there a way to iterate over the items that is under carouselImages?
Something like:
<ol data-sly-list="${properties['carouselImages']}">
<li>${item.isActive}</li>
<li>${item.url}</li>
</ol>
Regards...
Views
Replies
Total Likes
Hi Akash,
You could get children of carouselImages in a list using Sling model or WcmUse Api like this:
private java.util.List<Resource> list;
final Resource resource = request.getResource();
Resource childResource = resource.getChild("links");
Iterator<Resource> resources = resource.listChildren();
while (resources.hasNext()) {
list.add(resources.next());
}
And, then using that model in sighly using
<sly data-sly-use.model="org.sample.Model"></sly>
<sly data-sly-list=${model.list}>
{item.<property-name>}
</sly>
The other answers have been very helpful. I have also tried something with server-side-Javascript and this snippet of code is what i'm working with:
var carouselImageNodes, carouselImages;
//
setCarouselImageNodes();
setCarouselImages();
//
function setCarouselImageNodes(){
carouselImageNodes = {};
if(typeof this.currentNode != 'undefined') {
carouselImageNodes = this.currentNode.hasNode("carouselImages") ?
this.currentNode.getNode("carouselImages").getNodes() :
{};
}
}
function setCarouselImages() {
carouselImages = Object.keys(carouselImageNodes).map(function(key){
return {
url: properties['carouselImages/'+ key +'/url'],
isActive: properties['carouselImages/'+ key + '/isActive'],
caption: {
heading: {
element: properties['carouselImages/'+ key + '/caption/heading/element'],
text: properties['carouselImages/'+ key + '/caption/heading/text']
},
paragraph: {
element: properties['carouselImages/'+ key + '/caption/paragraph/element'],
text: properties['carouselImages/'+ key + '/caption/paragraph/text']
}
}
};
});
Thanks & Good Luck...
Views
Likes
Replies