Button background color binding expression

Is it possible to change a background color of a button through a binding Expression
Thank you

From https://docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/colors/color:

This function was designed to return color objects to Vision bindings, and will not work with Perspective bindings. Instead, Perspective color properties can simply use string hex codes to derive a color from a binding, for example: "#00FF00".

However, the Binding Preview is showing you that you have Error_InvalidPathSyntax. Did you enter that using the tag button on the right?

(I've moved your post from General Discussion to Ignition and tagged it as Perspective.)

In addition to being able to use a hex code like Transistor said, you can also use rbg(), rgba() or any other css color format. It just needs to be formatted as a string.

I did find this after posting and have updated it to a string and hex. saved and tested, still not working the button background doesn't update.

so the button just toggles a bit on and off and the same bit is going to be used as the color change. when testing Designer changes when monitoring but the website doesn't.

Your problem is that you're using an expression TAG binding instead of an expression binding. The result of a tag binding should always be a tag path, but in this case you're wanting a CSS color so you nerd to switch to using an expression binding.

2 Likes

That's it. I knew I was missing something when I wrote my answer.

Figured that out cheers, ended up with this worked better than a expression with and IF statement,
the if statement for some reason loaded as the Primary button in blue and then when clicked it changed back and forth between red and green. the below screen shot loads in current tag state and works fine

When your expression is only a tag, you should use a tag binding.
NOT an expression tag binding. Just a simple tag binding, then the same map transform.

Alternatively, you can use an expression script that would look like this:

case ({[default]Modbus_master_PLC/GVL_OPC_CableGrabLight},
  false, 'red',
  true, 'green',
  'blue'
)

or, since it's a boolean:

if ({[default]Modbus_master_PLC/GVL_OPC_CableGrabLight},
  'green',
  'red'
)
1 Like

Or for consistency across your application, use Perspective Built-In Themes | Ignition User Manual such as --success, --error and --callToAction. These will subtly change when you change your theme from light to dark, etc. Hard-coding colors isn't a great plan.

1 Like