Hiding/no show Buttons in Dashboard

Dashboard
1

Need some pointer .
We would like to have a User Input Page. For example
Input 1 = user defined name
Input 2= user defined name
Input 3 = ‘empty/null’

If the user leaves the field empty, then do not show the Button image

Button 1 = input 1 text
Button 2 = input 2 text
Button 3 = ‘hide the button and not show on the Dashboard’

We have done this in other html/js projects using jquery but not sure how to go about it in Node Red.

2

Are you saying that the user input page with the 3 text fields would be submitted, and then the page with 2 (or 3) buttons would replace it? Or do you want the page to reactive, so interacting with the input text fields in one part of the page updates the buttons somewhere else on the page?

You can accomplish either, but I’m trying to understand your thinking… The simplest way I’ve found is to use angular directives to disable or hide certain UI elements (divs, buttons, text, etc) based on the data being passed to the ui node, or events triggered by the client. If you can be more specific, I can post some sample code that I’ve used in the past…

3

Thank you for assisting!
Here is the general idea

  1. Page 1 ( or TAB1)- this would be where the users enter the labels
    For example: we would have
    TEXT Input 1 = ‘bob’
    TEXT Input 2 = ‘jill’
    TEXT Input 3 = ( user leaves blank)

On Page 2 ( or TAB2) We would have BUTTON and the Label of the Button would correspond to what the user Entered in the TAB1 entries
For Example:
BUTTON 1 = now labled "bob’
BUTTOn 1 = now labled 'jill;
Button 3 = the Button 3 would be hidden and not show up. beause user has left Text Input 3 = blank

4

Maybe will be a good feature request for dashboard, the same than color and background could be defined dynamically by msg.xxxx to be able to do the same with the label.

Regards

5

did you try setting the label field to {{msg.myproperty}} then injecting a message with msg.myproperty set ? eg as per the info box...
image

6

that is great I thought was only possible with background & color, thanks a lot

[{"id":"be2b0588.72e158","type":"ui_button","z":"b7eb5457.b00758","name":"","group":"f21f2722.4727c8","order":0,"width":0,"height":0,"passthru":false,"label":"{{msg.label}}","color":"{{msg.color}}","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":415,"y":1544,"wires":[[]]},{"id":"f53f3c24.85aa3","type":"inject","z":"b7eb5457.b00758","name":"","topic":"","payload":"test","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":101,"y":1543,"wires":[["c5871eca.bda99"]]},{"id":"c5871eca.bda99","type":"function","z":"b7eb5457.b00758","name":"","func":"msg.label = \"test\";\nmsg.color = \"red\";\nreturn msg;","outputs":1,"noerr":0,"x":256,"y":1545,"wires":[["be2b0588.72e158","6bd57f39.c0d1c"]]},{"id":"f21f2722.4727c8","type":"ui_group","z":"","name":"test","tab":"95e900a4.9d5ff","order":1,"disp":true,"width":"10","collapse":true},{"id":"95e900a4.9d5ff","type":"ui_tab","z":"","name":"test","icon":"dashboard","order":26}]
7

One question about this… I have tested and originally on label I set to {{msg,label}} so I made typing mistake and changed the . by a ,

When the coma was in there the button directly was disappearing from dashboard, so I understand that if any of the fields has a invalid value the button simply is not processed.

Could be there is some way that I set any of the fields with {{msg.test}} for instance and I can pull when I wanted some message that the button see as invalid and like this I can make on demand the button to appear or disappear from dashboard?

For the moment I making a small trick and set color and background of the button to same dashboard background but if this there is some way to really removed it on demand will be great.

Regards