Menu tree item highlight after selection on click

Ignition
,
1

I am using "menu tree" component in perspective session for navigating between different graphics.
I am trying to find an option to "highlight" a particular menu item in the session after a menu item has been selected/clicked to launch?

Thanks.

2

This may become cumbersome depending on the amount of items in your menu but you could put an expression binding on the style class for each item that checks against a list of the 'selected' items.

The binding would return either no class (unselected) or a highlight class (selected).

3

This would normally be automatic if you have the Menu Tree component in a side or top dock.

Are you, by any chance, repeating the menu tree in each view? (They're not called "graphics"). That wouldn't be a sensible way to use it.

4

No, it does not highlight automatically even if it's in the side or top dock.

5

Are you looking to highlight the selected item as long as the corresponding view or page remains visible and the user is actively using it?
eg. below
image

6

I have resolved it by the following steps-

  1. Created Custom properties:
    image

  2. "Configure Events" > Scripts on Menu tree:

    image
    image1123×550 54.4 KB

  3. go to style class of the item that needs to be highlighted and bind with custom property with selectedTab. Add expression transform to select the style class:

image
image1347×723 89.9 KB

repeat for all the menu items.

1 Like
7

Fantastic!
Here is the script and style reference that works for me. The length of the menu tree can vary dynamically. If you prefer not to manually create a Map transform binding for each item, this solution could be quite helpful.

MenuTree>onItemClicked 
def runAction(self, event):
	def clear_Style(items):
		# remove the style
		for node in items:
			node["style"] = {"classes":""}
			if len(node["items"]) > 0:
				clear_Style(node["items"])
				
	items = self.props.items
	path = event.path
	clear_Style(items)
	for node in path[:-1]:
		items = items[node]["items"]
	
	items[path[-1]]["style"] = {"classes":"menu_selected"}
stylesheet.css 
.psc-menu_selected{
	background-color: var(--info);
	}
2 Likes