AEM Sightly to get properties of child nodes.

Question

So it looks like sightly is great for getting properties, but I would like to work get properties of other child nodes that I have defined.

Here is the start of my PictureFill Component structure:

{
  jcr:primaryType: "nt:unstructured",
  jcr:createdBy: "admin",
  fileReference: "/content/dam/myapp/dev/hero-billboard.jpg",
  jcr:lastModifiedBy: "admin",
  jcr:created: "Wed Oct 07 2015 03:38:00 GMT+0000",
  jcr:lastModified: "Wed Oct 07 2015 16:54:12 GMT+0000",
  sling:resourceType: "myapp/components/content/image",
  cq:responsive: {
    jcr:primaryType: "nt:unstructured"
  },
    mobile: {
      jcr:primaryType: "nt:unstructured",
      path: "/content/dam/myapp/dev-testing/placeholder/FPO-hero-sm.jpg"
    },
    tablet: {
      jcr:primaryType: "nt:unstructured"
    },
    desktop: {
      jcr:primaryType: "nt:unstructured"
    },
    extralg: {
      jcr:primaryType: "nt:unstructured"
    }
}

So the part I am getting stuck on is how will I get the properties set on the mobile, tablet, desktop and extralg nodes.

I would like to reuse as much OOTB functionality I get from the utils/Image.js instead of rebuilding that so that why I have gone the Java route.

Answer 1

Why don't you use a WCMUse Java class or a JS use?

What you are looking for is custom for what you are trying to achieve so you should have your own controller and access the properties of child nodes, Sightly is a templating language, it's made simple on purpose, if you need specific stuff create a Use Java or JavaScript object and access it with Sightly.

Answer 2

METHOD 1: HTL/Sightly

with the data structure in your question:

<sly data-sly-list.device="${resource.listChildren}">
  ${device.name} // this should output 'mobile' or 'desktop', etc.
  ${device.path} // this should output the paths
</sly>

---

METHOD 2: Javascript USE API

This is the node (navbarnavitem) from which i want to access item0 and item1:

This is the getLinks method that helps me do that (each item has two properties - href and linkText:

Good Luck...