Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

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?