CollectionPage

/libs/granite/ui/components/shell/collectionpage

The page to render collection pattern.

It also supports resource filtering using FilteringResourceWrapper and acts as its container.

It has the following content structure:

granite:ShellCollectionPage
consoleIdstringel

A general purpose ID to uniquely identify the console.

The recommended value is hierarchical separated by “-“. e.g. “cq-commerce-report”

jcr:titlestring

The base title of the page.

e.g. “AEM Sites”

pageURITemplatestringel

The URI Template of the page. It is used to generate the new URL when navigating the collection.

It supports the following variables:

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

e.g. /sites.html{+id}

pageURITemplate.absstringel

This property is the equivalence of pageURITemplate for absolute path.

For example if your template is {+id}.html, since it is not starting with “/”, the server is unable to know if it is an absolute path. So use this property if you want to add the context path regardless.

modeGroupstring

The value of [data-foundation-mode-group] that the collection is part of.

targetCollectionstring

The selector to the collection.

omnisearchLocationPathstringel

The path to the omnisearch configuration associated with the console.

e.g. /libs/granite/omnisearch/content/metadata/site

itemPreviewSrc

The URI Template of the preview of the selected items. If this property is specified, an additional preview container is added.

It supports the following variables:

item
The id of the selected item. ([data-foundation-collection-item-id]) Note that this variable can be a list of items.

For example, if item = ("item1", "item2") and itemPreviewSrc = /preview{?item*}, the final URI will be /preview?item=item1&item=item2.

redirector

To redirect the page, this resource can be specified. It will be included, where the redirect can be performed.

head

A folder to specify the content of <head> of the page. Its child resources are iterated and included as is.

views
mandatory

The folder for the available views (i.e. the rendering) of the collection, where each can any component implementing foundation-collection.

At least one view needs to be provided. If there are at least two views, the following properties are needed to be able to switch the view:

icon (String)
The icon of the view.
jcr:title (String)
The title of the view.
src (StringEL)

The URI Template that is returning the HTML response of the new view. 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]).

View Settings

Each view is able to provide settings related to that view. To do this, settings component needs to be specified. The component can be a container that contains the form fields representing the settings. The form will be automatically generated, and the settings are saved in the user preferences.

header

The header area just above the collection view. Any component can be used here.

footer

The footer area just below the collection view. Any component can be used here.

breadcrumbs
title

The component to render the title.

Either this resource or breadcrumbs needs to be specified. Use this resource instead of breadcrumbs when your resource is flat (not hierarchical). If neither is specified, the value of jcr:title is used.

If the title is just a simple string, Title can be used.

The only requirement of the component is to generate a simple text without any wrapping markup. E.g. To have a title of “My Page”, just make the component do something like out.print("My Page").

actions
  1. granite:ShellCollectionPageActions

The folder for the actions applicable in the context of the collection.

rails
  1. granite:ShellCollectionPageRails

A folder to specify the panels of the rail.

granite:ShellCollectionPageActions
primary

The folder for primary actions.

The action can be any action component such as Button, AnchorButton, Pulldown, Collection.

The actionBar variant of the components above SHOULD be used, unless primary variant is used.

Usually the action is implementing foundation-collection-action, with relScope = collection.

The actions are wrapped inside .foundation-collection-actionbar element where [data-foundation-collection-actionbar-target] is set as the value of targetCollection property. This way setting the target property at individual action is not required.

secondary

The folder for secondary actions.

The action can be any action component such as Button, AnchorButton, Pulldown, Collection.

The actionBar variant of the components above SHOULD be used, unless primary variant is used.

Usually the action is implementing foundation-collection-action, with relScope = collection.

The actions are wrapped inside .foundation-collection-actionbar element where [data-foundation-collection-actionbar-target] is set as the value of targetCollection property. This way setting the target property at individual action is not required.

selection

The folder for actions applicable during selection mode. (e.g. when one of the collection item is selected)

The action can be any action component such as Button, AnchorButton, Pulldown, Collection.

The actionBar variant of the components above SHOULD be used, unless primary variant is used.

Usually the action is implementing foundation-collection-action, with relScope = item.

The actions are wrapped inside .foundation-collection-actionbar element where [data-foundation-collection-actionbar-target] is set as the value of targetCollection property. This way setting the target property at individual action is not required.

granite:ShellCollectionPageRails
activebooleanel

true to activate the rail initially.

Note that you need to also set active property of the rail panel to true accordingly.

*
  1. granite:PanelRailPanel

The child resources are considered as the panels, where each MUST be a RailPanel (or its derivative).

Example:

+ /apps/my/page
  - sling:resourceType = "granite/ui/components/shell/collectionpage"
  - jcr:title = "AEM Sites"
  - modeGroup = "cq-siteadmin-admin-childpages"
  - pageURITemplate = "/sites.html{+id}"
  - targetCollection = "#cq-siteadmin-admin-childpages"
  + views
    + card
      - sling:resourceType = "my/card"
      - granite:id = "cq-siteadmin-admin-childpages"
      - icon = "viewCard"
      - jcr:title = "Card View"
      - modeGroup = "cq-siteadmin-admin-childpages"
      - src = "/mnt/overlay/my/page/views/card{.offset,limit}.html{+id}"
      - offset = "${requestPathInfo.selectors[0]}"
      - limit = "${empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}"
      - path = "${requestPathInfo.suffix}"
      + settings
        - sling:resourceType = "granite/ui/components/coral/foundation/container"
        + items
          + field1
            - sling:resourceType = "my/field"
          + field2
            - sling:resourceType = "my/field"
    + list
      - sling:resourceType = "my/list"
      - granite:id = "cq-siteadmin-admin-childpages"
      - icon = "viewList"
      - jcr:title = "List View"
      - modeGroup = "cq-siteadmin-admin-childpages"
      - src = "/mnt/overlay/my/page/views/list{.offset,limit}.html{+id}"
      - offset = "${requestPathInfo.selectors[0]}"
      - limit = "${empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}"
      - path = "${requestPathInfo.suffix}"