Dynamically hide and show an ui-text node

General
1

Using Dashboard 2.0

I have a ui-text node and I want the text to be hidden as default.

When I press a button (or for this example sake, press on an inject node) I want the text to become visible and stay visible (even on page reload) until it is purposefully hidden again.

I tried giving it a class in the node settings, hideText, and then in a CSS node the following:

.hideText {
display: none;
}

.showText {
display: flex;
}

the .hideText default class works, meaning the text is hidden as default.

Then I tried wiring an inject node that injects msg.class with the string showText but when I inject it, the text is still hidden (so the class was not applied?)

Am I going on about this the right way?

2

I don't think Dashboard 2 pays attention to msg.class.
Hopefully it will eventually do so.

The ui-text help says

image
image436×687 18.8 KB

Which ain't true but you can use msg.ui_update with these properties.
Note it's msg.ui_update.label though not .Label
eg {"color":"RGB(0,0,0,0)"} for transparent and {"color":"RGB(0,0,0,1)"} for visible (black) text.
I think this will make both label and value visible/invisible together.

3

Rather than hide it, send a payload with an empty string to clear it. Then send the actual string to get it back again.

5

This doesn't work unfortunately :frowning:

6

This only "hides" the value, I also want the label to be hidden

7

As the hint states, classes are appended. That means you have both hideText and showText applied at the same time

image
image782×139 9.25 KB

To make it work you have a few choices.

  1. Apply hideText dynamically
  2. Give showText more specificity

chrome_gdVJ5TNXwc

[{"id":"3f4a2740a6e91c95","type":"ui-text","z":"dcc15970006a41ac","group":"9b597a79245141ec","order":2,"width":"3","height":"1","name":"","label":"left","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"hideText","x":410,"y":420,"wires":[]},{"id":"01ddda3a3b9eb8b3","type":"ui-text","z":"dcc15970006a41ac","group":"9b597a79245141ec","order":1,"width":"3","height":"1","name":"","label":"right","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":410,"y":460,"wires":[]},{"id":"781f36df75997293","type":"inject","z":"dcc15970006a41ac","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":460,"wires":[["83204da5a34ac7a6"]]},{"id":"ebb6bcf4373e717a","type":"ui-template","z":"dcc15970006a41ac","group":"","page":"","ui":"22ea43815413e748","name":"","order":0,"width":0,"height":0,"head":"","format":"\n.hideText {\n    display: none !important;\n}\n\n.nrdb-ui-widget.nrdb-ui-text.showText {\n    display: flex !important;\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":420,"y":380,"wires":[[]]},{"id":"321042e1a918adf2","type":"inject","z":"dcc15970006a41ac","name":"hideText","props":[{"p":"class","v":"hideText","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":200,"y":380,"wires":[["83204da5a34ac7a6"]]},{"id":"789871d57db2a0e7","type":"inject","z":"dcc15970006a41ac","name":"showText","props":[{"p":"class","v":"showText","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":200,"y":420,"wires":[["83204da5a34ac7a6"]]},{"id":"83204da5a34ac7a6","type":"junction","z":"dcc15970006a41ac","x":320,"y":440,"wires":[["01ddda3a3b9eb8b3","3f4a2740a6e91c95"]]},{"id":"9b597a79245141ec","type":"ui-group","name":"Test-Group","page":"a12cc971e8c42860","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"22ea43815413e748","type":"ui-base","name":"base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"a12cc971e8c42860","type":"ui-page","name":"Test-Page","ui":"22ea43815413e748","path":"/page25","icon":"home","layout":"grid","theme":"c2ff5ba1f92a0f0e","order":5,"className":"","visible":"true","disabled":"false"},{"id":"c2ff5ba1f92a0f0e","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2 Likes
8

Hi @jbudd,
I think it is better if you raise an issue for that on Github, so it isn't overlooked. If you search in the dashboard repo for "Any of the following can be appended", you will see that sometimes it refers to ´msg.´ and sometimes to ´msg.ui_update.´

9

It does. the CSS needs correct targeting and specificity. Demo above.

I dont see that in v1.14

image
image372×728 27.4 KB

Lastly, there is no need to raise an issue. There is a tracker here. Modify/Update UI-widget parameters from external · Issue #833 · FlowFuse/node-red-dashboard · GitHub ui-text dynamic props was updated 2 days ago and will be in the next release.

1 Like
10

I think you might be running from git. That help text is indeed wrong if so.

EDIT: Now fixed in main branch.

11

This works perfectly, thanks!

12

Is there any way to have the class still be appended when reloading the page?

As of now, if I append showText and reload the page, the text is hidden again.

13

I think that if you change the class dynamically and re-load the page then the class should persist. If not then that is a bug I think.

14

That might be the case today but in the next version (likely released next week) this does not happen (i.e. the items remain hidden after a refresh. I tested this 20mins ago on the main source branch)

15

Great, I'll wait for the update :slight_smile:

16

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