Navigation - 2 Tier
2 Tier Navigation involves using 2 sets of tabs to navigate around various areas of your project. Ignition has a built-in skeleton project that you can start from to build your new project in the Designer and customize it to fit your needs. It uses a typical navigation strategy. There are 2 windows that open up on startup: a docked north window that contains tabs that are always open to do navigation, and the main window at the bottom which fills in the rest of the space.
In the docked north window there are 2 sets of tabs. The first tier component has the 'HMI Screens' and 'Administration' tabs which contain multiple main windows. The HMI Screens tab has one main window on the second tier called Overview, and the Administration tab contains 3 main windows. Each second tier tab represents a main window and when clicked will swap out the bottom window ensuring only one main window is visible at a time. This 2 Tier Navigation strategy lets you organize all your windows into different groupings by having the first layer of tabs.
In the Project Browser, you will see multiple Tab Strip components. In this example, there are two tabs named ‘HMI Screens’ and ‘Administration’. Click on the first tier tab. You will notice that the Navigation Mode property is set to Disabled and does not have any navigation functionality.
In the same example, the Adminisration Tab component has 3 tabs named ‘User Management’, 'Schedule Management' and ‘Roster Management’. Click one of these second tier tab strip components. The Visible property for the second tier tabs is bound to a simple expression looking at the first tier tab. You can see the expression by clicking on the binding icon for the Visible property.
The second tier tabs will only be visible based on which first tier tab is selected as shown in the example below. When the Administration tab is selected, Ignition displays the Administration Tab components: User Management, Schedule Management and Roster Management.
In the Project Browser, click on the Administration Tab component. You will notice that the Navigation Mode property is set to Swap to window. Each tab on a second tier tab strip represents a main window, and when clicked it, will swap out the main window ensuring only one main window is visible at a time.
You can also go into the Navigation Tab Strip Customizer to configure tabs on both tiers that best fit your requirements.
The 2 Tier Navigation strategy lets you organize your main windows into different sections making navigation easy for users.