# Use scope in UI Nodes

**URL:** <https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804>\
**Category:** Dashboard\
**Created:** [14 January 2019 18:30 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804 "2019-01-14T18:30:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [14 January 2019 18:30 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/1 "2019-01-14T18:30:40Z")

</div>

Hi, I want to change the colors of the button using the ui\_picker. I save the new color globally in msg.colour. Can the UI node itself get the information from the scope? Is it enough if I write msg.colour in the field of the background color. Or how should it be?

---

<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:** [15 January 2019 19:24 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/2 "2019-01-15T19:24:44Z")

</div>

Hi @Georg25,

I'm not sure whether I understand your question correctly, so please correct me...

> [@Georg25](#):
>
> I want to change the colors of the button using the ui\_picker

When I try this simple flow:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b73c93f45613bad5a04226c78c0be19385161d69.png)

```auto
[{"id":"c074ebe5.1cf448","type":"change","z":"47b91ceb.38a754","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"backgroundcolour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":890,"y":880,"wires":[["e6b10e4c.0661f"]]},{"id":"e6b10e4c.0661f","type":"ui_button","z":"47b91ceb.38a754","name":"","group":"396e82d8.51ce4e","order":0,"width":"2","height":"2","passthru":false,"label":"BUTTON","tooltip":"","color":"ffffff","bgcolor":"#{{msg.backgroundcolour}}","icon":"","payload":"a","payloadType":"str","topic":"","x":1080,"y":880,"wires":[[]]},{"id":"a875adea.f4bea","type":"ui_colour_picker","z":"47b91ceb.38a754","name":"","label":"COLOUR PICKER","group":"396e82d8.51ce4e","format":"hex","outformat":"string","showSwatch":false,"showPicker":true,"showValue":false,"showHue":false,"showAlpha":false,"showLightness":true,"dynOutput":"false","order":7,"width":0,"height":0,"passthru":true,"topic":"","x":670,"y":880,"wires":[["c074ebe5.1cf448"]]},{"id":"396e82d8.51ce4e","type":"ui_group","z":"","name":"Group 3","tab":"ed853a43.66a808","order":3,"disp":false,"width":"6"},{"id":"ed853a43.66a808","type":"ui_tab","z":"","name":"Charts","icon":"dashboard","order":2}]

```

Then I can use the colour picker to change the button background color:  
 ![colour_picker](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/23fbdcf79bc51ec7c60c992105df3348b6ccd4c6.gif)

> [@Georg25](#):
>
> Can the UI node itself get the information from the scope?

What do you mean by this?  
Do you want to create a template node or a custom UI node (using the new widget api)?

Bart

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [15 January 2019 19:41 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/3 "2019-01-15T19:41:28Z")

</div>

that's exactly what I had in mind.

> When I try this simple flow:  
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b73c93f45613bad5a04226c78c0be19385161d69.png)

```auto
[{"id":"c074ebe5.1cf448","type":"change","z":"47b91ceb.38a754","name":"","rules":[{"t":"mo

```

I have 20 buttons on different tabs. If I do that, I would have to connect every single button to the switch node. I wanted to prevent that by storing the color globally. My question is, wether the UI\_widget can retrieve the information somehow, no matter if that is the ui\_button or the ui\_template or is that only with a self-created UI-Node feasible

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [15 January 2019 19:44 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/4 "2019-01-15T19:44:10Z")

</div>

> [@Georg25](#):
>
> have 20 buttons on different tabs. If I do that, I would have to connect every single button to the switch node. I wanted to prevent that by storing the color globally. My question is, wether the UI\_widget can retrieve the information somehow, no matter if that is the ui\_button or the ui\_template or is that only with a self-created UI-Node feasible

This could be a job for link nodes if I'm understanding you correctly.

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [15 January 2019 19:49 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/5 "2019-01-15T19:49:12Z")

</div>

yes, I have also implemented it with link nodes.  
Just thought to reduce the effort, if this is possible. Would be synonymous for other properties interesting, which can be set in the UI nodes

---

<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:** [15 January 2019 19:54 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/6 "2019-01-15T19:54:41Z")

</div>

> [@Georg25](#):
>
> My question is, wether the UI\_widget can retrieve the information somehow, no matter if that is the ui\_button or the ui\_template or is that only with a self-created UI-Node feasible

The client side of the UI nodes (button, template node, custom ui node) runs in the browser and has **no access** to any of the server-side data in the Node-RED flow. So if you store the colour e.g. in global memory, you won't be able to access that value in the AngularJs frontend.

On the other hand when you send a message to such a UI node, then the message data will be **accessable** in the AngularJs scope object. That functionality is made available in all the ui nodes by the dashboard...

So you need to pass a message from your colour picker to all of your buttons, to exchange the colour value. Seems that your link nodes are the easiest solution

---

<div class="post-metadata">

**Author:** ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)\
**Post date:** [15 January 2019 20:10 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/7 "2019-01-15T20:10:44Z")

</div>

@BartButenaers thanks for the info.

---

<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:** [15 January 2019 20:27 UTC](https://discourse.nodered.org/t/use-scope-in-ui-nodes/6804/8 "2019-01-15T20:27:32Z")

</div>

@Georg25: You are welcome!  
And for others struggling with the same question, perhaps a single figure says more that thousand words:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/befbc840272c46626d97549f2414688a18b980ce.png)

- You _cannot_ access data from the **server side memory** (global/flow/...) in the AngularJS dashboard.
- You _can_ access data from an **input message** in the AngularJS dashboard frontend. Indeed the msg data is (automatically) transmitted to the node's AngularJs scope object, where the client side code of the UI widget can get it (to update the content or layout of the visible widget).