Search/Filter Touch UI Dialog Dropdown in AEM
Sometimes we have a requirement that need to populate the
dynamic list in the touch UI dialog dropdown. We can achieved populating
dynamic list in dialog easily for example https://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html
but what if the list is too long, assume we need to create a dialog dropdown to
choose colour and colour list having approximate 148 items (https://www.w3schools.com/colors/colors_names.asp
)
So it’s quite tough for content author to scroll the
dropdown to select appropriate value.
What can be done to reduce efforts for content author:
Is it possible to have a kind of In place search dropdown
where content author can type the character and drop down list will only show
relevant value?
The answer is Yes, It is possible.
How:
This can be achieved by modify existing dropdown node:
- Replacing sling:resourceType value from ‘select’ to 'autocomplete' component (/libs/granite/ui/components/coral/foundation/form/autocomplete)
- Create ‘options’ nodes parallel to ‘datasource’ node and create sling:resourceType property with granite/ui/components/coral/foundation/form/autocomplete/list value for ‘options’ node
Example dialog:
| <?xml version="1.0" encoding="UTF-8"?> | |
| <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Promo Box" | |
| sling:resourceType="cq/gui/components/authoring/dialog"> | |
| <content | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <tabs | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/tabs"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <contentdata | |
| jcr:primaryType="nt:unstructured" | |
| jcr:title="Content" | |
| sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <column | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/container"> | |
| <items jcr:primaryType="nt:unstructured"> | |
| <heading | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/textfield" | |
| fieldDescription="Enter Promo Box Heading" | |
| fieldLabel="Heading" | |
| name="./heading"/> | |
| <background | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete" | |
| emptyText="---- Please Select a Value -----" | |
| fieldDescription="Select Background colour from Dropdown" | |
| fieldLabel="Select or type background colour from Dropdown" | |
| name="./bg-color" | |
| required="{Boolean}true"> | |
| <datasource | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="/apps/blog/dailog/dropdown"/> | |
| <options | |
| jcr:primaryType="nt:unstructured" | |
| sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/> | |
| </background> | |
| </items> | |
| </column> | |
| </items> | |
| </contentdata> | |
| </items> | |
| </tabs> | |
| </items> | |
| </content> | |
| </jcr:root> |
Dropdown with all items
Dropdown with Filter/Search
