Search/Filter Touch UI Dialog Dropdown in AEM

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

That’s it. Find more info about autocomplete component at Autocomplete 

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