[00:00] In an Ignition Vision application, it is common to use tabs as a navigation mechanism. Here in my Vision client, I have two windows that opened on startup. I have a north dock window with a navigation tab strip and a main window. I am not able to close this navigation window because it will be my application's main navigation mechanism. Clicking and selecting different tabs from my doc window will essentially swap between the different windows and my project, ensuring that only one main window is opened at any given time. Let's walk down to our designer and see how this works. Here I have the north dock navigation window open, which as you can see from the icon on the right in the project browser, is configured to open on startup, just like my overview window up here. A window can be configured to open on startup by simply right-clicking on it from the project browser and selecting the Open On Startup option.

[01:09] Remember to only ever have one single main window configured to open on startup. Now, the tab strip component has a built-in property called Navigation Mode that allows it to swap to any vision window in your project. This is exactly what we look for to implement a typical navigation strategy. To access the configuration behind the tab strip's navigation mode, we have to head to its customizer. With the tab strip selected, I will right-click, hit the Customizers menu, and get to the Tab Strip Customizer. From this customizer, I can select each individual tab, and using the window name dropdown list, I can configure this tab to swap to any vision window in my project. I can also configure the text that appears on the tab by using the Display Name setting here. I can also see Appearance settings from when the tab is selected or unselected, along with some text settings on the bottom left.

[02:11] With one of my existing tabs selected, pressing the Add Tab button will add a new tab that follows the same configuration as my previously selected tab. This will ensure that all of my newly added tabs will have the same shape and configuration. With my new tab added, I will configure its display name to be Main Window. I will then select my main window from my Windows Name dropdown list. Once I do this, I will press Okay and save my changes. Heading back to the Vision Client, I can now use this tab to navigate to my main window, like so. Let's head back to our designer. It is also possible to implement a two-tier navigation mechanism that involves two sets of tabs to navigate around various areas in your project.

[03:06] In fact, ignition has a built-in template project called Vision Two-Tier Tab Nav that you can use. Here in my project browser, I have the same doc navigation window that our two-tier tab nav project template uses. There are essentially two tab strips in this window in charge of navigation. The visibility of these two navigation strips is controlled by a third tab strip named First-Tier Tabs. This first-tier tab strip is here showing two options, HMI screens, and Administration. And as you can see in its navigation mode property, it is disabled. Now, one of the two tab strips in charge of navigation can be seen here named Administration Tabs. You'll notice this visibility property has an expression binding that will only allow this tab strip to be visible when the first-tier tab strip selected tab equals administration.

[04:04] If I put my designer in preview mode and select the HMI screens tab in the first-tier tab strip, when I get out of preview mode, you will notice that a different tab strip appears right below named HMI Screen Tabs. This tab strip's visibility property is also controlled by the first-tier tab strip using an expression binding, and it will only allow this tab strip to be visible when the first-tier tab strip selected tab equals HMI screens. Now, the HMI screen and administration tab strips both have their navigation modes enabled and are configured to navigate to a different set of windows. Which tab strip shows up for the user is again determined by the first-tier tab strip. To test this, let's first disable the regular navigation window from opening on startup by right-clicking on it, like so. I can then right-click on my navigation two-tier window and configure it to open on startup.

[05:05] I will now save my changes. I will then use the F10 shortcut key to launch a vision client very quickly and test this functionality. Once I log into my vision client, I will be able to control which navigation tab strip is visible in my window, and I will be able to navigate to windows configured on both tab strips individually.