# How to handle widget class in a third party DB2 UI node

**URL:** <https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 August 2024 14:35 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449 "2024-08-26T14:35:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 14:35 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/1 "2024-08-26T14:35:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2024 14:39 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/2 "2024-08-26T14:39:57Z")

</div>

> [@Colin](#):
>
> I am unclear what the recommended way of handling class is

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`.

> [@Colin](#):
>
> Also, should `msg.ui_update.class` append to or replace the class in the widget setup?

Again, this should be a none issue as it is handled by base, but for the record, "append"

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 15:03 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/3 "2024-08-26T15:03:57Z")

</div>

> [@Steve-Mcl](#):
>
> 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`.

So I should call the field className?

Presumably I have to put something in my outer div in the vue file.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2024 15:07 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/4 "2024-08-26T15:07:12Z")

</div>

> [@Colin](#):
>
> So I should call the field className?

Yes. That is what the base components use. Anything else would not line up and you would have to implement the whole mechanism yourself.

> [@Colin](#):
>
> Presumably I have to put something in my outer div in the vue file.

Thats the but i am unclear on. I dont _think_ you need to. Give it a go and see.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 15:09 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/5 "2024-08-26T15:09:28Z")

</div>

I thought I would look at the ui-led sources, but the github link appears to be broken

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2024 15:17 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/6 "2024-08-26T15:17:34Z")

</div>

> [@Steve-Mcl](#):
>
> > [@Colin](#):
> >
> > Presumably I have to put something in my outer div in the vue file.
> 
> Thats the but i am unclear on. I dont _think_ you need to. Give it a go and see.

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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/045938defa9633718b049de4a860e7b235878095.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/ccdfa95ebc91299d1adf91881efa9b5b90f87a38.png)

It _should_ just work by virtue of you adding the `className` prop to the node defaults.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 15:30 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/7 "2024-08-26T15:30:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2024 15:35 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/8 "2024-08-26T15:35:33Z")

</div>

> [@Colin](#):
>
> 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?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 15:41 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/9 "2024-08-26T15:41:33Z")

</div>

> [@Steve-Mcl](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 August 2024 15:53 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/10 "2024-08-26T15:53:33Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 August 2024 20:35 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/11 "2024-08-26T20:35:02Z")

</div>

> [@Colin](#):
>
> > [@Steve-Mcl](#):
> >
> > 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 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

```auto
            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.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [27 August 2024 07:50 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/12 "2024-08-27T07:50:33Z")

</div>

I have opened an issue [Support for dynamic class in third party ui nodes · Issue #1240 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1240)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 September 2024 07:50 UTC](https://discourse.nodered.org/t/how-to-handle-widget-class-in-a-third-party-db2-ui-node/90449/13 "2024-09-26T07:50:54Z")

</div>

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