Two Tier Navigation Example
- To create first level tabs, add a Tab Strip component to a docked window and give it a name like First Tier Tabs.
- Right click on the Tab Strip and select the Customizers > Tab Strip Customizer.
For this Tab Strip, we want to set the Navigation Mode to Disabled, as it will not be swapping any windows.
Click Add Tab to create a new First Tier Tab. Enter a keyword for your Tab name. (i.e., Reporting) in the Window Name and Display Name fields. The Window Name property is not important here, since the Tab Strip is not swapping to any windows.
Press OK after adding a few first tier tab categories.
- Add a second Tab Strip component immediately below the first. Name it one of the categories that were created in the first tier (i.e. Reporting Tabs)
- Right click on the Reporting Tabs Tab Strip and select the Customizers > Tab Strip Customizer.
Add Tabs like you would for a normal Tab Strip, but only add tabs that fit that category of windows.
Main Windows already created
This step assumes you already have your second tier main windows created in your Project Browser.
Create a second tier Tab Strip component for each category that was made in the first tier Tab Strip, stacking the second tier Tab Strips on top of one another.
- The second tier tabs can be shown or hidden depending on what tab is selected in the first tier.
- Select a second tier Tab Strip.
- Go to the Property Editor, select the Visible binding icon, and select the expression binding.
Set up an expression to be true when the appropriate first tier tab is selected.
- Set up something similar on all second tier Tab Strip components.
- Save and Publish your project.
- Open your project in the Client, click on the various tabs to see your first and second tier tabs switch between the different windows.
2nd Tier Tab - Report 1
2nd Tier Tab - Report 2