[Feature-13797]Change Label CSS - Menu Tree - Perspective 8.02

Hello -

I have a Menu Tree, and I’m trying to change the appearance of a certain item within the tree (essentially highlighting the active item). I have created a custom property for each item that tells me if the item target path matches the current page path:
if({page.props.path}={this.props.items[1].items[0].target},1,0)

I intended to use this property to drive an expression structure or use a transform, but I can’t seem to get the basic styling working. I can’t seem to independently change the text color, bgcolor, or style of each item.

Is there a per-item way to style?

Thanks!

I’m not sure why this post never had an update posted, but there is no way to style items individually yet. We do have an open feature ticket, but no ETA.

Do we have any update on this ? Thanks.

i might be able to wizard something up :mage:
what do you need?

Hey there :slightly_smiling_face: . I came across a demo application for Water/Waste Project by the following link
https://onlinedemo.inductiveautomation.com/data/perspective/client/OnlineDemo/apps/water/ChemFeed
I have set up the navigation in the same way that is shown on that application using Menu Tree , but what I am trying to achieve is to show the active selection. Attaching the screenshot for your reference.Looking forward to your help.Thank you in advance.

Screenshot 2022-02-24 180451

show how? like hightlight Chem Feed green ?

Like when I select the Overview screen then the small dark circle should be visible on overview label icon.

Seems like you will have to save the last button clicked or page url in a session prop and use it to bind to a style on the menu

Thank you Victor for your inputs, am new to the ignition system software. How can we bind it to the style ?Can you guide me in achieving it ?

You could use the navicon prop to add an icon behind it.
bind it to a custom session prop where you also save the id or name to on the itemclick event of the menu tree.
and then apply the icon if the session prop matches.

if you want an icon in front you can use my nifty cssinjection trick to inject a css style
you can apply this style to classes simlar as explained above

}.psc-selected:before{content:"🔘"}{

Thank you Victor, am working on it and will give you the update. Working on the second method you have suggested and can’t see the option of adding css style classes to label.icon.prop ?

the style is added to the item not the icon
image