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
Validate 1
Level 2
AD-Engineer
Level 2

Likes

7 likes

Total Posts

13 posts

Correct Reply

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

Avatar
Validate 1
Level 2
AD-Engineer
Level 2

Likes

7 likes

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
Boost 5
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!

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 50
MVP
Vijayalakshmi_S
MVP

Likes

436 likes

Total Posts

574 posts

Correct Reply

191 solutions
Top badges earned
Give Back 50
Give Back 5
Ignite 10
Ignite 5
Ignite 3
View profile

Avatar
Give Back 50
MVP
Vijayalakshmi_S
MVP

Likes

436 likes

Total Posts

574 posts

Correct Reply

191 solutions
Top badges earned
Give Back 50
Give Back 5
Ignite 10
Ignite 5
Ignite 3
View profile
Vijayalakshmi_S
MVP

20-04-2021

Hi @AD-Engineer,

If your custom Model class named com.myproject.core.models.impl.CardImpl implements say, com.adobe.cq.wcm.core.components.models.List then in your HTL -> data-sly-use.list you need to use the interface only. That is com.adobe.cq.wcm.core.components.models.List or any core component interface which you are implementing from. 

Update this and try.

 

In your instance, two implementation of com.adobe.cq.wcm.core.components.models.List will be available (one OOTB + your custom Model), yours will be picked (when you use your component) using the resourceType that you have associated the custom model with (which is the component resource type in @Model annotation) 

 

Additional check : Custom Sling Model implementation should be created considering the Sling Model Delegation Pattern as described here - https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models

Answers (2)

Answers (2)

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

16-04-2021

Avatar

Avatar
Validate 1
Level 6
KiranVedantam1992
Level 6

Likes

150 likes

Total Posts

155 posts

Correct Reply

44 solutions
Top badges earned
Validate 1
Establish
Give Back 3
Give Back
Boost 50
View profile

Avatar
Validate 1
Level 6
KiranVedantam1992
Level 6

Likes

150 likes

Total Posts

155 posts

Correct Reply

44 solutions
Top badges earned
Validate 1
Establish
Give Back 3
Give Back
Boost 50
View profile
KiranVedantam1992
Level 6

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