Is it possible to disable widgets or not display them?

Dashboard
1

I would like to have a dynamic display which I can change the configuration based on a defined set of configurations for display. The display will be like a "Text Output" but a "ui_Template" which I can manage the "Label" and the stream of data to the "Value".

There are multiple channels of incoming data from physical barcode readers. The product type will determine which barcode readers are used and the name of them..

i.e. "Unit 1", "Unit 2", where "Unit 3", "Unit 4" are not displayed or greyed out because this product only has 2 units/container. Therefore both "Unit 3" and "Unit 4" should not display.

The second option, I can manage already, The label is blanked and the Value box greyed out. I perhaps can change these properties with the ui_template message variables. But, is there at least a means to DISABLE a ui_template Widget?

2

Yes at the group level. See the readme

3

I meant Dynamically, in particular have it NOT DISPLAY.. Perhaps my question is unclear... I don't know how to address the Group level programmatically. And by "readme", do you mean the "Info" tab when you click on the ui_template node?

4

Sorry (on phone) . I meant the main readme. But also under info of ui_control node

5

Here is what I found under the "ui_control" in the node "Info" tab.
...
"Visibility of individual groups of widgets can controlled by a payload like {group:{hide:["tab_name_group_name_with_underscores"], show:["reveal_another_group"], focus:true}} where focus is optional and will cause the screen to scroll to show that group if required. The group names are the IDs of the groups and are typically formed from the tab name plus group name joined with underscores replacing all spaces."

I don't want to hide the whole group! I was asking about hiding the widget... Is that possible? if you add another underscore and name the widget ... Name??? If not I can always show a blank field in some way as a placeholder... I guess.

6

dceejay,
I set up a ui_control and put in it this string message in the payload of an inject.

{group:{hide:["Tab1_Group_1"]}}

The name of the "tab" is "Tab1"
the name of the "group" is "Group 1"

Nothing happend... I'm not sure why... So, what is wrong?

7

You can only hide groups. You can set the group to not have a label, so effectively you could have a group with one widget in if you need.

8

Not sure what is wrong. Is the object correct json ? Are the spaces/underscores correct ? If you inspect the source of the group you should see it’s id in the same format.

9

Try this flow for testing purposes...

