Is there a multi select dropdown widget available in the editor

Developing Nodes
1

Hi,

to save the some of the limited space of the config dialog I'm looking for a multi select drop down widget for the editor. (as far as I found out themultiple attribute only works on select lists and not dropdowns)

  • Is there already a method / widget / tool available witch I can use?
  • Any other idea to select multiple items without loosing at least tree rows of dialog space
  • Is it ok to throw in one of the available libraries like select2 (I really like to avoid this)
  • If I need one of the libraries which one can you recommend (no styling no swiss army knife necessary)

Happy to receive any help or advice.

Chris

image

2

The typedInput widget supports multiple select drop-down.

Look at the solar events on cron-plus node.

3

Thank you!
So something like this line 1600+

                        {
                            value: "selected",
                            label: "Selected Solar Events", 
                            title: "Selected Solar Events", 
                            icon: "fa fa-list",
                            showLabel: false,
                            multiple: true,
                            options: solarChoices,
                            default: ["sunrise", "sunset"]
                        },

Great, will try this :wink: I searched here but couldn't find the 'multiple' property. Are there perhaps other hidden treasures like a color type .... best together with with alpha value?

4

A little follow up if you don't mind. Nothing I could not work around but perhaps somebody has some ideas or hints before I dig deeper

  1. Works like a charm, especially I can handle the "all series" case better
    image

  2. But: I get a comma separated string. Should be fine in most cases but I would prefer an array same as a list with the multiple flag set outputs (imagine commas in the value strings)
    image

  3. If I set this string during oneditprepare I get this:
    image
    The title is empty but the items are set as expected.
    image
    Only if i drop down the list and close it again it seams the expected "2 selected" appears
    image

  4. If i switch from selected series (2 selected) to all series and back i get this
    image
    Not what I expected. Now the "title" is correct but no options are selected. Closing the dropdown gives "0 selected" and the selections are lost.

Here are my properties ... (you can ignore my uiElements object, it only handles the ui elements I use and make editable lists easier and oneditsave a one line job.

                            if (!data.applyTo) data.applyTo=[""];
                            uiElements.addTypedInput('applyTo',[{
                                value: "allSeries",
                                label: node._("uplot.dataPlugins.label.reduceData.allSeries"),
                                title: node._("uplot.dataPlugins.label.reduceData.allSeries"),
                                icon: "fa fa-bars",
                                hasValue: false
                            },{
                                value: "selected",
                                label:  node._("uplot.dataPlugins.label.reduceData.selectedSeries"), 
                                title:  node._("uplot.dataPlugins.label.reduceData.selectedSeries"), 
                                icon: "fa fa-list-ul",
                                showLabel: false,
                                multiple: true,
                                options: seriesSelect                        
                            }],data.applyTo,(data.applyTo === '') ? 'allSeries' : 'selected',contentWidth-2+'%');

And I recognize the typed input is 2% lager than expected :wink:

5

I should preface this by saying the multi select option of the TypedInput isn't widely used - I think we use it one place within the editor. So I'm sure there will be edge cases that it doesn't handle as well as you may expect. But equally, it can only improve by being put through its paces as you are doing.

The TypedInput widget only deals with string properties because it wraps a regular html text input. This is why it encodes the selection as a comma separated list of options.

When you set it to all series, it clears the current value - the list of selected options. When you switch back, as the value has been cleared, nothing is selected.

There is some code in the widget to handle a similar scenario (I forget the specifics) - we'd have to look at what logic makes sense here.

1 Like
6

Thank you our detailed answer, always appreciated!

I think I can work around the "one of a kind" use case.

  • Values as Stings, no problem I'm in charge of the value so I can make sure there is no comma were no comma should be.

  • Switching types ... Either I find a way to via the change( event, type, value ) event or go with the "multi select only" only version which worked flawless.

perhaps because it isn't documented? This could change now :wink: No worries, the forum forgets realy fast.

BTW: would be nice too if the list drops down as soon as the type is changed to avoid a second click on the other (right) side.

I love the typed input - lot of options, flexible, possible customization and using a minimal amount of UI real estate . Would be nice if there could be a "code" type (for callback functions) and a multi line string type (i.e. in the visual JSON editor reasonable editing is "difficult"). (not asking for a color type any more)

Enough for now! As always thank you for your support and have a nice sunday.

7

What I found out´ after digging deeper into the multiselect list feature:

The only issue I found: If the type changes the the label does not update. It should say "0 selected" when the value is set to "" and not show the last state while the internal value has changed.

This problem can be workaround:

  • oneditprepare : I define the type first and then set the value
  • for type changes I use the change event to update the value (to "" or whatever default / last value I need). The title is then updated correctly.

If a fix here is necessary the label should update "x selected" on type changes always reflect the current value.

here is my code to handle type changes while preserving the last selected. (Don't know if piggybacking the lastSelectedValue on the input element is ok)

                                (event, type, value) => {
                                    let element = $(event.target);
                                    let lastSelected = element.prop('_lastSelectedValue'); // recall last selection
                                    switch (type) {
                                        case 'selected': // type with multiple flag set
                                            if (lastSelected && value!==lastSelected) { // to avoid e endless loop
                                                element.typedInput('value', lastSelected);
                                            }
                                            element.prop('_lastSelectedValue',value); // remember last selection
                                            break;
                                    }
                                }

@Steve-Mcl in cronplus I observed the same issue if someone switch types for solar events. Either the title is empty but the two default events are selected or the title shows "x selected" when none are actually selected.

1 Like
8

I believe I have fixed all of these issues for 2.1 - Do better remembering TypedInput values whilst switching types by knolleary · Pull Request #3159 · node-red/node-red · GitHub

It also does a much better job of remembering selections generally when switching between types.

2 Likes
9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.