Highlighting navigation button when particular screen is active

Hello,

I have created a navigation button consisting of a rectangle, label and svg image grouped them together (So not an actual button). Is there a way to highlight the border or background color of the navigation button when that particular screen is active?
This is the button.
image

Thanks!

Sounds like you’re in Vision?

You can bind to the client tag that holds the path to the currently open main window for this.

[system]client/user/currentWindow
https://docs.inductiveautomation.com/display/DOC80/System+Tags

1 Like

Yes I am in Vision. How can I bind background color or border property to the client tag? I tried doing it but gives me an error. Can you please elaborate?

You could use a Style Customiser. Create a custom property on your rectangle and bind it to the current main window tag. Then setup a style customiser on the rectangle which uses that custom property as the driving property.

I’m not a big fan of the style customiser since they’re all “magic” settings (static, not linked to anything). You can also bind to the background colour with an expression e.g.
if(true, color(12,13,14), color(21,23,24))

It’s harder to change the border. You can’t do it via a binding, but you can do it via a property change script by creating the border using Java objects. This is far more involved though.

1 Like


Highlight is the custom property used as driving property. What is the value 1 under Styles? When the current screen is open for that button the fill paint inside the rectangle should change.
Am I doing it right?

The Value column is the value that your driving property should be for that style row to become active. You should have a row in the Styles table for each of the values you want to apply a style for, e.g. for a boolean you would have 2 rows, 1 for true and one for false.

Thanks for the explanation. Its working!