[Bug] Widget background colour fails to update dynamically with self.ctx.widgetConfig.backgroundColor

[jabr0ni]

Describe the bug I have taken a copy of the Simple Card widget in an attempt to modify it such that the background color of the widget changes dynamically based on the value (temperature) received. Adding, for example, the following code within the seself.onUpdate function the background color fails to update:

            self.ctx.settings.upThresh1 = 5; // test
            console.log("DEBUG_A = " + self.ctx.settings.upThresh1 + ", " + value);
            ///////////
            if(value >= self.ctx.settings.upThresh1){
                console.log("HEY");
                self.ctx.widgetConfig.backgroundColor = "Green";
            }
            ///////////

I have also found that the "Background Color" option changes to the correct color, however the widget display does not:

I have confirmed that the if case is being entered Your Server Environment

• AWS hosted on Ubuntu 20.04 server runnings TB 3.5.2 PE

Your Client Environment Desktop (please complete the following information):

• OS: Windows 11
• Chrome
• Version 115.0.5790.173 (Official Build) (64-bit)

To Reproduce Steps to reproduce the behavior:

1. Copy "Custom Card" widget
2. Add self.ctx.widgetConfig.backgroundColor to javascript

Expected behavior I would expect that if the value received is > self.ctx.settings.upThresh1 (i.e 5) then it would change the background color of the widget.

[ashelman-ec]

Experiencing the same problem. Any updates on this?

[sumin-denys]

Hello @jabr0ni,

After investigation, I found the reason for this issue. You need to add the following line self.ctx.updateWidgetParams(); to your Widget code.

Please familiarize yourself with this screenshot:

Also, I added a changed widget to this comment. change_widget_background_color.json