# Updating props from serverside.js at runtime
**URL:** https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155
**Category:** Dashboard
**Tags:** ui-widgets, dashboard-2
**Created:** [13 August 2024 17:21 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155 "2024-08-13T17:21:10Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@wangenkuesse](https://discourse.nodered.org/u/wangenkuesse)
#### Post date: [13 August 2024 17:21 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/1 "2024-08-13T17:21:10Z")
Hello everyone...
I am trying to build a third party widget. It consists of a v-btn-toggle, a slider an one other button (and some other elements).
When i toggle, i am able to emit a custom event, receive that event at the serverside.js and do some calculations. As a result of these calculations i would then like to update some props (color of some elements).
I am able to set the props via statestore.set but widget does not update/rerender.
When i manually rerender (reload browser) then props are updated.
What ist the right way to do this?
How about: [Dynamic Options - Implement new helper functions & update widget-load behaviour by joepavitt · Pull Request #1123 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1123)
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [13 August 2024 17:59 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/2 "2024-08-13T17:59:29Z")
Is this the correct category?
Is this about developing a node or a dashboard 2 widget?
My guess is Dashboard 2 so moving this to that category. Let me know if I am wrong.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [13 August 2024 19:31 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/3 "2024-08-13T19:31:34Z")
> [@E1cid](#):
>
> My guess is Dashboard 2
Correct!
> [@wangenkuesse](#):
>
> How about:
Yes indeed that is the new way of working. You can find examples of how it has been implemented e.g. for the ui-text node [here](https://github.com/FlowFuse/node-red-dashboard/pull/1182/files). More specifically have a look at the server side code:
And the frontend code:
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 August 2024 08:36 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/4 "2024-08-14T08:36:43Z")
> [@wangenkuesse](#):
>
> As a result of these calculations i would then like to update some props (color of some elements).
SocketIO traffic is one-way, with the pub/sub model. So you'd need _another_ custom event to transport the server-side back to the front-end outside of the standard `onInput`, `onChange`, `onAction` handlers.
I do expose a `.emit(event, msg, node)` on the UI Base elements, so assuming your node as a `group` in it's config, you can get reference to the base through that:
```js
const group = RED.nodes.getNode(config.group)
const base = group.getBase()
```
Then in the relevant place after you've added the relevant properties:
```js
base.emit('custom-event:' + node.id, { payload: }, node)
```
Note it's worth including the `node.id` in the event name as it's then unique to each instance of your node.
In your `.vue` you can then have the subscriber in the `mounted()` handler:
```js
socket.on('custom-event:' + widgetId, (msg) => { ... })
```
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 August 2024 08:37 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/5 "2024-08-14T08:37:42Z")
The other thing you could do is fire a manual `widget-load:` event - which would fire the same logic client-side as when the widget is first loaded?
---
### Author:  [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [14 August 2024 09:17 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/6 "2024-08-14T09:17:58Z")
> [@joepavitt](#):
>
> In your `.vue` you can then have the subscriber in the `mounted()` handler:
>
> ```auto
> socket.on('custom-event:' + widgetId, (msg) => { ... })
>
> ```
Just to add, that if you do set a new listener in the client-side widget (vue), you need to clear it in your unmounted() function:
```auto
unmounted () {
/* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
this.$socket?.off('widget-load:' + this.id)
this.$socket?.off('msg-input:' + this.id)
this.$socket?.off('custom-event:' + this.id)
},
```
---
### Author:  [@wangenkuesse](https://discourse.nodered.org/u/wangenkuesse)
#### Post date: [14 August 2024 14:44 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/7 "2024-08-14T14:44:11Z")
Thank you for the quick Response... I will try your hints...
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [13 September 2024 14:44 UTC](https://discourse.nodered.org/t/updating-props-from-serverside-js-at-runtime/90155/8 "2024-09-13T14:44:56Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.