You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
LESSON
Navigation – Tree View
Description
Learn how to navigate through your project using the multi-tier tree view component.
Video recorded using: Ignition 7.7
Transcript
(open in window)[00:00] You can use a Tree View for navigation in Ignition. In fact, there's a built-in skeleton project that you can start from in the Designer for this purpose. That's what we're seeing here. It uses a typical navigation strategy again where I have the docked west window that contains the Tree View to navigate around to various areas, and that window's always open. And I have a main screen here on the right hand side. It's filling in the rest of the space. So if go to the Tree View and click on Main Window 2 and double click, it's going to actually swap out the Main Window 1 to Main Window 2. So I can actually organize all the windows in my entire project into this Tree View into a hierarchy that users can actually double click on to select and go to that area. In the Designer, how you configure this is you add a Tree View Component to the Window. The Tree View Component has a property called Items which contains all of the items you're going to see in the Tree View. And the fact that you can actually right click, go into the Customizer and see all these items in the Tree View Customizer. Now with this one, if you're using the skeleton project, you cannot go into the Customizer at all because what it's going to do is overwrite that item's data set. And we don't want to overwrite it because there's a special column we've added to the items data set that it's going to use to know which window we're going to navigate to. So do not use the Customizer. Go into the Items data set, and click on the little magnifying glass in the table to actually see the entire data set here, all the rows and columns. The very first column of every row is the window that we want to navigate to. As you can see it's going to Main Windows4/Main Window 1 and then two and then three for these three windows. The path is what is going to show up in the Tree View for which a folder it's going to be inside of. We want this path to be different than the window path because of how we need to organize our windows in Designer and the way we want to show them on the Tree View. So we want to keep those two things separate. If you use the Customizer, it's going to wipe out this windowPath column, and it'll no longer work for navigation. So you want to make sure you add new rows inside the data set here and not the Customizer. So once you have the window path set for all of your various Tree View items, on the component itself there's a script for when you double click on it to open up that window. So you can right click, go down to Scripting, go here to mouseClicked, and you'll see that if event.clickCount is equal to two, meaning if they do a double click, which you can change this to be one if you want to, if they do a double click, it's going to get the selected item, the index of the selected item, it's going to get the item's data set, so I know all the items that exist in there. Making sure that what they selected is an actual leaf note 'cause I don't want to select a folder here. I know it's a leaf note, I'm going to get the window path, which is going to get the value out of the data set at that whatever row we had selected at the windowPath column. And once I get that windowPath, I'm going to call swapTo, the scripting function system.nav.swapTo to swap to that window. So the tab strip component, if you were using tabs, it has this built into it behind the scenes. What we're doing is adding this functionality to the Tree View component by this little simple script here so that we can actually navigate to various windows. So as you can see, once I do that, as I add more items in there. In the run time, I double click on the item, it picks out that window path and swaps that window on the right hand side. Of course, you can do more in the Tree View, like you could have it swap certain windows and open up other windows if you want to customize that further.