Listv3

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.

Examples

Built from Child Pages

List built from child pages of a root page. In this example the depth is 1 level but deeper structures can be configured.

  • Adaptive Form - Embed
  • Accordion
  • Button
  • Carousel
  • Container
  • Content Fragment
  • Content Fragment List
  • Core Form Container
  • Download
  • Embed
  • Experience Fragment
  • Image
  • List
  • PDF Viewer
  • Progress Bar
  • Search
  • Separator
  • Tabs
  • Teaser
  • Text
  • Title 
    
    

    
  1. 
        showModificationDate:
        false
    
    2. 

    
  2. 
        linkItems:
        false
    
    3. 

    
  3. 
        parentPage:
        /content/core-components-examples/library/core-content
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        showDescription:
        false
    
    6. 

    
  6. 
        sling:resourceType:
        core-components-examples/components/list
    
    7. 

    
  7. 
        childDepth:
        1
    
    8. 

    
  8. 
        listFrom:
        children
    
    9.

Built from Fixed List with External Links

List built from a bespoke set of pages and external URLs defined directly in the component edit dialog.

  • Carousel
  • Teaser
  • http://www.adobe.com
  • Component Library 
    
    

    
  1. 
        sortOrder:
        asc
    
    2. 

    
  2. 
        sling:resourceType:
        core-components-examples/components/list
    
    3. 

    
  3. 
        listFrom:
        static
    
    4.

Built from Search

List built from a search query term under a defined root page.

  • Carousel
  • Category Carousel
  • Product Carousel
  • Related Products 
    
    

    
  1. 
        showModificationDate:
        false
    
    2. 

    
  2. 
        tagsMatch:
        any
    
    3. 

    
  3. 
        linkItems:
        false
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        query:
        Carousel
    
    6. 

    
  6. 
        showDescription:
        false
    
    7. 

    
  7. 
        searchIn:
        /content/core-components-examples/library
    
    8. 

    
  8. 
        sling:resourceType:
        core-components-examples/components/list
    
    9. 

    
  9. 
        childDepth:
        1
    
    10. 

    
  10. 
        listFrom:
        search
    
    11.

Built from Tags

List built from a set of tags to be found related to pages under a root page. Uses the default match Any tag feature, but it's also possible to configure the component to match all tags.

  • Teaser
  • Image
  • Experience Fragment
  • Text
  • Separator
  • List
  • Download
  • Content Fragment List
  • Embed
  • Content Fragment
  • Button 
    
    

    
  1. 
        showModificationDate:
        false
    
    2. 

    
  2. 
        tagsMatch:
        any
    
    3. 

    
  3. 
        linkItems:
        false
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        tagsSearchRoot:
        /content/core-components-examples/library
    
    6. 

    
  6. 
        tags:
        core-components-examples:component-type/page-authoring
    
    7. 

    
  7. 
        showDescription:
        false
    
    8. 

    
  8. 
        sling:resourceType:
        core-components-examples/components/list
    
    9. 

    
  9. 
        childDepth:
        1
    
    10. 

    
  10. 
        listFrom:
        tags
    
    11.

Order

List built from child pages, with the sort order set to order by title, descending. It is also possible to order by the last modified date.

  • Title
  • Text
  • Teaser
  • Tabs
  • Separator
  • Search
  • Progress Bar
  • PDF Viewer
  • List
  • Image
  • Experience Fragment
  • Embed
  • Download
  • Core Form Container
  • Content Fragment List
  • Content Fragment
  • Container
  • Carousel
  • Button
  • Adaptive Form - Embed
  • Accordion 
    
    

    
  1. 
        showModificationDate:
        false
    
    2. 

    
  2. 
        linkItems:
        false
    
    3. 

    
  3. 
        orderBy:
        title
    
    4. 

    
  4. 
        parentPage:
        /content/core-components-examples/library/core-content
    
    5. 

    
  5. 
        sortOrder:
        desc
    
    6. 

    
  6. 
        showDescription:
        false
    
    7. 

    
  7. 
        sling:resourceType:
        core-components-examples/components/list
    
    8. 

    
  8. 
        childDepth:
        1
    
    9. 

    
  9. 
        listFrom:
        children
    
    10.

Max Items

List with the maximum number of items set to 4.

  • Adaptive Form - Embed
  • Accordion
  • Button
  • Carousel 
    
    

    
  1. 
        showModificationDate:
        false
    
    2. 

    
  2. 
        linkItems:
        false
    
    3. 

    
  3. 
        parentPage:
        /content/core-components-examples/library/core-content
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        maxItems:
        4
    
    6. 

    
  6. 
        showDescription:
        false
    
    7. 

    
  7. 
        sling:resourceType:
        core-components-examples/components/list
    
    8. 

    
  8. 
        childDepth:
        1
    
    9. 

    
  9. 
        listFrom:
        children
    
    10.

Items with Link, Description and Date

The rendering of the list items can be configured to optionally display a link to the page, page description and last modified date.

    
    

    
  1. 
        showModificationDate:
        true
    
    2. 

    
  2. 
        linkItems:
        true
    
    3. 

    
  3. 
        parentPage:
        /content/core-components-examples/library/core-content
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        showDescription:
        true
    
    6. 

    
  6. 
        sling:resourceType:
        core-components-examples/components/list
    
    7. 

    
  7. 
        childDepth:
        1
    
    8. 

    
  8. 
        listFrom:
        children
    
    9.

Items displayed as Teasers

The rendering of the list items can be configured to optionally display the items as teasers.

    
    

    
  1. 
        showModificationDate:
        true
    
    2. 

    
  2. 
        linkItems:
        true
    
    3. 

    
  3. 
        parentPage:
        /content/core-components-examples/library/core-content
    
    4. 

    
  4. 
        sortOrder:
        asc
    
    5. 

    
  5. 
        displayItemAsTeaser:
        true
    
    6. 

    
  6. 
        maxItems:
        3
    
    7. 

    
  7. 
        showDescription:
        true
    
    8. 

    
  8. 
        sling:resourceType:
        core-components-examples/components/list
    
    9. 

    
  9. 
        childDepth:
        1
    
    10. 

    
  10. 
        listFrom:
        children
    
    11.

Built with Core Components 2.27.0.