[00:00] In our previous lesson, we showed how it is possible to use a tabstrip component for navigation as part of your Vision project. It is also possible to use a Tree component for this purpose. In fact, there is a built-in project template called Vision Tree Nav that you can use to take advantage of this functionality. We are currently seeing the Vision client for this very project template opened in front of us. Here on the west docked navigation window, you can see the Tree component used to navigate throughout all the windows in this Vision project. If I go to the Tree component and double-click on the alarms node, the currently open main window in my Vision client changes to my alarms window. Similarly, I can double-click on any of my nodes here and my Vision client will navigate to the window corresponding to that node in my tree. Let's head over to our designer to see how this works.

[01:05] Here I have the west docked navigation window open for us to see. This Tree component in my navigation window has a dataset type property named Items that it uses to populate the tree with all the nodes we see in it. If I click on this magnifying glass icon next to my items property, I will be able to see the items dataset. This dataset contains various columns which allow you to configure the look of the nodes in your Tree component. The columns we will focus on today are the windowPath and text columns. The path column tells the Tree component where each individual node should be located in the tree hierarchy. As you can see, my settings node is in the Administration/More section. This text column simply tells the node what text it should show. Now the windowPath column is special in the sense that it was added as a part of the project template I spoke about earlier.

[02:05] If I dragged in a brand new Tree component from my component palette, you will find that the windowPath column is missing from this items dataset. This windowPath column contains the literal path to my windows, and it's used in conjunction with a mouse clicked event script to trigger the swap window action that takes place whenever I double-click on a tree node. The Tree component does have its own customizer which allows you to gracefully add nodes to the tree. If I close my dataset editor and right-click on my tree, I can head over to Customizers, Tree View Customizer, and here I can add as many nodes as I see fit. The problem is that the windowPath column is missing from this customizer. Remember, this column was added as part of our project template, so using this customizer could potentially override our items dataset and delete the windowPath column which is needed for the mouse click navigation script to work.

[03:03] Let's take a look at that script now. I will close the customizer and right-click on my Tree component once more. I will select the scripting menu to bring up the scripting editor, where I will find the pre-configured mouse click script that is a part of our project template. Let's walk ourselves through this code really fast. First, we see an if condition checking the click count associated with my event. This basically ensures that this code will only fire when I double-click on a specific node. Next, in line three, I am fetching the row index from my selected node. This row index is used to know which row in my items dataset property I am double-clicking on. Next, I fetched the actual dataset in my items property. Event.source is a reference to the component that is invoking this script, which is our tree in this case. The .data refers to the items property's scripting name, which is data, and which we can confirm by simply hovering our mouse over the items property to find this property scripting name.

[04:06] Next, I have another if condition that checks if the row index of my selected node is not equal to -1. A -1 row index will mean that I do not have a node in my Tree component selected, or that I am not selecting a leaf node from my tree. Once I verify that I am double-clicking on my Tree component and that a leaf node is being selected, I get the windowPath value for my items dataset that corresponds to the row I clicked on. I get the windowPath value from my items dataset that corresponds to the row I clicked on. Once I have this windowPath, I simply call the swapTo navigation system function to swap to the specific window. Again, this script relies on the existence of the windowPath column in my items dataset. Using a brand new Tree component will not include this script or this windowPath column. So, if I wanted to add a new window to my tree node, all I have to do is add an entry to my tree items dataset property, so let's do that.

[05:11] I'll select my tree. And once again, I'll click on the magnifying glass icon next to my items property. I'll make the columns a bit bigger so we can see what we're doing, and I will click on the add row button on the upper right-hand corner of the dataset editor to add a new row. I want this new node to navigate to a main window named Main Window. So I will double-click on this cell and set the text column value to Main Window. I want this main window to be in the same HMI screens folder in my tree, so I will set the path column value to HMI Screens. Finally, I need to set the windowPath value to the actual path of my main window, as it appears in my project browser, like so. Of course you can configure an icon, background, foreground, et cetera, if you want, but we will keep it simple for this example and leave it as is.

[06:04] I will save my changes and head back to my Vision client. Here I will find my newly added node, and double-clicking on it should swap the window currently visible in my Vision client to my new main window as we configured it in the designer.