# uibuilder.onChange msgs

**URL:** <https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590>\
**Category:** General\
**Created:** [21 August 2019 08:50 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590 "2019-08-21T08:50:52Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [22 August 2019 13:34 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/22 "2019-08-22T13:34:55Z")

</div>

In addition, the documentation keeps improving while time passes too. Call it early adaptor issues 😉

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 August 2019 08:12 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/23 "2019-08-23T08:12:47Z")

</div>

Thanks to all your help and my persistence 😉 I have something working. I can imagine when starting to implement event binding and if/else, a lot of heavy lifting will be done by vue, saves quite some work.

My working example, yay 😃

html

```auto
<device-component v-for="device in devices" :device="device" />

```

index.js

```auto
let devices = [
	{
		topic: 'devices/kleine_kamer/fan',
		room: 'Kleine Kamer',
		device: 'fan',
		state: '-',
		statevalue: '-',
	},
	{
		topic: 'devices/woonkamer/lamp',
		room: 'Woonkamer',
		device: 'lamp',
		state: '-',
		statevalue: '-',
	},
];

Vue.component('device-component', {
	template: `
	 <div class="item" :class="device.state">
	 	<span class="icon" ><img :class="device.state" src="images/fan.svg" /></span>
		<span class="room">{{device.room}}</span>
		<span class="device">{{device.device}}</span>
		<span class="statevalue">{{ device.statevalue }}</span>
	</div>
	`,
	props: {
		device: Object,
	},
});

var app1 = new Vue({
	el: '#app',
	components: {},
	data: {
		devices,
	},

	computed: {},
	methods: {},

	mounted: function() {
		uibuilder.start();

		var vueApp = this;

		uibuilder.onChange('msg', function(msg) {
			if (msg.topic !== 'uibuilder') {
				topic = msg.topic.split('/');
				room = topic[1];
				device = topic[2];
				index = devices.findIndex(x => x.topic === msg.topic);
				vueApp.devices[index].state = msg.state;
				vueApp.devices[index].statevalue = msg.statevalue;
			}
		});
	},
});

```

Still have to define all elements, but can live with that.

When I send something with a certain topic, the right element gets updated with a custom class. Cool stuff, still don't understand how it works, but as long as it is functional I can work from there 🙂

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [23 August 2019 09:51 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/24 "2019-08-23T09:51:24Z")

</div>

My plan for today and the next days is to build a quite advanced example/showcase of this, showing about the edges of what is possible without a build step such as webpack. With a build step this goes even beyond. Just worked out a quick functional design on paper, will post a showcase for it in a few days.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 August 2019 12:06 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/25 "2019-08-23T12:06:07Z")

</div>

Personally I need simple examples 😉 haha but thanks!

Got a little further, can now load the "devices" upon refresh/connect of the browser, it sends an array. If I understand correctly, the reactivity will be applied when using methods and indeed it seems to work fine.

```auto
var app1 = new Vue({
	el: '#app',
	components: {},
	data: { devices },
	computed: {},
	methods: {
		updateArray() {
			this.devices = msg.payload;
		},
		updateState() {
			topic = msg.topic.split('/');
			room = topic[1];
			device = topic[2];
			index = this.devices.findIndex(x => x.topic === msg.topic);
			this.devices[index].state = msg.state;
			this.devices[index].statevalue = msg.statevalue;
		},
	},
	mounted: function() {
		uibuilder.start();

		var vueApp = this;

		uibuilder.onChange('msg', function(msg) {
			if (msg.topic !== 'uibuilder' && msg.topic !== 'deviceArray') {
				vueApp.updateState(msg);
			}
			if (msg.topic == 'deviceArray') {
				vueApp.updateArray();
			}
		});
	},
});

```

\*edit fixed it with `v-bind:data="devices" v-bind:key="device.device"`

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [23 August 2019 12:22 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/26 "2019-08-23T12:22:40Z")

</div>

@bakman2 Quick question for a potential bug:

> [@bakman2](#):
>
> ```auto
> if (msg.topic !== 'uibuilder' && msg.topic !== 'deviceArray') { 
> vueApp.updateState(msg); 
> }
> 
> ```

the `updateState` you defined does not take any parameters, yet you pass on message. In the `updateState` function you then use `msg` as if it was passed as parameter. To fix this, add a parameter `msg` to the updateState function definition:

> [@bakman2](#):
>
> ```auto
> updateState(msg) {
> topic = msg.topic.split('/'); 
> // ... 
> },
> 
> ```

The same holds true for `vueApp.updateArray()`, except here `msg` isn't even passed, yet still used in the actual function.  
You might see this reflected in errors on the javascript console.

Definitely looking good though! The thing I'm currently working on has a similar concept for setting the devices.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 August 2019 12:48 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/27 "2019-08-23T12:48:12Z")

</div>

You are correct, it is some scaffolding which can and will introduce errors, right the first time is better. Fixed.

Now working on click bindings, fingers crossed.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 August 2019 20:47 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/28 "2019-08-23T20:47:56Z")

</div>

> [@afelix](#):
>
> the documentation keeps improving while time passes too. Call it early adaptor issues

As Nick & Dave would say: PR's are always welcome!

As much is documented in the WIKI and the WIKI is open to all to edit, that is even easier! Though I am beginning to think that I might be pushing the WIKI a bit hard. It is certainly a massive pain to maintain the sidebar menu. I think at some point, I may have to bite the bullet and use Hugo to create a website.

I'm in the middle of creating 2 other websites at the moment though so as usual I am probably getting ahead of myself.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [23 August 2019 20:55 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/29 "2019-08-23T20:55:05Z")

</div>

In that case, take a look at [readthedocs.org](http://readthedocs.org), or docs using gitbook like is more popular with JavaScript libraries. ReadTheDocs is static hosting of Sphinx based documentation, where the docs live in the repository and the hosted version can be rebuild with an outgoing github webhook upon a push. Gitbook got an update recently that I’m not sure how to feel about yet as it looks as if you’re now relying completely on their web interface to update/edit your docs.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 August 2019 21:04 UTC](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590/30 "2019-08-23T21:04:25Z")

</div>

😄 I'm ahead of you there Lena - for once:

[https://totallyinformation.github.io/node-red-contrib-uibuilder/#/](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/)

It's just that I've not had a chance to really get things going. I'd also need to find a way to link existing WIKI pages to the new site so that all of the WIKI references scattered around this forum, the uibuilder repo and elsewhere don't end up as 404's.

[Previous page](https://discourse.nodered.org/t/uibuilder-onchange-msgs/14590.md?page=1)