Oct 18, 2015, 6:19 PM
453 Posts

multi-select combo/list box

  • Category: Other
  • Platform: All
  • Release: 9.0.1
  • Role: Developer
  • Tags:
  • Replies: 5

I want to create something like a multi-select combo box. The xe:valuePicker sort of does this but uses a dialog box and I don't like that option. I need to:

1. select one or more items from a computed array of text values.

2. add values that are not in the computed list.

3. remove items from the selected list

I looked at the select2 bootstrap but it does not look like it allows for values not in the computed list. also, I'm a little fuzzy on how and what needs to be installed into the Database. 

Is there a better solution?

 

Oct 19, 2015, 7:33 AM
6 Posts
Re: multi-select combo/list box

I've generally used Select2 or Chosen in the past - they work, but, as you've already seen, there are plenty of caveats.

For the problem you've run into, at least, you can allow values not from the list by using something like <xp:listBox disableValidators="true"/>. That has the distinct potential problem of disabling all validation (so you would have to do a manual check if you also want it required), but it has the advantage of allowing users to enter new values.

In both cases, there are problems with <xp:eventHandler/>s - the customized boxes don't fire the normal onchange/etc. events in a way that the event handlers pick up on. You can sort of get around this by using the "inline" versions in the "events" section of the "All Properties" table for the control (not the "Events" tab), but that limits your options as to what the event does.

The original Bootstrap4XPages renderer plugin came with a Select2 control that presumably papered over some of these problems, but, if I recall correctly, it's not included in the ExtLib version. Due to that, these examples have sort of come back into style: http://www.bootstrap4xpages.com/bs4xp/demos.nsf/select2.xsp

Oct 19, 2015, 12:03 PM
453 Posts
Sort of works

I created a listBox that looks like this

<xp:listBox id="listBox1" multiple="true"
                value="#{formDoc.ReqOnSubmit}" disableValidators="true">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{viewScope.vsFieldNames}]]></xp:this.value>
                </xp:selectItems>
</xp:listBox>

and it sort of works -- get the multi-select OK but the disableValidators="true" does not allow for the adding values not in the list.

all of the options that allow multi-select don't allow entry of new items and the controls offering single selection allow new entries. I would expect that the multi-select and new item combination would be a fairly regular requirement, having to install Select2 or ??? seems like a sledge hammer solution to a thumb tack problem.

Oct 19, 2015, 12:53 PM
589 Posts
hmm

I think you need to separate the multi-select from the "add new".  The "add new" should just be it's own field and in the UI you "put them close together" to make sense.

to me they're independant functions...  the multi-select of existing... and the add new which adds whatever and then "auto-selects" it....

 

just a thought.

 

Oct 19, 2015, 6:00 PM
6 Posts
Re: multi-select combo/list box

When you say that the disableValidators change doesn't do it, what is preventing the addition of new entries? I forgot to mention another component of it: using "tags" mode of Select2. If you pass "tags: true" in the options object when creating the Select2 instance, that's what will allow you to add your own text there. The disableValidators part is the non-intuitive addition needed to get the server to accept these new values.

Oct 20, 2015, 11:38 AM
453 Posts
Ended up doing what Dave suggested..

Two controls - one for the selection from the list and the second for new entries, the both feed a third control that combines them. 

I need this in a sort of administrative function that most users will never see so while I don't really like it, it works and I can move on.

Will look at Select2 some day when I have more time.