AdvancedSelectΒΆ

/libs/granite/ui/components/foundation/form/advancedselect

A component providing a concept of select. While Select has stricter way to render the options, AdvancedSelect allows you to use any component that is implementing foundation-selections vocabulary. This way you can do any visualization imaginable to render the options.

It satisfies the semantic of foundation-advancedselect.

It extends Field component.

It has the following content structure:

granite:FormAdvancedSelect
  1. granite:container
idstring

The id attribute.

relstring

The class attribute. This is used to indicate the semantic relationship of the component similar to rel attribute.

classstring

The class attribute.

titlestring
i18n

The title attribute.

itemscopestring

The itemscope attribute. As long as this property exists, the attribute is rendered.

itempropstring

The itemprop attribute.

namestring

The name that identifies the field when submitting the form.

deleteHintboolean
  1. true

true to generate the SlingPostServlet @Delete hidden input based on the name.

requiredboolean

Indicates if the field is mandatory to be filled.

selectionModestring
  1. multiple
  1. single
  2. multiple

Indicates if the user is able to select multiple options.

foundation-mode-groupstring

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

validationstring
multiple

The name of the validator to be applied. E.g. foundation.jcr.name. See validation in Granite UI.

foundation-validation-uistring

The [data-foundation-validation-ui] of this component.

toolbar

The toolbar component of the AdvancedSelect. The toolbar can be any component. It is usually used to render the .foundation-advancedselect-navigator and .foundation-advancedselect-status of foundation-advancedselect.

Example:

+ selecttemplate
  - foundation-validation-ui = "none"
  - name = "template"
  - required = true
  - selectionMode = "single"
  - sling:resourceType = "granite/ui/components/foundation/form/advancedselect"
  + layout
    - name = "foundation-layout-card"
    - selectionMode = true
  + datasource
    - itemResourceType = "cq/gui/components/siteadmin/admin/templateoption"
    - path = "${requestPathInfo.suffix}"
    - sling:resourceType = "cq/gui/components/siteadmin/admin/templatedatasource"

Components: