Expression Colour Binding, working in Designer, not in browser


Just wondering if someone can point me in the right direction, I have an expression binding for the colour of an Icon i wish to change due to the page id {page.props.pageId}. Something like if ({page.props.pageId} = "HLT", "orange" , "white").

This seems to work as expected in the designer. However on the browser the colour remains white in the case of above. I have tried #hex colours too, and the same thing happens. I think the image below captures all the elements involved...

1 Like

So after a little digging it seems that at running in the Browser {page.props.pageId} isn't equal to the sensible page name it is in the designer, such as "HLT" or "Home" but in my case "18870f6f"...

I have no idea what this is, any thoughts?


It seems I can use {page.props.title} to achieve what I want, but that doesn't seem correct...

You shouldn't be surprised. The designer is a very limited environment, necessary to achieve any design operations. Its preview only displays a single (fake) page. Real clients can have multiple tabs or windows open within a single session, so ID properties obviously cannot be the same.

Vision has similar limitations while testing in the designer. The designer is not and never will be a complete functional test. You must use real clients and real browsers.



Thanks and @pturmel for this, interesting and useful, I did read the pageID blurb and I didn't see this issue mentioned by Kevin.

What is the Ignition perspective prescribed way of keeping track of the current page? I'm used to a fair few SCADA systems and there's often (always) a "you'" ability, I assume Ignition has this and I'm just looking in the wrong places?

I guess while my views are extremely simple title is the easiest thing to use?