Picker

/libs/granite/ui/components/coral/foundation/picker

The component to render the picker dialog.

It implements foundation-picker vocabulary.

It has the following content structure:

granite:Picker
jcr:titlestring

The title of the picker.

e.g. “Select Path”

modeGroupstring

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

This property is required to be set when actions/selection is set.

targetCollectionstring

The selector to the collection.

pathstringel

The path representing the current location of the picker.

This path will be used as the starting location to generate the breadcrumbs up to rootPath.

If this property is not specified or null then the breadcrumbs is not generated.

rootPathstringel
  1. /

The path representing the root location of the picker.

This path will be used as the root location to generate the breadcrumbs.

selectionCountstringel
  1. multiple

The count of item to be selected:

single
Only maximum single selection allowed
multiple
Zero or more selection allowed
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]).
search
  1. granite:PickerSearch

A folder to configure search feature.

actions
  1. granite:PickerActions

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

granite:PickerSearch
namestring

The name attribute for the main text field of the search.

e.g. “fulltext”

targetCollectionstring

The selector to the search result collection.

form

The folder containing the form fields. These fields are in addition to the main text field of the search.

The HTML form will be setup if this resource is specified. The form’s action is set to Text.escapePath(resource.getPath()) + ".result." + selectionCount + ".html", which means that the search handler are given two request selectors: result and the value of selectionCount. The form values would be sent as form request body as usual.

views
mandatory

The folder for the available views (i.e. the rendering) of the search result 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.
granite:PickerActions
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.

Example:

+ /apps/my/picker
  - sling:resourceType = "granite/ui/components/coral/foundation/picker"
  - jcr:title = "Select Path"
  - targetCollection = "#example-pathfield-collection"
  - path = "${requestPathInfo.suffix}"
  - rootPath = "/content"
  - selectionCount = "single"
  + views
    + column
      - sling:resourceType = "granite/ui/components/coral/foundation/columnview"
      - granite:id = "example-pathfield-collection"
      - jcr:title="Column View"
      - icon = "viewColumn"
      - limit = 40
      - size = '${empty requestPathInfo.selectors[1] ? "40" : requestPathInfo.selectors[1]}'
      - loadAncestors = true
      - path = "${requestPathInfo.suffix}"
      - rootPath = "/content"
      - selectionCount = "single"
      - src = "/apps/my/picker/views/column{.offset,limit}.html{+id}">
      + datasource
        - sling:resourceType = "example/datasources/children"
        - itemResourceType = "example/columnitem"
        - offset = "${requestPathInfo.selectors[0]}"
        - limit = '${empty requestPathInfo.selectors[1] ? "41" : requestPathInfo.selectors[1] + 1}'
        - path = "${requestPathInfo.suffix}"
  + search
    - name = "fulltext"
    - targetCollection = "#example-pathfield-search-collection"
    + form
      + rootpath
        - sling:resourceType = "granite/ui/components/coral/foundation/form/textfield"
        - fieldLabel = "Path"
        - name = "path"
        - value = "/content"
      + orderby
        - sling:resourceType = "granite/ui/components/coral/foundation/form/hidden"
        - name = "orderby"
        - value = "@jcr:score"
      + orderby.sort
        - sling:resourceType = "granite/ui/components/coral/foundation/form/hidden"
        - name = "orderby.sort"
        - value = "desc"
    + views
      + card
        - sling:resourceType = "granite/ui/components/coral/foundation/masonry"
        - granite:id = "example-pathfield-search-collection"
        - jcr:title = "Card View"
        - icon = "viewCard"
        - limit = 20
        - selectionCount = "single"
        - selectionMode = true
        - size = '${empty requestPathInfo.selectors[3] ? "20" : requestPathInfo.selectors[3]}'
        - src = "/apps/my/picker/search/views/card.result.${requestPathInfo.selectors[1]}{.offset,limit}.html?${querystring}"
        + datasource
          - sling:resourceType = "granite/ui/components/coral/foundation/querybuilder/datasource"
          - itemResourceType = "example/card"
          - offset = "${requestPathInfo.selectors[2]}"
          - limit = '${empty requestPathInfo.selectors[3] ? "21" : requestPathInfo.selectors[3] + 1}'
  + actions
    + selection
      + button1
        - sling:resourceType = "granite/ui/components/coral/foundation/button"
        - variant = "actionBar"
        - text = "Button 1"
      + button2
        - sling:resourceType = "granite/ui/components/coral/foundation/button"
        - variant = "actionBar"
        - text = "Button 2"