ColumnView

/libs/granite/ui/components/coral/foundation/columnview

A Miller columns component.

It implements foundation-selections and foundation-mode vocabulary.

Note that this component’s size is maximized to its parent OOTB. Hence it doesn’t make sense if this component has a sibling component, as it will take the whole parent’s space.

It has the following content structure:

granite:ColumnView
  1. granite:commonAttrs
  2. granite:renderCondition
  3. granite:container
selectionModebooleanel
  1. true

true to enable the selection of item; false otherwise.

selectionCountstringel
  1. multiple

The count of item to be selected (when the selectionMode is enabled):

single
Only maximum single selection allowed
multiple
Zero or more selection allowed
srcstringel

The URI Template that is returning the HTML response of the column view. It is used when the client needs to load data dynamically, such as for pagination.

Note that only the items of the current column are rendered using the provided item datasource. The items of the ancestors columns are loaded lazily in different requests.

If it is not specified, the feature is disabled.

It supports the following variables:

offset
The item offset of the current request.
limit
The item limit of the pagination.
id
The path of the target column.
pathstringel

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

e.g. ${requestPathInfo.suffix}

loadAncestorsboolean

true to also load the ancestors of the current columns up to the rootPath; false otherwise.

showRootboolean

true to also render a special column for the root resource when path == rootPath; false otherwise. This special column is used to allow the user to select the root path.

Say you set path = /, this component by default will render a column containing the items of that path (e.g. /apps, /etc). When this property is true, when path == rootPath, this component will also render a column containing a single item representing the root. In other words it will render two columns; first, the special root column; second, the normal column.

It can be illustrated with the following visualization:

When showRoot = false, path = /, rootPath = /:

+------+
| apps |
| etc  |
| home |
| libs |
+------+

When showRoot = true, path = /, rootPath = /:

+-----+------+
|  /  | apps |
|     | etc  |
|     | home |
|     | libs |
+-----+------+

When rendering the root resource for the item in the special column, this component will also honor the itemResourceType property.

rootPathstringel
  1. /

The path of the root column.

itemResourceTypestring

The resource type for each item of the column.

limitlong
  1. 40

The item limit of the pagination.

sizeintegerel

Indicates the size of the items from datasource to be included. If this property is not specified, then all items from datasource will be included, and the next page will be fetched accordingly.

This is meant to be a performance optimization to avoid fetching the next page unnecessarily. For example given the fact that the size is set to 20, and the datasource is configured to fetch size + 1, which is 21, the implementation can check if the datasource actually has more item or not just by checking its size.

Warning

When size is set, you have to make sure your datasource is configured to fetch more than the value of size!

size Actual DS Size Has More?
20 < 20 false
20 = 20 false
20 > 20 true
(not set) n/a true
previewSrcstringel

The URI Template that is returning the HTML response for the preview of an item.

It supports the following variables:

id
The id/path of the item.
previewMaximizedboolean

true to render the preview column maximized to the available space; false otherwise.

Note that if you enable this, it generally works well visually only when you have one and only one column (beside the preview column) in the column view.

metaResourceTypestring

The resource type to render .foundation-collection-meta.

The resource specified at path will be included using this resource type, where it can be processed accordingly.

modeGroupstring

The value of [data-foundation-mode-group].

modeGroupstring

The value of [data-foundation-mode-group] this component participates.

The component supports the default or selection mode.

When there is a selection, it will trigger the foundation-mode-change event with mode = selection, while triggering the event with mode = default when there is no selection.

When other component triggers the event with mode = default, it will react by clearing the selection.

Example:

+ mycolumnview
  - sling:resourceType = "granite/ui/components/coral/foundation/columnview"
  - src = "/a/b/c{.offset,limit}.html{+id}"
  - previewSrc = "/a/b/c.preview.html{+id}"
  - path = "${requestPathInfo.suffix}"
  - loadAncestors = true
  - rootPath = "/content"
  + datasource
    - sling:resourceType = "my/datasource"