Multi select field improvement needed

Plone Support Add-on Development
1

Hello!

I have a custom form having a tags field. An user can select multiple tags from the list of all tags and save these preferences. For the moment it works as a list of checkboxes (multiple columns for a better design, also a max-height on its container + scrollbar in case the list of tags is very long).

I'm trying to improve the UI, because we have +4000 tags...

I found this https://medium.com/tripaneer-techblog/improving-the-usability-of-multi-selecting-from-a-long-list-63e1a67aab35

Then I found this: https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox
It seems to be the best in our case.

My current code is:

from zope.schema import Choice
from zope.schema import List
....
    tags = List(
        title=u"Select tags",
        description=u"""Description here""",
        value_type=Choice(vocabulary="tags_vocab"),
        defaultFactory=default_tags,
        required=False,
    )

Should I create a custom widget? Or is there something already created I can use instead?

Features I need:

  • user can select tags (all of them are visible and can be found by scrolling the list)
  • user can search a tag (autocomplete)
  • user can see the list of selected tags (I mean already saved ones, too)
2

AjaxSelectWidget is what you want?

1 Like
3

I think yes, but the problem is I'm on Plone 4.3.

plone.app.z3cform = 1.1.0 and next versions require plone.app.widgets>=2.0.0.dev0.
Only plone.app.widgets 1.x is working for Plone 4.3.(https://github.com/plone/plone.app.widgets#warning)

Is there a solution for this?

4

The AjaxSelectFieldWidget is in p.a.widgets.dx Module in Version 1.x ...

1 Like
5

We use chosen (jquery plugin) : https://harvesthq.github.io/chosen/
together with ArchetypesMultiSelectionWidget (Plone 4.3)
you have to register all needed resources in your package then (js, css and sprite) and add a small js to set the options for the field(s) you want to use it on.
If you're interested I can send you our custom js for the ArchetypesMultiSelectionWidget as an example.

1 Like