# D2 third party node, problems with field named 'class'

**URL:** https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [14 July 2024 08:28 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473 "2024-07-14T08:28:52Z")
**Posts on this page:** 5
**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: [14 July 2024 08:28 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473/1 "2024-07-14T08:28:52Z")

</div>

In a D2 node I am creating I am trying to provide a field `class`. In the `defaults` section in the html file I have  
`class: {value: ""},`  
and in the html section

```auto
    <div class="form-row">
        <label for="node-input-class"><i class="fa fa-tag"></i> Class</label>
        <input type="text" id="node-input-class">
    </div>

```

The Class field appears in the edit dialog as one would expect, entering a value and deploying, then re-opening node shows that the entry has been saved. However, in the `props` sent to client side on connection I only ever see `"class":"",`. Is there some special handling of `class` in the core code? If I change the name to `myclass` then it works as expected.

---

<div class="post-metadata">

### Author: ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)
#### Post date: [14 July 2024 09:49 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473/2 "2024-07-14T09:49:40Z")

</div>

Just tried to add that to a core widget, and in the `props` indeed it is empty.

On the core widgets, the field is named `className` for the `props`, and used inside the w2idgets vue component.

Naming `class` is to set the value via `msg.class`.

There is code in `Flex.vue` for example:

```js
getWidgetClass (widget) {
            const classes = []
            // ensure each widget has a class for its type
            classes.push(`nrdb-${widget.type}`)
            if (widget.props.className) {
                classes.push(widget.props.className)
            }
            if (widget.state.class) {
                classes.push(widget.state.class)
            }
            return classes.join(' ')
        },

```

That seems to handle the stuff like `class` to add to the widget.

I would eventually, if attempting to emulate the `class` behaviour in a third-party widget, reuse the name `className` for the props and `msg.class`/ `msg.ui_update.class` for the messages, there are some code in `ui_base.js`, `Flex.vue` and some others base layout files that expect that.

---

<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: [14 July 2024 10:05 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473/3 "2024-07-14T10:05:30Z")

</div>

OK, thanks, I will do that.

---

<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: [14 July 2024 12:39 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473/4 "2024-07-14T12:39:04Z")

</div>

For anyone finding this, a corollary is that the core code automatically handles the server side of `msg.class` and `msg.ui_update.class`, saving the class in the state store and providing it to the client in `props.class`. In addition, on a refresh, it adds the class in to the client side html for the widget. It is up the node developer, though, to dynamically update the html when a message is received with either of those in it.

If the developer includes a `className` field then it appears that both server and client side are handled automatically by the core code. The class is merged in to the html in addition to any provided by msg.class.

---

<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: [13 August 2024 12:40 UTC](https://discourse.nodered.org/t/d2-third-party-node-problems-with-field-named-class/89473/5 "2024-08-13T12:40:02Z")

</div>

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