4 Replies Latest reply on Jul 13, 2018 2:57 AM by Arun Patidar

    How to include an HTL list inside an HTL list

    RobertBailey2017 Level 1
      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.
        • 1. Re: How to include an HTL list inside an HTL list
          RobertBailey2017 Level 1

          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>
          
          • 2. Re: How to include an HTL list inside an HTL list
            Arun Patidar Level 4

            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

            • 3. Re: How to include an HTL list inside an HTL list
              RobertBailey2017 Level 1

              Thanks Arun.....

               

              Very strange.....

               

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

              • 4. Re: How to include an HTL list inside an HTL list
                Arun Patidar Level 4

                Hi,

                I tried in 6.3 , works for me.

                Can you try my code and check?