# First own UI node

**URL:** <https://discourse.nodered.org/t/first-own-ui-node/5236>\
**Category:** Dashboard\
**Created:** [27 November 2018 13:33 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236 "2018-11-27T13:33:25Z")\
**Posts on this page:** 14\
**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:** [27 November 2018 13:33 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/1 "2018-11-27T13:33:25Z")

</div>

Hi,  
I´m trying to develop my first UI Node,  
I want to generate something like this:

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

but nothing happened.

If I leave the if condition, it shows me the image.

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

So my question, how can I change the image depending on the payload?  
and make it possible to send a new payload when clicking?

---

<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:** [30 November 2018 06:25 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/2 "2018-11-30T06:25:39Z")

</div>

does anyone have an idea?

---

<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:** [1 December 2018 20:33 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/3 "2018-12-01T20:33:20Z")

</div>

Hey @Georg25,

> [@Georg25](#):
>
> So my question, how can I change the image depending on the payload?

For your first question, you might have a look at another [discussion](https://discourse.nodered.org/t/view-video-file-in-ui/5240). But in that case the server-side flow decides which image has to be showed...

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:** [2 December 2018 13:06 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/4 "2018-12-02T13:06:55Z")

</div>

Hi Bart,

thanks for the tip.

```
module.exports = function(RED) {
	function checkConfig(node, conf) {
		if (!conf || !conf.hasOwnProperty("group")) {
			node.error(RED._("ui_pic.error.no-group"));
			return false;
		}
		return true;
	}
	var pic = null; 
	function HTML(config) {		
	// define HTML code
		(function(scope) {
			scope.$watch('msg',function(msg){
				if(msg) {
					pic= config.offPicture;
				}
			});
		})(scope);

		//var state = config.onvalue;
		//pic = config.onPicture;
		var html = String.raw`
		<div>
			<md-button ng-click="sendVal()" ng-model="msg.targetValue">
				<img src="/${pic}"> 
			</md-button>
		</div>`
		return html;
	};

```

If I make it this way the following error message appears:

 ![errormessage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d90994f066232a3def96c87667e6b690caf58006.png)

---

<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:** [2 December 2018 13:26 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/5 "2018-12-02T13:26:18Z")

</div>

Hi @Georg25,

The `function(scope) { ... }` Javascript code from your example will now be runned on the **server-side** (i.e. in your flow), since it is located inside the `HTML` function. Indeed that `HTML` function is used to determine which html/javascript code needs to be send to the client-side (i.e. to the dashboard in the browser). Since the AngularJs scope is not defined on the server, you will get that error...

So you need to tell Node-RED that your Javascript code needs to be runned in the client-side (not in the server-side!). Think you have to put your code inside the `initController`, as you can see in this [discussion](https://discourse.nodered.org/t/announce-dashboard-version-2-10-0/4196/31?u=bartbutenaers).

But on the client-side you don't have the `config` (since that is the data from the config screen of your node on the server-side flow), so you will have to get the offPicture from elsewhere e.g. from the `msg.payload` ....

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:** [2 December 2018 13:56 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/6 "2018-12-02T13:56:21Z")

</div>

ok but that was not the plan. Is not there an easy way to get the payload? And make an if-case with it?

---

<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:** [2 December 2018 14:38 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/7 "2018-12-02T14:38:46Z")

</div>

Hmmm, it might be that I'm mistaken. Have not published yet a single dashboard node either...

In this [discussion](https://discourse.nodered.org/t/announce-dashboard-version-2-10-0/4196/28?u=bartbutenaers) you can see that the scope stuff is inside the html raw string, where you have also your config data available. And then you can put your IF into your scope function...

---

<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:** [18 December 2018 14:21 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/8 "2018-12-18T14:21:17Z")

</div>

Hi,  
the only thing missing from my UI Node is that reading the payload at the right place.  
I need the payload here

> ```
> function HTML(config) { 
> var pic = config.onPicture;
> var html = String.raw`
> <div> 
> <md-button ng-click="sendVal()" ng-model="msg.userTargetValue" style="background-color: ${config.bgcolor}"> 
> <img src="/${pic}" alt="Bild kann nicht angezeigt werden"> "${state}"
> </md-button>
> </div>`
> return html;
> };
> 
> ```

but i only get the payload here

> RED.nodes.createNode(this, config);  
> var done = null;  
> this.on('input',function(msg){  
> if(msg.payload ==="1"){  
> state = config.onPicture;  
> }  
> else{  
> state = config.offPicture;  
> }  
> node.send(state);  
> return state;  
> });

so my question how can i get the paylaod from the lower function to the upper one?

---

<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:** [18 December 2018 14:22 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/9 "2018-12-18T14:22:33Z")

</div>

sorry for the wrong formatting between the two parts of the code 😅

---

<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:** [19 December 2018 09:30 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/10 "2018-12-19T09:30:42Z")

</div>

Hi, it is better that you edit your post ( via ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bcfc6de48b8d624919957b3087997a59c6f622be.png) ) , so it becomes more readable with two sections of code.

Perhaps Hiroyasu (@nisiyama) can give you some decent advise? I had a look at the reference [ui\_list](https://github.com/node-red-hitachi/ui_list/blob/master/ui_list.js) node, but it is at the moment blurry in my mind how it works with the message transfer between backend and frontend ...

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [20 December 2018 13:56 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/11 "2018-12-20T13:56:12Z")

</div>

Hi, sorry I didn't have enough time to follow messages on forums.  
Could you try watching message and setting scope variable something like this?

```auto
    function HTML(config) {
        var html = String.raw`
<div>
  <div ng-if="flag">True</div>
  <div ng-if="!flag">False</div>
</div>
`;
... ui.addWidget({
        ...
               initController: function($scope, events) {
                    $scope.flag = true;
                    $scope.$watch('msg', function(msg) {
                        $scope.flag = !$scope.flag;
                    });
                }
        ...
    });
...

```

---

<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:** [20 December 2018 16:41 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/12 "2018-12-20T16:41:16Z")

</div>

@nisiyama

thanks for you help,

I have this built into my code, after the restart of node-RED it displayed "false", now I give a payload on it and it displayed "true". And I can not switch to "false" anymore.  
Or did I test it wrong?

---

<div class="post-metadata">

**Author:** ![nisiyama](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nisiyama/32/85_2.png) [@nisiyama](https://discourse.nodered.org/u/nisiyama)\
**Post date:** [21 December 2018 13:37 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/13 "2018-12-21T13:37:07Z")

</div>

Umm..., in my environment it it flips True/False when new message arrives.  
I have placed sample widget at [https://github.com/node-red-hitachi/ui\_sample](https://github.com/node-red-hitachi/ui_sample)  
Could you try this code?

---

<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:** [21 December 2018 14:02 UTC](https://discourse.nodered.org/t/first-own-ui-node/5236/14 "2018-12-21T14:02:49Z")

</div>

Hey Hiroyasu (@nisiyama),

Did a quick test and your sample UI node indeed seems to **toggle** fine:

![widget_test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/85cd4df530ee0749e3c57e0948769f7f309ec9ee.gif)

Thanks for assisting us with the widget API !  
Bart