CollectionPage ============== .. granite:servercomponent:: /libs/granite/ui/components/shell/collectionpage The page to render collection pattern. It also supports :doc:`resource filtering using FilteringResourceWrapper ` and acts as its container. It has the following content structure: .. gnd:gnd:: [granite:ShellCollectionPage] /** * A general purpose ID to uniquely identify the console. * * The recommended value is hierarchical separated by "-". * e.g. "cq-commerce-report" */ - consoleId (StringEL) /** * The base title of the page. * * e.g. "AEM Sites" */ - jcr:title (String) /** * 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 (:doc:`[data-foundation-collection-id] `). * * e.g. ``/sites.html{+id}`` */ - pageURITemplate (StringEL) /** * 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. */ - 'pageURITemplate.abs' (StringEL) /** * The value of :doc:`[data-foundation-mode-group] ` * that the collection is part of. */ - modeGroup (String) /** * The selector to the collection. */ - targetCollection (String) /** * The path to the omnisearch configuration associated with the console. * * e.g. ``/libs/granite/omnisearch/content/metadata/site`` */ - omnisearchLocationPath (StringEL) /** * 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. (:doc:`[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``. */ - itemPreviewSrc /** * To redirect the page, this resource can be specified. * It will be included, where the redirect can be performed. */ + redirector /** * A folder to specify the content of ```` of the page. * Its child resources are iterated and included as is. */ + head /** * The folder for the available views (i.e. the rendering) of the collection, * where each can any component implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/vocabulary/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 (:doc:`[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. */ + views mandatory /** * The header area just above the collection view. * Any component can be used here. */ + header /** * The footer area just below the collection view. * Any component can be used here. */ + footer + breadcrumbs /** * 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, :doc:`../title/index` 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")``. */ + title /** * The folder for the actions applicable in the context of the collection. */ + actions (granite:ShellCollectionPageActions) /** * A folder to specify the panels of the rail. */ + rails (granite:ShellCollectionPageRails) [granite:ShellCollectionPageActions] /** * The folder for primary actions. * * The action can be any action component such as :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/button/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/anchorbutton/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/pulldown/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/collection/index`. * * The ``actionBar`` variant of the components above SHOULD be used, unless ``primary`` variant is used. * * Usually the action is implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/collection/action/index`, * with ``relScope`` = ``collection``. * * The actions are wrapped inside :doc:`.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. */ + primary /** * The folder for secondary actions. * * The action can be any action component such as :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/button/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/anchorbutton/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/pulldown/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/collection/index`. * * The ``actionBar`` variant of the components above SHOULD be used, unless ``primary`` variant is used. * * Usually the action is implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/collection/action/index`, * with ``relScope`` = ``collection``. * * The actions are wrapped inside :doc:`.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 actions applicable during selection mode. (e.g. when one of the collection item is selected) * * The action can be any action component such as :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/button/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/anchorbutton/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/pulldown/index`, * :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/collection/index`. * * The ``actionBar`` variant of the components above SHOULD be used, unless ``primary`` variant is used. * * Usually the action is implementing :doc:`/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/collection/action/index`, * with ``relScope`` = ``item``. * * The actions are wrapped inside :doc:`.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 [granite:ShellCollectionPageRails] /** * ``true`` to activate the rail initially. * * Note that you need to also set ``active`` property of the rail panel to ``true`` accordingly. */ - active (BooleanEL) /** * The child resources are considered as the panels, where each MUST be a :doc:`../../coral/foundation/panel/railpanel/index` (or its derivative). */ + '*' (granite:PanelRailPanel) 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}"