How to include an HTL list inside an HTL list | Community
Skip to main content
Level 4
July 12, 2018
Question

How to include an HTL list inside an HTL list

  • July 12, 2018
  • 4 replies
  • 2694 views
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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

Level 4
July 12, 2018

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
Community Advisor
Community Advisor
July 12, 2018

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

Arun Patidar
Level 4
July 13, 2018

Thanks Arun.....

Very strange.....

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

arunpatidar
Community Advisor
Community Advisor
July 13, 2018

Hi,

I tried in 6.3 , works for me.

Can you try my code and check?

Arun Patidar