# UIBUILDER: using uib-var custom attribute

**URL:** <https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [26 April 2026 20:17 UTC](https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855 "2026-04-26T20:17:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [26 April 2026 20:17 UTC](https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855/1 "2026-04-26T20:17:29Z")

</div>

I got my first object "SHM":

```auto
const myDevices = ['SHM'];
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        uibuilder.set(dev, msg.payload);

        if (dev === 'SHM' && msg.payload) {

            if (msg.payload.P !== undefined) {
                uibuilder.set('SHM_P_class', msg.payload.P < 0 ? 'green' : '');
            }

            if (msg.payload.P0 !== undefined) {
                uibuilder.set('SHM_P0_class', msg.payload.P0 < 0 ? 'green' : '');
            }
        }
    });
});

```

the value is shown, but I don´t get it green:

```auto
         <div uib-attr-class="SHM_P_class" class="default-style">
         Leistung: <span uib-var="SHM.P">--</span> Watt
        </div>

        <div uib-bind:class="SHM_P_class" class="default-style">
            Leistung P: <span uib-var="SHM.P">--</span> Watt
        </div>

        <div :class="SHM_P_class" class="default-style">
            Leistung P: <span uib-var="SHM.P">--</span> Watt
        </div>

```

do you have an idea?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 April 2026 21:45 UTC](https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855/2 "2026-04-26T21:45:01Z")

</div>

You are over-thinking things. 😃

The `uib-var` attribute and the `<uib-var>` component are short-cuts to updating things in the DOM. When working with web pages, remember that CSS is _separate_ to the HTML (DOM).

So if you want to update the colour of a visible element based on data from Node-RED, you don't need to set a variable, you can update the CSS or Style directly.

Typically for something like this, you'd probably just add or remove a style from the appropriate element, something like this:

```javascript
const myDevices = ['SHM'];
// NOTE: In your HTML, set the div to have
// an id matching the device name, e.g. <div id="SHM">
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        // Grab a ref to the appropriate div
        const el = $(`#${dev}`)
        // Set the style on the element
        el.style.color = msg?.payload?.P < 0 ? 'green' : ''
    });
});

```

---

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [27 April 2026 05:26 UTC](https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855/3 "2026-04-27T05:26:06Z")

</div>

Okay, I solved it with:

```auto
const myDevices = ['SHM', 'SDM630', ... , ...];
myDevices.forEach(dev => uibuilder.set(dev, {}));
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        uibuilder.set(dev, msg.payload);
        if (!msg.payload) return;
        Object.keys(msg.payload).forEach(key => {
            const val = msg.payload[key];
            const el = document.querySelector(`[uib-var="${dev}.${key}"]`);
            if (el) {
                if (val !== undefined && val !== null) {
                    el.innerText = val;
                }
                if (dev === 'SHM' && (key === 'P' || key === 'P0')) {
                    el.classList.toggle('green', val < 0);
                }
                if (dev === 'SDM630' && key === 'P') {
                    el.classList.toggle('red', val > 0);
                }
            }
        });
    });
});

```

Advantage: 0 (number) is displayed now

---

<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:** [11 May 2026 05:26 UTC](https://discourse.nodered.org/t/uibuilder-using-uib-var-custom-attribute/100855/4 "2026-05-11T05:26:54Z")

</div>

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