[00:00] The Ignition designer gives you the ability to tailor your Vision applications using custom menus and various enhancements to them. In this lesson, we'll show some examples of custom menus and also demonstrate how to set these up from scratch. Let's first take a look at some custom menus in an existing Vision application. Here, both the command and navigation menus are completely custom, added in the designer. We can see that each one also has some child sub options underneath and as well as some refinements such as icons, keyboard shortcut letters, tool tip text, and accelerator shortcut keys such as F1 or F2. You aren't required to make use of all these features, but they are here for your customization as desired. The command menu options aren't implemented yet, as we can see here, but the navigation ones are and they navigate between the three windows as shown below, or by using the accelerator keys F1, F2, and F3 at the keyboard, as I'm doing now, we can do the same thing.

[01:21] Let's next see how all this is done in the designer. In the designer, the menu customizations are accessed by going to the project menu, then the client events option, and finally to the client event scripts menu bar option, which is already selected here. In the menu structure pane here on the left, we can see that all the menu options are represented in a tree structure, each one having its own set of properties and each one potentially running its own script actions here in the scripting pane. For example, here, all we're doing is using system.nav.swapTo to display a specified existing window.

[02:05] For each menu element, you can potentially customize it further by adding a small icon, some tool tip text, an accelerator key such as one of the F keys, and the mnemonic character which will appear underlined in the menu option. Again, you aren't required to fill all of these out, they're just here for your applications use if desired. Now that we've seen the basics, let's set up a brand new menu item from scratch and customize it a bit. For starters, let's add a new top level menu item at the same level as the others on the client. So, we will click on the existing menu item command, and let's click add sibling, and we will click on it, give it a new name. How about new menu? And then, while it's still selected, we will add the child.

[03:06] And again, let's click on it and give it our own name. How about new child? Like so. And let's add a simple action, maybe just a simple pop-up message. So, system.gui. messagebox, and in parentheses and double quotes, maybe new child action here. We'll close it up like so, and then let's move this parent menu up in the order to the first spot with this up arrow, then we'll click, at the bottom, apply. And in the upper left, we will click save it to the gateway. And then when we go back to our minimized Vision client, we see the new menu in the first spot and new child underneath it.

[04:06] And when we select it, we see the message pop up we added, and everything is good. Of course, if we wanted to make our menu nicer, we could also add various customizations as we saw earlier. Let's see how this is done and how it will update our menu. So, for starters, let's dismiss our pop-up and restore a client event scripts dialog, and we'll put it alongside our client like so. Then let's select the new child for some customizations. Let's first add a small icon by clicking on this folder on the right and drilling down into the built-in icons, size 16, perhaps. And we'll just pick one that suits our fancy. How about this light bulb? We'll double-click on it. And we see it up here.

[05:03] By the way, we can also use our own icons for this too, if we want to. And let's add some simple tool tip text. How about new child tool tip text? Like so. The next- The difference between an accelerator and an mnemonic is that an accelerator is a key or key combination that can be pressed anywhere in the client to initiate a certain menu items action, whereas a mnemonic provides a keyboard based alternative to navigating a menu, but only when a particular menu is visible, and for us, also using the ALT key. So, let's add the following to the new menu. Let's add a N mnemonic. And to the new child, let's add a W mnemonic since the C is already spoken for for a command.

[06:01] And to the new child, let's add a... Oh, I don't know, let's add an F5 accelerator. Then what we'll do is we will apply our changes, then save to the gateway. So to see our changes, let's first bring the client event scripts back to the foreground and let's restore our client to have them side by side, then we can navigate in the client using ALT + N and then ALT + W to show the pop-up. Or dismissing the pop-up, we can do the same thing directly using F5 alone. So using all these options, we can configure our menu structure as much as we'd like to. You might notice a couple other menu options, windows and help.

[07:01] These are two standard menus added by the Vision client itself. We can hide the windows menu, but not the help one, or we can hide this menu bar entirely. However, the caveat is that we have to restart our client for such changes to take hold. So in this lesson, we've seen how to customize our Vision client menu bar with added menu items and various other refinements as our user needs dictate.