UI Dropdown - How to select / deselect all?

Dashboard
1

Hi there,

I'm trying to find a convenient way to add a 'Select all / Deselect all' for UI_Dropdown.

So far I'm stuck on multiple Google searches with no answer. I'm guessing that I should use the 'template' node but I have no idea how. This website here - Dropdown | Semantic UI - provides good examples of dropdowns that I'd like to implement inside of my Node-RED application, but I'm a newbie at programming.

Any guidance on how to achieve something like a 'Select all' mode? Or maybe how to use the 'template' node?

Thanks in advance!

2

Send an array of values in msg.payload that match the option values, or send an empty array.
e.g.

[{"id":"5f8e0401.63910c","type":"inject","z":"5a245aa1.510164","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":500,"y":2980,"wires":[["17428d37.7997b3"]]},{"id":"17428d37.7997b3","type":"ui_dropdown","z":"5a245aa1.510164","name":"","label":"","tooltip":"","place":"Select option","group":"8b5cde76.edd58","order":5,"width":0,"height":0,"passthru":false,"multiple":true,"options":[],"payload":"","topic":"topic","topicType":"msg","x":670,"y":2960,"wires":[["8ae0a7a.1b65658"]]},{"id":"8ae0a7a.1b65658","type":"switch","z":"5a245aa1.510164","name":"","property":"payload","propertyType":"msg","rules":[{"t":"jsonata_exp","v":"\"select all\" in payload","vt":"jsonata"},{"t":"jsonata_exp","v":"\"unselect\" in payload","vt":"jsonata"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":810,"y":2960,"wires":[["e6c96fa8.1e266"],["92029d42.2a835"],["fccf3ccd.91e11"]]},{"id":"9817b2c1.b5a3c","type":"inject","z":"5a245aa1.510164","name":"","props":[{"p":"options","v":"[\"select all\",1,2,3]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":490,"y":2920,"wires":[["17428d37.7997b3"]]},{"id":"e6c96fa8.1e266","type":"change","z":"5a245aa1.510164","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"unselect\",1,2,3]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"[1,2,3]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":2960,"wires":[["17428d37.7997b3"]]},{"id":"92029d42.2a835","type":"change","z":"5a245aa1.510164","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"select all\",1,2,3]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":3020,"wires":[["17428d37.7997b3"]]},{"id":"fccf3ccd.91e11","type":"debug","z":"5a245aa1.510164","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":940,"y":2880,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
3

Hi,

Thank you very much for your quick reply! Your answer is good. I've tried something like this before I wrote the post but it was stuck in a continuous loop as I thought I had to send "msg.options" (I didn't know about the "msg.payload" trick)

Anyway, I've discovered something strange. If you have over 7 options, a similar button appears which does what I want (select, deselect and search). Can somebody tell me how can I edit this limit?

Thanks in advance!

4

I would think it is hard coded in the modules files, Maybe ask at github as a feature request, to add a input field for select all limit

5

Is less than 7 really that hard to click ? It then adds/wastes a line of space for all those with only a few options. What would be the minimum ?

6

Depends on your abilities, some handicaped people may find 7 clicks harder than 1.

7

in that case make your options a single select not multi

8

So if you find small movements difficult you only get option to select 1, but you may want to select 5 of the 6 so only 2 clicks rather than 5. I fail to see how that works

9

no - configure your options differently... eg none, option A, option B, option A and B - then you only have to select one.

10

so for 5 items
you could have over 20 selections for all possible combinations, seems over complicated. would be simpler to just lower select all to 3. Plus it would complicate dynamic filling of options.

11

No, it's not hard to click but it seems more convenient to have a 'select all / unselect all' option for a list. Even the search function is a really nice touch.

Anyway, I did some research here on the forum and found a post from 2019 - more precisely, this one:

It was a good starting point as the file that has to be edited is called "app.min.js" and is found here "...node-red\node_modules\node-red-dashboard\dist\js"

Opening it with any text editor and searching for '> 7' does the trick. I've edited every instance of '> 7' into '> 3' so I can get both the search function activated and the select / unselect button.

I understand that after every update this file will be overwritten by the new one, but at least it does what I want.

Also, I want to mention that there's nothing written in the documentation regarding this matter - 'if there are more than 7 options, 2 new buttons will automatically be made available for the UI_Dropdown'. So some people might get discouraged from using this function from the rest of the dashboard's functions.

I'd want to mark this as the 'Solution' even if @E1cid came with a workaround but, at the same time, I want to keep this post open for a little bit more time in case there are more things to say (either by me or by anyone else).

12

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