It seems that the dashboard code automatically handles some aspects of class for third party nodes. I am unclear what the recommended way of handling class is, such that I can provide a class field in the widget, and a msg.class passed in will get appended as an extra class to the widget (which I assume is what is wanted). Also, should msg.ui_update.class append to or replace the class in the widget setup?
Not sure you need to do anything. Pretty sure it is all handled by the base - so long as your node has a className: { value: '' } in defaults.
Again, this should be a none issue as it is handled by base, but for the record, "append"
So I should call the field className?
Presumably I have to put something in my outer div in the vue file.
Yes. That is what the base components use. Anything else would not line up and you would have to implement the whole mechanism yourself.
Thats the but i am unclear on. I dont think you need to. Give it a go and see.
I thought I would look at the ui-led sources, but the github link appears to be broken
As an example, the ui-text node does NOT implement anything at all for className but if you add a className value to a ui-text, it gets applied to the class list.
It should just work by virtue of you adding the className prop to the node defaults.
OK, the className field in the config is getting to the DOM ok.
However, if I send in a class using msg.class then nothing happens immediately. If I refresh the page then it is picked up. It seems I have to put something in my server side to pickup the class from the message, and put it somewhere.
Hmmm I'm not sure on this for contrib nodes. There were no contribs when I added class support. IMO is should just work!
What happens if you send msg.ui_update.class ? Does the Dom get updated immediately?
No, in fact that doesn't appear to work at all.
I would implement what you have (class support via edit form) and raise an issue around seamless support in the core project for dynamic class update (unless @joepavitt has some other words of wisdom)
I was wrong stating that it didn't work at all. msg.ui_update.class does add the class at the server end, but, as with msg.class, it doesn't get inserted into the DOM until a page refresh.
At the client I can see that on page refresh the class is passed in props.class so I tried in the client
if ("class" in msg) {
console.log(`setting props.class to ${msg.class}`)
this.props.class = msg.class
}
and I can see that it does set props.class, but it doesn't have any effect on the DOM.
I have hacked it for the moment by also explicitly including props.class in the outer div, and that does work, but it is wasteful as on a page refresh the class now appears twice.
I will wait a bit for Joe to respond and submit an issue if necessary.
I have opened an issue Support for dynamic class in third party ui nodes · Issue #1240 · FlowFuse/node-red-dashboard · GitHub
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
