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
BedrockMission!

Learn More

View all

Sign in to view all badges

Extend List Component

Avatar

Avatar
Boost 10
Level 2
AD-Engineer
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Boost 10
Validate 1
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Boost 10
Level 2
AD-Engineer
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Boost 10
Validate 1
Ignite 1
Give Back 3
Give Back
View profile
AD-Engineer
Level 2

16-04-2021

Hi,

We are trying to extend List component, and add a showThumbnail option - to show page thumbnail on each item.

This is Card.html - modified from list.html.

 

  <ul data-sly-use.list="com.myproject.core.models.impl.CardImpl"
  data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
  data-sly-use.template="myproject-aem/components/commons/templates.html"
  data-sly-use.itemTemplate="item.html"
  data-sly-list.item="${list.listItems}"
  id="${component.id}"
  data-cmp-data-layer="${list.data.json}"
  class="cmp-list">
  <li class="cmp-list__item" data-sly-call="${itemTemplate.item @ list = list, item = item}"
      data-cmp-data-layer="${item.data.json}"></li>
</ul>
<sly data-sly-call="${template.placeholder @ isEmpty=list.listItems.size == 0, classAppend='cmp-list'}"></sly>

 

When I change data-sly-use.list - to my Model that implements List the Card component in AEM does not show.

card comp.PNG

I would really appreciate your help on this. Thanks!

View Entire Topic

Avatar

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

174 likes

Total Posts

183 posts

Correct Reply

55 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

174 likes

Total Posts

183 posts

Correct Reply

55 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile
KiranVedantam1992
Level 7

16-04-2021

Hi @AD-Engineer,

 

What error are you getting? How are you overlay the core List component?

 

Try using a sling delegation pattern to overlay the core components logic to add your custom code. An example is here.

 

Hope this helps.

 

Thanks,

Kiran Vedantam