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
Awesome content!
ReplyDeleteHi
ReplyDeleteI am trying to do the similar way but in my case dropdown value is coming from json file for that i have created servlet and yin that it will read the json path and populate the dropdown value. which works fine but when i use autocomoplete then it break. Could you please help.
Thanks,
Satish
could you please share the datasource code, could be issue with datasource.
ReplyDeletetry to write some loggers
This comment has been removed by the author.
ReplyDeleteIt worked for me but on selection it showing the value of the dropdown instead of text, any way to avoid it.?
ReplyDeleteI also see this is deprecated, any non-deprecated fields to achieve the same?
ReplyDeletehttps://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/autocomplete/index.html