List

Component Information

Component Title List
Description List can be used to display a list of pages. They can be defined either dynamically - by search query, tags or from a parent page - or as a static list of items.
Features
  • Multiple sources:
    • List page children
    • List tagged items
    • List query result
    • List static items
  • Ordering and limit
  • Styles
Location /apps/ehi-core/aem65/components/content/list/v1/list
sling:resourceSuperType core/wcm/components/list/v2/list
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The List component uses the com.adobe.cq.wcm.core.components.models.List Sling model as its Use-object.

 

Client Libraries

The component provides a core.wcm.components.list.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

BEM Description

BLOCK cmp-list
ELEMENT cmp-list__item
ELEMENT cmp-list__item-link
ELEMENT cmp-list__item-title
ELEMENT cmp-list__item-date

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Component Policy Configuration Properties

The following configuration properties are used:

  1. ./dateFormat - defines the formatting string for when the list items are set to render their last modification date;
  2. ./disableChildren - allows to disable the ability to build a list from the child pages of a root page
  3. ./disableStatic - allows to disable the ability to build a list with static elements
  4. ./disableSearch - allows to disable the ability to build a list using search results
  5. ./disableTags - allows to disable the ability to build a list using the tagged child pages of a root page

Note: Items that are selected in Item settings will be the only items displayed to the author and will be selected by default in the edit configuration dialog.

Policy Configuration Visual

Edit Dialog Properties

The following properties are written to JCR for this List component and are expected to be available as Resource properties:

  1. ./listFrom - defines the source of this List; possible values:
  • children - the list is built from the child pages of a root page
  • static - the list is built from a statically defined collection of pages
  • search - the list is built from the search results of a query
  • tags - the list is built from the tagged children pages of a root page
  1. ./parentPage - defines the root page when the ./listFrom property is set to children
  2. ./childDepth - defines the max depth for children pages, when the ./listFrom property is set to children
  3. ./pages - defines the pages to be rendered, when the ./listFrom property is set to static
  4. ./query - defines the search query, when the ./listFrom property is set to search
  5. ./searchIn - defines where to start the search, when the ./listFrom property is set to search
  6. ./tagsSearchRoot - defines the root path of the tag search, when the ./listFrom property is set to tags
  7. ./tags - defines the tags list to search for, when the ./listFrom property is set to tags
  8. ./tagsMatch - defines if the results of the tag search have to match all tags or just some of them, when the ./listFrom property is set to tags; possible values: any and all
  9. ./orderBy - defines what criterion is used for ordering the list items: the item's title or the last modification date of the item; possible values: title, modified
  10. ./sortOrder - defines the sorting order; possible values: asc, desc
  11. ./maxItems - defines the maximum number of items rendered by the list
  12. ./linkItems - if set to true the list will link all items to the corresponding pages
  13. ./showDescription - if set to true each item's description will be rendered
  14. ./showModificationDate - if set to true each item's last modification date will be rendered
  15. ./showCTA - show CTA of the link item
  16. ./showTitle - Show title of the link item
  17. ./showSubtitle - Show subtitle of the link item

Edit Dialog Visual

Component Demo

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        showModificationDate:
        true
    
    3. 

  3. 
        jcr:createdBy:
        E524Z2
    
    4. 

  4. 
        showTitle:
        true
    
    5. 

  5. 
        tagsMatch:
        any
    
    6. 

  6. 
        linkItems:
        true
    
    7. 

  7. 
        orderBy:
        title
    
    8. 

  8. 
        jcr:lastModifiedBy:
        E364WW
    
    9. 

  9. 
        jcr:created:
        
    
    10. 

  10. 
        parentPage:
        /content/martech/component-library
    
    11. 

  11. 
        sortOrder:
        asc
    
    12. 

  12. 
        showDescription:
        true
    
    13. 

  13. 
        jcr:lastModified:
        
    
    14. 

  14. 
        sling:resourceType:
        ehi-core/aem65/components/content/list/v1/list
    
    15. 

  15. 
        childDepth:
        1
    
    16. 

  16. 
        listFrom:
        children
    
    17. 

  17. 
        showSubtitle:
        true
    
    18. 

  18. 
        showCta:
        true
    
    19. 




    
        

    




    



    

    


    JSON


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.