The template from Ignition will bald the text of the menu bar of the opened window, however when I duplicate the menu bar to create more screens, and the text will not change to bald. Anyone knows the trick and help me to locate where the template changes the text style?
Thanks in advance.
Give it until it’s 50 and if it’s not bald by then, you’ll need to shave it 
What do you mean duplicate the menu bar? Do you mean create more items in it? Is your menu component inside of a docked view?
I think you’ll need to bind to each item’s style prop and set the style.fontWeight to bold or normal based on {page.props.primaryView}
Yes, the menu bar is in a docked view on the left side of the screen, and right side view changes while I click on the menu bar. I duplicate the items of the menu bar from 0-3 to 0-6, however, the menu bar item 0-3 have their text change to bald while the corresponding view opens, but 4-6 will not.
OK thank you nminchin, I found it:
Items->1->style->fontweight
I would recommend checking if the menu items that were bolding before are using a style class and use whatever class they are using.
If you set font weight manually on a menu item it will override the style class which would mean a lot more work for you if you later decide you want to change the font of your menu items. If you use the same style class your other menu items were using then it would simply be a single change to the style class to update all of them.
The original item has a binding to the style.fontweight with an expression:
if ({value} = {this.props.items[2].target}, “bold”, “normal”).
But I am curious with your solution, binding the style to a class on how to make the class change the fontweight according to the opened view? In other words, how to trigger the style change?
You would need to use the same expression, but instead of binding on the fontWeight key, bind to the style.classes key, and instead of setting the value to “bold” and “normal”, bind it to perspective styles. @Steve_Laubach is correct, using this approach would be better as then you have a single definition, and if later you want to add other styles to it, you can do it from one place
I still cannot figure it out. Please explain a little more.
I created two classes: Perspective/Menu/Item and Perspective/Menu/Item_1; the only difference is Item fontweight is normal and Item_1 is bold.
Then I binding to Props->items->1->style->classes:
Expression: if ({value} = {this.props.items[1].target}, “Menu/Item_1”, “Menu/Item”)
Config Property binding: page.props.path (this.props.items[1].style.classes not working neither)
But the fontweight won’t change to Bold.
The way it works is binding to Props->Items->1->style->fontweight
Expression: if ({value} = {this.props.items[2].target}, “bold”, “normal”)
Config Property binding: page.props.path
And what does page.props.path mean?
Thanks a lot!
I don’t have the templates you’re working with because I have custom ones I typically use but I can explain a few things that might help you figure it out.
“page.props.path” is a reference to a property called “path” on your active page (views can be used on more than one page). A page is represented by that little icon in the lower left corner of your tabs for open screens. It will look like an Ignition box logo in 8.1.1 and a gear in prior versions. Pages are pre-defined paths in your Perspective project that load a view that you specify at design time. Think of it like a definition for a URL within a website (a link). When you create a view you can check a box to have it create a page configured to load that view automatically (in any of the more recent versions).
It sounds like you’re confusing style bindings with style class bindings. I put together a quick tutorial to show you how a style class binding works.
One tip I have is to test your style classes on label objects to make sure they are actually doing the style you expect. Basically, make 2 labels and set the style class for each one to make sure you’re getting the styling you expect.
Another thing to check with your script is that the item you’re binding has a property called “target” on every item and that target property is filled in with a value that lines up with whatever is displayed in your page path property. It sounds like you might need to fill those values in to properties on the control for the script to work. It looks like It’s trying to take the page path (configured by the thing I mentioned first) with the value in the target property.
I think a style class binding example would be helpful to understanding the difference between the code you’re looking at and the binding you’re trying to do. Here’s a quick tutorial. key thing to notice is the difference between binding to a style class and binding to a style. the code you posted is binding to a font style but you are trying to bind to a style class that you have defined.
Ok, that’s the setup. Now the binding.
Now you should be able to check and uncheck your “state” property on the label to change the style that is applied to it.
Thank you so much Steve. I went over the tutorial you gave to me, now the style class works with the labels and the menu items I was working on.
I think I understand the meaning of page.props.path, but why the active page is the view new opened, not the view with the menu items I clicked? When I click on one Menu Item (on left side view), it opens the item->Target on the right side view, looks like frame in HTML, i.e. , but where is such running statement, and can I configure it?
And could you point me the link to the explanations of all the properties, such like session.props.locale and session.props.id and page.props.pageId? I really appreciate your time.
page.props.path is showing you the path for the page that is currently open.
Double check your bindings on your menu items to make sure they’re opening the page you think they’re opening. Also, keep in mind that you can have multiple pages that open the same view and you might want to do that in some situations (ex. You have a generic view that displays information for a type of equipment and you have many pieces of that type of equipment.)
You can pass parameters into a page but look that up in help because the method to pass parameters into pages is not the same as passing parameters into views.
If you’re talking about a menu tree control, the navigation is built into the control in the “path” property for an item. Items can be nested and you can even do sub groups, etc. Like with anything else, you could assign scripts to that property but that could create some confusing behavior at runtime.
The best documentation I know of for the menu tree control is the official help. The documentation in the help is generally pretty good and sometimes there are links to the videos from the training which is even better.
https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Menu+Tree