Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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.
4 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



Arun Patidar

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?



Arun Patidar