Sightly: Include multiple components of the same type in a loop. | Community
Skip to main content
Anonymous
Oct 16, 2015 2:27 AM UTC
Solved

Sightly: Include multiple components of the same type in a loop.

I need to create multiple instances of the same component in a loop based on how many items are in a list. This was easily accomplished in jsp's but in sightly I am not finding a way to do this. In a jsp I would do a cq:include and if the path had the same name it would append a count on the end. Below is an example of my sightly component but need some advice on how to do this correctly. An example of what would be in the row.columnList would be {6,3,3}

<div data-sly-use.row="com.my.aem.components.view.models.MyRowComponent" data-sly-unwrap> <p data-sly-test="${!row.columns}">Please configure row</p> <div class="row"> <div data-sly-list="${row.columnList}" class="pod-grid container-fluid"> <div class="col-md-${item}"> <div data-sly-resource="${'testcomponent' @ resourceType='my/components/content/pods/testcomponent' }"></div> </div> </div> </div> </div>

Any help would be appreciated

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Feike_Visser1
Feike_Visser1Accepted solution
Employee
Oct 16, 2015 2:27 AM UTC

try this...

  1. <div data-sly-list="${row.columnList}" class="pod-grid container-fluid">
      <div class="col-md-${item}" data-sly-test.newPath="${    'testcomponent{0}' @ format = itemList.index}">
  2.   <!-- newPath... ${newPath} -->
  3. <div data-sly-resource="${ newPath @ resourceType='my/components/content/pods/testcomponent' }"></div>
  4. </div>
  5. </div>

​

with data-sly-test and @ format you can declare a local-var and concatenate Strings.

View reply

4 replies

Siva_Chanduluri
New Participant
Jan 24, 2018 4:49 PM UTC

Hi,

After including the multiple components of the same type in a loop as suggested the above approach, those components are not reorder-able, is there some config which enables them to reoder like other components, using AEM6.3 with SP1.

Translate
Feike_Visser1
Feike_Visser1Accepted solution
Employee
Oct 16, 2015 2:27 AM UTC

try this...

  1. <div data-sly-list="${row.columnList}" class="pod-grid container-fluid">
      <div class="col-md-${item}" data-sly-test.newPath="${    'testcomponent{0}' @ format = itemList.index}">
  2.   <!-- newPath... ${newPath} -->
  3. <div data-sly-resource="${ newPath @ resourceType='my/components/content/pods/testcomponent' }"></div>
  4. </div>
  5. </div>

​

with data-sly-test and @ format you can declare a local-var and concatenate Strings.

Translate
Anonymous
Oct 16, 2015 2:27 AM UTC

This works awesome! I didn't realize that you could set variables using the data-sly-test. Thanks for the help.

Translate
Feike_Visser1
Feike_Visser1
Employee
Oct 16, 2015 2:27 AM UTC

thanks for the feedback. No JSP anymore please :-)

Translate
Terms & ConditionsAccessibility statement

Loading footer...