Extend List Component | Community
Skip to main content
AD-Engineer
Level 3
Apr 16, 2021 11:51 AM UTC
Solved

Extend List Component

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.

I would really appreciate your help on this. Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Vijayalakshmi_S
Vijayalakshmi_SAccepted solution
Level 10
Apr 20, 2021 2:36 PM UTC

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

View reply

4 replies

Vijayalakshmi_S
Vijayalakshmi_SAccepted solution
Level 10
Apr 20, 2021 2:36 PM UTC

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

Translate
    Daniel_Gordon
    Daniel_Gordon
    Employee
    Apr 16, 2021 3:58 PM UTC

    There is an example of a similar implementation on the WKND Reference Site https://wknd.site/us/en.html called an Image List:

     

     

    Component:

    https://github.com/adobe/aem-guides-wknd/tree/master/ui.apps/src/main/content/jcr_root/apps/wknd/components/image-list

     

    Java Interface:

    https://github.com/adobe/aem-guides-wknd/blob/master/core/src/main/java/com/adobe/aem/guides/wknd/core/models/ImageList.java

     

    Sling Model:

    https://github.com/adobe/aem-guides-wknd/blob/master/core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/ImageListImpl.java

     

    Translate
      AD-EngineerAuthor
      Level 3
      Apr 17, 2021 9:18 AM UTC
      Thanks for your answer. I tried this too. But the same issue, even though I just copy-paste the code. It is like my Java Model is not being called at all.
      Translate
        Kiran_Vedantam
        Kiran_Vedantam
        New Participant
        Apr 16, 2021 1:03 PM UTC

        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

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...