# Dynamically hide and show an ui-text node

**URL:** <https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [10 August 2024 19:08 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097 "2024-08-10T19:08:24Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [10 August 2024 19:08 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/1 "2024-08-10T19:08:24Z")

</div>

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:

```auto
.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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 August 2024 19:51 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/2 "2024-08-10T19:51:34Z")

</div>

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

The ui-text help says

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99c7dd663b74cc55aaa4918163f05c054bf65a64.png)

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.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 August 2024 20:08 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/3 "2024-08-10T20:08:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [11 August 2024 06:42 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/5 "2024-08-11T06:42:14Z")

</div>

This doesn't work unfortunately ☹

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [11 August 2024 06:43 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/6 "2024-08-11T06:43:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2024 07:00 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/7 "2024-08-11T07:00:48Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/292b95a7a61ac81e28998e2ea898a6c280b8d3a2.png)

To make it work you have a few choices.

1. Apply `hideText` dynamically
2. Give `showText` more specificity

![chrome_gdVJ5TNXwc](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/6304994b1620aae96961d0bb641ffe9a0a1ad6c7.gif)

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 August 2024 07:06 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/8 "2024-08-11T07:06:37Z")

</div>

> [@jbudd](#):
>
> Which ain't true but you can use **msg.ui\_update** with these properties.

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.´

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2024 07:26 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/9 "2024-08-11T07:26:53Z")

</div>

> [@jbudd](#):
>
> I don't think Dashboard 2 pays attention to msg.class.

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

> [@jbudd](#):
>
> The ui-text help says

I dont see that in v1.14

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4bf52e7db93e537f1884acb5e6d6b7bcf9235c0.png)

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](https://github.com/FlowFuse/node-red-dashboard/issues/833) `ui-text` dynamic props was updated 2 days ago and will be in the next release.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2024 07:40 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/10 "2024-08-11T07:40:34Z")

</div>

> [@jbudd](#):
>
> The ui-text help says
> 
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99c7dd663b74cc55aaa4918163f05c054bf65a64.png)

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

EDIT: Now fixed in main branch.

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [11 August 2024 07:55 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/11 "2024-08-11T07:55:04Z")

</div>

This works perfectly, thanks!

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [11 August 2024 08:29 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/12 "2024-08-11T08:29:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 August 2024 08:43 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/13 "2024-08-11T08:43:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 August 2024 08:56 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/14 "2024-08-11T08:56:57Z")

</div>

> [@network\_potato](#):
>
> if I append `showText` and reload the page, the text is hidden again

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)

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [11 August 2024 11:05 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/15 "2024-08-11T11:05:16Z")

</div>

Great, I'll wait for the update 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 August 2024 11:05 UTC](https://discourse.nodered.org/t/dynamically-hide-and-show-an-ui-text-node/90097/16 "2024-08-25T11:05:45Z")

</div>

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