Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

DavidZhang
Level 3
Level 3

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.

 

4 Replies
Mayank_Gandhi
Community Advisor
Community Advisor

@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
Level 3
Level 3

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
Community Advisor
Community Advisor

@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