Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Accessing String array using Sightly

Avatar

Level 3

In my component, I have a "map" property of xtype multifield that contains a "title" and "path".

When a page is created with the component, the "map" is stored as a String array like: type "String[]" and the value {"title":"This is title one","path":"/foo/bar"},{"title":"This is title two","path":"/foo/bar/2"}.

I would like to display these as an unordered list using Sightly. The code below gets me each pair, but I would like to narrow down even further to each "title" and "path". 

<ul data-sly-list="${properties['map']}">
    <li>${item}</li>
</ul>

Can I accomplish this using Sightly? Something like this:

<ul data-sly-list.mapItem="${properties['map']}">
    <li>Title: ${mapItem.properties['title']}</li>
    <li>Path: ${mapItem.properties['path']}</li>
</ul>


Thanks in advance

3 Replies

Avatar

Level 10

See this Sightly example to work with Collections: 

In this example - not String[] - but a List instance - gives you an idea: 

<div data-sly-test="${wcmmode.edit && !properties.search}">
      AEM Sightly/QueryBuilder Example
</div>  
 
AEM QueryBuilder Sightly Example:
<div data-sly-test="${properties.search}" data-sly-use.v="com.community.querybuilder.HelloService">
<b>Here are the QueryBuilder results that corrresponds to ${properties.search}:</b>
    <ul data-sly-list="${v.files}">
        <li>${item}</li>
    </ul>  
</div>

 

See:

https://helpx.adobe.com/experience-manager/using/sightly_querybuilder.html

Avatar

Level 3

Thanks - is there any way to do this using the JS Use API instead of Java?