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
- granite:commonAttrs
- granite:renderCondition
- granite:container
-
selectionModebooleanel
- true
true
to enable the selection of item;false
otherwise.
-
selectionCountstringel
- 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 therootPath
;false
otherwise.
- showRootboolean
true
to also render a special column for the root resource whenpath == 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 istrue
, whenpath == 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
- /
The path of the root column.
- itemResourceTypestring
The resource type for each item of the column.
-
limitlong
- 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 fetchsize + 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 ofsize
!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
orselection
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.
-
selectionModebooleanel
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"
-
granite:ColumnView