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
Boost 1
Level 1
1asdfasdfadsfasdfasdfa
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Give Back
Ignite 1
View profile

Avatar
Boost 1
Level 1
1asdfasdfadsfasdfasdfa
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Give Back
Ignite 1
View profile
1asdfasdfadsfasdfasdfa
Level 1

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
Give Back 50
MVP
Vijayalakshmi_S
MVP

Likes

436 likes

Total Posts

574 posts

Correct Reply

191 solutions
Top badges earned
Give Back 50
Give Back 5
Ignite 10
Ignite 5
Ignite 3
View profile

Avatar
Give Back 50
MVP
Vijayalakshmi_S
MVP

Likes

436 likes

Total Posts

574 posts

Correct Reply

191 solutions
Top badges earned
Give Back 50
Give Back 5
Ignite 10
Ignite 5
Ignite 3
View profile
Vijayalakshmi_S
MVP

28-04-2021

Avatar

Avatar
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

278 likes

Total Posts

1,101 posts

Correct Reply

181 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
View profile

Avatar
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

278 likes

Total Posts

1,101 posts

Correct Reply

181 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
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
Boost 1
Level 1
1asdfasdfadsfasdfasdfa
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Give Back
Ignite 1
View profile

Avatar
Boost 1
Level 1
1asdfasdfadsfasdfasdfa
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
Give Back
Ignite 1
View profile
1asdfasdfadsfasdfasdfa
Level 1

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
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

278 likes

Total Posts

1,101 posts

Correct Reply

181 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
View profile

Avatar
Validate 1
Level 10
Mayank_Gandhi
Level 10

Likes

278 likes

Total Posts

1,101 posts

Correct Reply

181 solutions
Top badges earned
Validate 1
Contributor 2
Ignite 5
Ignite 3
Ignite 10
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