ListView

/libs/granite/ui/components/foundation/layouts/listview

The layout to render the items as a list. It implements foundation-selections vocabulary.

It has the following content structure at the layout resource:

granite:LayoutsListView

srcstringel

The URI Template that is returning the HTML response for pagination. It supports the following variables:

offset

The item offset of the current request.

limit

The item limit of the pagination.

id

The id of the collection ([data-foundation-collection-id]).

e.g. /a/b/c{.offset,limit}.html{+id}

pathstringel

The path of the current collection. It will act as the value of [data-foundation-collection-id].

e.g. ${requestPathInfo.suffix}

itemResourceTypestring

The resource type for each item.

maximizedboolean

true to expand the layout to its parent container; false otherwise.

limitlong

The item limit of the pagination.

stateIdstring

The id of the client-side state for this layout.

The following state is saved:

The active layout

See layoutId property.

layoutIdstring

The name associated with this layout.

The client-side state with key <stateId>.layoutId will have the value of this name.

This is useful when MultiLayouts is used, so that when the user refreshes the browser, the active layout can be restored by the MultiLayouts.

It will only be effective when stateId property is set.

itempropstring

The itemprop attribute of each item.

headers

1. granite:LayoutsListViewHeaders

The headers of the list.

granite:LayoutsListViewHeaders

class

The class attribute.

selectableboolean

Indicates if the checkbox to select/deselect all the list items is shown.

The items of the layout are specified using ItemDataSource.

Example:

+ mylist
  - sling:resourceType = "granite/ui/components/foundation/container"
  + layout
    - sling:resourceType = "granite/ui/components/foundation/layouts/listview"
    - stateId = "cq.sites.childpages"
    - layoutId = "list"
    - src = "/a/b/c{.offset,limit}.html"
  + headers
    - selectable = true
    + col1
    + col2
    + col3
  + datasource
    - sling:resourceType = "my/datasource"