How to include an HTL list inside an HTL list

[RobertBailey201]

Hi All,

I have the following Java code in my Java component bean :-

public List<String> getOuterList()
{
    final List<String> outerList = new ArrayList<String>();
    outerList.add("Outer1");
    outerList.add("Outer2");
    outerList.add("Outer3");
    return outerList;
}
public List<String> getInnerList()
{
    final List<String> innerList = new ArrayList<String>();
    innerList.add("Inner1");
    innerList.add("Inner2");
    innerList.add("Inner3");
    return innerList;
}

The HTL below (examples 2 and 3) is not producing the expected result :-

<p>-------------------------EXAMPLE 1  (WORKS)-------------------------</p>
<ul data-sly-list.outerListItem="${sideNavBean.outerList}">
    <li>${outerListItem}</li>
</ul>
<ul data-sly-list.innerListItem="${sideNavBean.innerList}">
    <li>${innerListItem}</li>
</ul>
<p>-------------------------EXAMPLE 2  (FAILS TO RENDER INNER LOOP)-------------------------</p>
<ul data-sly-list.outerListItem="${sideNavBean.outerList}">
    <li>${outerListItem}
        <ul data-sly-list.innerListItem="${sideNavBean.innerList}">
            <li>${innerListItem}</li>
        </ul>
    </li>
</ul>
<p>-------------------------EXAMPLE 3  (FAILS TO RENDER INNER LOOP)-------------------------</p>
<template data-sly-template.INNER>
    <p>Template for inner</p>
    <ul data-sly-list.innerListItem="${sideNavBean.innerList}">
        <li>${innerListItem}</li>
    </ul>
    <p>Template for inner</p>
</template>
<ul data-sly-list.outerListItem="${sideNavBean.outerList}">
    <li>${outerListItem}
        <div data-sly-call="${INNER}"></div>
    </li>
</ul>

Result produced by HTL and Java above :-

-------------------------EXAMPLE 1 (WORKS)-------------------------
Outer1
Outer2
Outer3
Inner1
Inner2
Inner3
-------------------------EXAMPLE 2 (FAILS TO RENDER INNER LOOP)-------------------------
Outer1
Outer2
Outer3
-------------------------EXAMPLE 3 (FAILS TO RENDER INNER LOOP)-------------------------
Outer1
Template for inner
Template for inner
Outer2
Template for inner
Template for inner
Outer3
Template for inner
Template for inner

Why are examples 2 and 3 not showing the inner loop?

How can I include an inner loop inside an outside loop?

Thanks.

[RobertBailey201]

I have also tried the HTL code below which produces the same result.

Example 1 works.

Examples 2 and 3 only render outer loop and don't render inner loop.

Why are examples 2 and 3 not showing the inner loop?

How can I include an inner loop inside an outside loop?

Thanks.

<p>-------------------------EXAMPLE 1  (WORKS)-------------------------</p>
<ul  data-sly-use.sideNavBean3="${'io.package.SideNav'}"  data-sly-list.outerListItem="${sideNavBean3.outerList}">
    <li>3:${outerListItem}</li>
</ul>
<ul  data-sly-use.sideNavBean4="${'io.package.SideNav'}"  data-sly-list.innerListItem="${sideNavBean4.innerList}">
    <li>4:${innerListItem}</li>
</ul>
<p>-------------------------EXAMPLE 2  (FAILS TO RENDER INNER LOOP)-------------------------</p>
<ul  data-sly-use.sideNavBean3="${'io.package.SideNav'}"  data-sly-list.outerListItem="${sideNavBean3.outerList}">
    <li>3:${outerListItem}
        <ul  data-sly-use.sideNavBean4="${'io.package.SideNav'}"  data-sly-list.innerListItem="${sideNavBean4.innerList}">
            <li>4:${innerListItem}</li>
        </ul>       
    </li>
</ul>
<p>-------------------------EXAMPLE 3  (FAILS TO RENDER INNER LOOP)-------------------------</p>
<template data-sly-template.INNER>
    <p>Template for inner</p>
    <ul  data-sly-use.sideNavBean4="${'io.package.SideNav'}"  data-sly-list.innerListItem="${sideNavBean4.innerList}">
        <li>4:${innerListItem}</li>
    </ul>
    <p>Template for inner</p>
</template>
<ul  data-sly-use.sideNavBean3="${'io.package.SideNav'}"  data-sly-list.outerListItem="${sideNavBean3.outerList}">
    <li>3:${outerListItem}
        <div data-sly-call="${INNER}"></div>
    </li>
</ul>

[arunpatidar]

Hi,

I tried your code with some modification , all examples are working fine.

HTL

<h2>This is a New List </h2>

<sly data-sly-use.sideNavBean="com.aem.community.core.components.OutInList">

<p>-------------------------EXAMPLE 1  (WORKS)-------------------------</p>

<ul data-sly-list.outerListItem="${sideNavBean.outerList}">

    <li>${outerListItem}</li>

</ul>

<ul data-sly-list.innerListItem="${sideNavBean.innerList}">

    <li>${innerListItem}</li>

</ul>

<p>-------------------------EXAMPLE 2  (FAILS TO RENDER INNER LOOP)-------------------------</p>

<ul data-sly-list.outerListItem="${sideNavBean.outerList}">

    <li>${outerListItem}

        <ul data-sly-list.innerListItem="${sideNavBean.innerList}">

            <li>${innerListItem}</li>

        </ul>

    </li>

</ul>

<p>-------------------------EXAMPLE 3  (FAILS TO RENDER INNER LOOP)-------------------------</p>

<template data-sly-template.INNER="${ @ sBean}">

    <p>Template for inner</p>

    <ul data-sly-list.innerListItem="${sBean.innerList}">

        <li>${innerListItem}</li>

    </ul>

    <p>Template for inner</p>

</template>

<ul data-sly-list.outerListItem="${sideNavBean.outerList}">

    <li>${outerListItem}

        <div data-sly-call="${INNER @ sBean = sideNavBean}"></div>

    </li>

</ul>

JAVA

package com.aem.community.core.components;

import java.util.ArrayList;

import java.util.List;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUsePojo;

public class OutInList extends WCMUsePojo{

  private final Logger logger = LoggerFactory.getLogger(getClass());

  @Override

  public void activate() throws Exception {

  // TODO Auto-generated method stub

  }

  public List<String> getOuterList()

  {

      final List<String> outerList = new ArrayList<String>();

      outerList.add("Outer1");

      outerList.add("Outer2");

      outerList.add("Outer3");

      return outerList;

  }

  public List<String> getInnerList()

  {

      final List<String> innerList = new ArrayList<String>();

      innerList.add("Inner1");

      innerList.add("Inner2");

      innerList.add("Inner3");

      return innerList;

  }

}

Thanks

Arun

[RobertBailey201]

Thanks Arun.....

Very strange.....

Does not work on my AEM 6.3 server.    Only displays outer list and does not display inner list.....

[arunpatidar]

Hi,

I tried in 6.3 , works for me.

Can you try my code and check?