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

Dashboard
1

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

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

2

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:

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.

3

OK, thanks, I will do that.

4

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.

5

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