dynamicListSightly.java

#In your Java Class
#this assumes that there is a multi string property tabs
package com.wemblog.use;
public class WemBlogUse extends WCMUse {
  
/**
   * CASE 1: Just access a multi value property and iterate over them
*/
public Iterator<Map<String, Object>> getTabTitles(){
List<Map<String, Object>> infos = new LinkedList<Map<String,Object>>();
String[] tabTitles = getProperties().get("tabs", String[].class);
if (tabTitles == null || tabTitles.length == 0) {
  tabTitles = new String[1];
  tabTitles[0] = i18n.get("Tab One from sightly");
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("tabTitle",  tabTitles[0]);
  infos.add(map);
  }else if(tabTitles.length > 0){
  for (String tab : tabTitles) {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("tabTitle",  tab);
    infos.add(map);   
  }
}
return  infos.iterator();
}


  /**
   * CASE 2:
   * Get List of all Column Names. For now we name them as "column-0...n" based on column number
   * @return
   */
  public List<String> getAllColumns() {
  List<String> allColumns = new ArrayList<String>();
  for (int i = 1; i <= Integer.parseInt(getProperties().get("count", "3")); i++) {
    allColumns.add("Test" + "-" + i);
  }
  return allColumns;
  }
  
  /**
   * CASE 3:
   * Example of returning list of Object
   * Note that you can just return a model here as well and then access there property in sightly templating language
  */
  public List<Page> getBreadCrumbs(){
    //Some logic that will return list of page
  }
  
}


# In your Sightly html

<sly data-sly-use.wemBlog="com.wemblog.use.WemBlogUse"></sly>
  <sly data-sly-list.mytabTitles="${wemBlog.tabTitles}">
    <li>
    <ul>${mytabTitles.tabTitle}</ul>
    </li>
  </sly>

# This will include number of parsys specified by count number above
<sly data-sly-list.eachColumn="${wemBlog.allColumns}">
  <section>
    <sly data-sly-resource="${ @path=eachColumn, resourceType='foundation/components/parsys'}"></sly>
  </section>
</sly>

# SHow Breadcrumb
#Note that since Use class is retuning a page object here, you can perform
# all page operations on that object
<ul data-sly-list="${wemBlog.breadcrumbs}">
  <li>${item.properties.navTitle || item.title}</li>
    <a href="${item.path}.html">${item.properties.navTitle || item.title}</a>
  </li>
</ul>