We want to integrate jquery select2 plugin as dropdown in AEM forms as custom appearance field, but cannot find a working example

[DavidZhang]

https://experienceleague.adobe.com/docs/experience-manager-65/forms/customize-aem-forms/custom-appea...

Seems custom-appearance-archetype is very old and mvn even cannot build the project after generated. Also, there's no working example and code bundle for this.

The reason we want this is the AEM forms dropdown is not adaptive on small device when the option is very long, it cannot word-wrap.

Please help.

[Vijayalakshmi_S]

Hi @DavidZhang,

Could you please raise this query in AEM forms category

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/ct-p/adobe-experienc...

[Mayank_Gandhi]

@DavidZhang Question for you, why would you have long text in a dropdown anyways. You need to have a tooltip for that. Word wrap in a dropdown would render a very long scroll in a smaller device both for dropdown and for form.

Minify jquery select 2, put it as client libs, and include it in your custom component. 

[DavidZhang]

It's legal requirement for the dropdown. So we have to keep the long text.

Also, to include select2, how to integrate with the API to feed the data and event handling? Do you have any working example for any jquery ui plugin to work with forms?

[Mayank_Gandhi]

@DavidZhang Data binding would be difficult to manage and I can say there is not a document for a similar approach in form. Try creating a wrapper around the default dropdown and feed/bind the values to the default one itslef and use your widget just to display the values. It will all be done in js handler