[{"id":"2bc02f46.a8e46","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"5bfdfd75.5562a4","type":"inject","z":"2bc02f46.a8e46","name":"Hide","topic":"","payload":"{\"group\":{\"hide\":[\"Tab1_Group_1\"]}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":100,"wires":[["476fc34d.bc2a0c"]]},{"id":"476fc34d.bc2a0c","type":"ui_ui_control","z":"2bc02f46.a8e46","name":"","x":420,"y":120,"wires":[[]]},{"id":"6ebe218f.c626","type":"inject","z":"2bc02f46.a8e46","name":"Show","topic":"","payload":"{\"group\":{\"show\":[\"Tab1_Group_1\"]}}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":180,"wires":[["476fc34d.bc2a0c"]]},{"id":"f2a787bd.015a88","type":"function","z":"2bc02f46.a8e46","name":"Create payload","func":"msg.payload = {key1:\"Earth\",key2:\"Wind\",key3:\"Fire\", key4:\"Water\", key5:\"Node-RED \"};\nreturn msg;","outputs":"1","noerr":0,"x":400,"y":320,"wires":[["fa84a230.b0719"]]},{"id":"13c1f4d.609ae0b","type":"inject","z":"2bc02f46.a8e46","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":210,"y":320,"wires":[["f2a787bd.015a88"]]},{"id":"fa84a230.b0719","type":"ui_template","z":"2bc02f46.a8e46","group":"49b17fdb.a4e67","name":"Text Panel 1","order":0,"width":"0","height":"0","format":"<style>\n\n    #tex1 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: red;\n    }\n    \n    #tex2 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: lime;\n    }\n    \n    #tex3 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: aqua;\n    }\n    \n    #tex4 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: white;\n    }\n    \n    #tex5 {\n        font-weight:bolder;\n        letter-spacing: 4px;\n        fill: yellow;\n}\n    \n</style>\n\n\n<svg>\n\n\n<text id=\"tex1\" x=\"10\" y=\"10\" > {{msg.payload.key1}} </text>\n<text id=\"tex2\" x=\"10\" y=\"30\" > {{msg.payload.key2}} </text>\n<text id=\"tex3\" x=\"10\" y=\"50\" > {{msg.payload.key3}} </text>\n<text id=\"tex4\" x=\"10\" y=\"70\" > {{msg.payload.key4}} </text>\n<text id=\"tex5\" x=\"10\" y=\"90\" > {{msg.payload.key5}} </text>\n\n\n</svg>\n\n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":590,"y":320,"wires":[[]]},{"id":"49b17fdb.a4e67","type":"ui_group","z":"","name":"Group 1","tab":"ac0de5e5.b75fb8","disp":true,"width":"6","collapse":false},{"id":"ac0de5e5.b75fb8","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard"}]
10

Thanks Andrei,

The example syntax in the "Info" Tab on the side-bar for the node "ui_control" is
{group:{hide:["tab_name_group_name_with_underscores"], show:["reveal_another_group"], focus:true}}

its INCORRECT syntax for JSON.

I put the example below in following the syntax on the ui_control example. It would not accept it as JSON, so I left it as "String". Mistake.

{group:{hide:["Tab1_Group_1"]}

The name of the "tab" is "Tab1"
the name of the "group" is "Group 1"

The above is according to the example.

Correct JSON is
{"group":{"hide":["Tab1_Group_1"]}}
Inject this as JSON and it works fine... WOW.

Please update the example for correct JSON syntax. double quotes around "group" and "hide".

11

Maybe check this example

https://flows.nodered.org/flow/f1b077d49f52866e74e9b983690b470f

1 Like
12

Great. Question: Do you plan to have many different groups in a TAB ? There is a potential drawback when hiding groups. Groups are not "pinned" to coordinates in the screen , meaning that other groups will automatically reposition themselves in the screen when you hide a group.

13

Actually I don't really want to "hide" anything but a widget. I am told, above, that it's impossible to "hide" just the widget in the "Group".

So, while I got the thing to work to some degree, it isn't what I was looking for. It's not really a problem, I'll have a page full of blank items which I'll use and grow into as the implementation dictates. It'll just have a lot of logic to push the growing list to the next available widget and keep that straight. This isn't optimal for a system that changes the need for channels that change on the products.

It would be very nice to be able to "hide" down to the widget level... Can you Node-Red guys put that in a future update? Please !

14

So...I stumbled upon this:

Where it says: "Any widget can be hidden by passing in a msg.visible property set to false;. Note: this will update the whole ui and may cause flickering."

I have tried this to no avail.
Any insight greatly appreciated.

15

That is a pull request we didn't implement. We did go for hiding and showing groups instead via a ui_control message.

16

Ah. Got it. The hiding/showing groups is great, although the option for individual widgets would also be great because, to my knowledge, one can't vertically stack group (correct me if I am wrong), so one can't deploy a vertically arranged sequence of steps. Imagine two columns of ui elements, each associated with a different process. I would like a user to be able to work on each process independently with progress in one column not affecting the other. I probably did not articulate that use case very well.
Anyway, thanks for explaining the non-implemented pull request.
Was there a specific technical reason you did not (also) implement it for widgets, or just a case of too low of demand to mess with?

1 Like
17

I was stuck on this for 2 days. I'm glad I found this thread. The documentation would really be helpful if we change the example to valid JSON.

18

Can you point exactly where that is? Thanks

19

The problem is described in the reply marked as the solution: Is it possible to disable widgets or not display them?

The example in the sidebar is not JSON, it's JavaScript - so can't be pasted into a change node set to JSON mode. Just needs quotes adding to the key names.

2 Likes
20

Thanks - updated info/readme docs in master.

2 Likes