Updating props from serverside.js at runtime

Dashboard
,
1

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

2

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.

3

Correct!

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. More specifically have a look at the server side code:

image
image552×610 51.6 KB

And the frontend code:

image
image455×749 42.1 KB

4

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:

const group = RED.nodes.getNode(config.group)
const base = group.getBase()

Then in the relevant place after you've added the relevant properties:

base.emit('custom-event:' + node.id, { payload: <stuff> }, 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:

socket.on('custom-event:' + widgetId, (msg) => { ... })
5

The other thing you could do is fire a manual widget-load:<widget-id> event - which would fire the same logic client-side as when the widget is first loaded?

6

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:

    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)
    },
7

Thank you for the quick Response... I will try your hints...

8

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