Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

How to include an HTL list inside an HTL list

Avatar

Level 4
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.
0 Replies

Avatar

Level 4

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>

Avatar

Community Advisor

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;

  }

}

Screen Shot 2018-07-12 at 10.48.44 PM.png

Thanks

Arun

Avatar

Level 4

Thanks Arun.....

Very strange.....

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

Avatar

Community Advisor

Hi,

I tried in 6.3 , works for me.

Can you try my code and check?