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
BedrockMission!

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

Avatar

Avatar
Validate 1
Level 2
1asdfasdfadsfasdfasdfa
Level 2

Likes

3 likes

Total Posts

12 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Give Back 3
Boost 1
Give Back
View profile

Avatar
Validate 1
Level 2
1asdfasdfadsfasdfasdfa
Level 2

Likes

3 likes

Total Posts

12 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Give Back 3
Boost 1
Give Back
View profile
1asdfasdfadsfasdfasdfa
Level 2

13-04-2021

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.

 

Replies

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

525 likes

Total Posts

660 posts

Correct Reply

217 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

525 likes

Total Posts

660 posts

Correct Reply

217 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

28-04-2021

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

316 likes

Total Posts

1,139 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

316 likes

Total Posts

1,139 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

04-05-2021

@1asdfasdfadsfasdfasdfa 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. 

 

Avatar

Avatar
Validate 1
Level 2
1asdfasdfadsfasdfasdfa
Level 2

Likes

3 likes

Total Posts

12 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Give Back 3
Boost 1
Give Back
View profile

Avatar
Validate 1
Level 2
1asdfasdfadsfasdfasdfa
Level 2

Likes

3 likes

Total Posts

12 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Give Back 3
Boost 1
Give Back
View profile
1asdfasdfadsfasdfasdfa
Level 2

04-05-2021

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?

Avatar

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

316 likes

Total Posts

1,139 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile

Avatar
Springboard
Level 10
Mayank_Gandhi
Level 10

Likes

316 likes

Total Posts

1,139 posts

Correct Reply

184 solutions
Top badges earned
Springboard
Establish
Validate 1
Contributor 2
Ignite 5
View profile
Mayank_Gandhi
Level 10

05-05-2021

@1asdfasdfadsfasdfasdfa 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