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

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
SOLVED

parsys included in nested loop is not working, though looping is working fine

Avatar

Level 3

Hi All,

 

I need to add parsys in nested loop in sightly.

 

code snippet:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/>
<div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div>
<div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel">
<div class="row">
<div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'};">
<ul data-sly-list.level1="${stickyLeftNav.level1}">
<li>Title of level1: ${level1.titleLevel1}</li>
<ul data-sly-list.level="${level1.level2}">
<li>Title of Level 2: ${level.titleLevel2}</li>
</ul>
</ul>
</div>
<div class="column right" style="background-color:cyan" >
<ul data-sly-list.level1="${stickyLeftNav.level1}">
<li>Title of level1: ${level1.titleLevel1}
<sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly>
</li>
<ul data-sly-list.level="${level1.level2}">
<li>Title of Level 2: ${level.titleLevel2}
<sly data-sly-resource="${'items{0}' @ format=levelList.count, resourceType='wcm/foundation/components/parsys'}"></sly>
</li>
</ul>
</ul>
</div>
</div>
</div>

screenshot_issue.JPG

 

Unable to get parsys in Title of Level 2:A and Title of Level 2:B

Many Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @annkitaaggarwal,

Nested list shares the same name for the parsys of both the items (Migration and Distributed work in this case)

Highlighted in bold is the cause, It should be unique.

  • item1
    • items1
    • items2
  • item2
    • items1
    • items2

Provide some unique name to the same, something like below will produce the resource name as A-items1, B-items2, C-items1, D-items2

Have used "title", you can amend the code based on your need such that it frames as unique identifier. 

<sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly>

Updated code: Amended on top of the snippet shared

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/>
<div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div>
<div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel">
    <div class="row">
        <div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'}">
        <ul data-sly-list.level1="${stickyLeftNav.level1}">
            <li>Title of level1: ${level1.titleLevel1}</li>
            <ul data-sly-list.level="${level1.level2}">
                <li>Title of Level 2: ${level.titleLevel2}</li>
            </ul>
        </ul>
        </div>
        <div class="column right" style="background-color:cyan" >
        <ul data-sly-list.level1="${stickyLeftNav.level1}">
            <li>Title of level1: ${level1.titleLevel1}
                <sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly>
            </li>
            <ul data-sly-list.level="${level1.level2}">
                <li>Title of Level 2: ${level.titleLevel2}
                    <sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly>
                </li>
            </ul>
        </ul>
        </div>
    </div>
</div>

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @annkitaaggarwal,

Nested list shares the same name for the parsys of both the items (Migration and Distributed work in this case)

Highlighted in bold is the cause, It should be unique.

  • item1
    • items1
    • items2
  • item2
    • items1
    • items2

Provide some unique name to the same, something like below will produce the resource name as A-items1, B-items2, C-items1, D-items2

Have used "title", you can amend the code based on your need such that it frames as unique identifier. 

<sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly>

Updated code: Amended on top of the snippet shared

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories='test.stickyleftnav'}"/>
<div data-sly-test="${wcmmode.edit}" class="cq-placeholder section" data-emptytext="Sticky Left Navigation"></div>
<div data-sly-use.stickyLeftNav = "test.core.models.StickyLeftNavigationModel">
    <div class="row">
        <div class="column left" style="background-color:${properties.backgroundColor@ context='styleToken'}">
        <ul data-sly-list.level1="${stickyLeftNav.level1}">
            <li>Title of level1: ${level1.titleLevel1}</li>
            <ul data-sly-list.level="${level1.level2}">
                <li>Title of Level 2: ${level.titleLevel2}</li>
            </ul>
        </ul>
        </div>
        <div class="column right" style="background-color:cyan" >
        <ul data-sly-list.level1="${stickyLeftNav.level1}">
            <li>Title of level1: ${level1.titleLevel1}
                <sly data-sly-resource="${'item{0}' @ format=level1List.count, resourceType='wcm/foundation/components/parsys'}"></sly>
            </li>
            <ul data-sly-list.level="${level1.level2}">
                <li>Title of Level 2: ${level.titleLevel2}
                    <sly data-sly-resource="${'{0}-items{1}' @ format=[level.titleLevel2, levelList.count], resourceType='wcm/foundation/components/parsys'}"></sly>
                </li>
            </ul>
        </ul>
        </div>
    </div>
</div>