[00:00] Ignition projects that are large in scope can benefit from using a tree view component for their navigation strategy. The tree view component is listed under the tables tab in the component pallet of the designer. Let's take a look at one by dragging the component onto the window, we can see the tree view is populated with the sample tree hierarchy. I can go into preview mode and expand the east area and west area folders of the tree. The current tree is defined by the items property, which is the underlying data set. The items data dataset can be configured by going back into design mode and right clicking into the tree view customizer of the component. Every row on the items dataset must have a path and text value configured in order to display in the tree. The path determines the location of each node in the tree and the folders in the path must be separated with the separation character property of the component. By default, this is the forward slash.

[01:08] We can see the first item has a path of east area forward slash refrigeration and the text compressor one. If we look back at our tree, we can definitely see that the compressor one text, or node does show up under the refrigeration folder within the east area folder. The additional properties or columns in the customizer are optional, but they can enhance the tree view for users. I can change from the default icon to another icon by first closing out of the customizer and copying the path of a different icon From the image management tool. The path can be copied by right clicking on the image. Then I will paste this path for the icon value in the first row of the customizer. When I hit okay the new icon will display for the compressor one node in the east area refrigeration folder. Tool tips can be added to our nodes by simply adding the desired text to the tool tip cell.

[02:08] I will type in some text to the tool tip in the first row of the dataset and I will go into preview mode and hover over this node to see the tool tip appear. Finally, the colors of the background and foreground for the nodes can be changed, for when they are in selected or unselected states. I will change the unselected background to black and foreground to white and the selected background to red and foreground to green. If I go into preview mode, I can select the node and see the changes. I can add a new row to the dataset by clicking on the plus button within the tree view customizer. I'll give this row a path of north area forward slash refrigeration with the text of compressor one. When I hit okay, the folder's north area and refrigeration are added to the tree. The dataset can also be configured through a binding like an SQL query by clicking on the chain link icon next to the items property and choosing the SQL query tab.

[03:13] There are additional properties like auto sort, which sorts the tree alphabetically. If disabled, it will use the datasets layout and auto expand, which expands our entire tree when the window is opened. So there's quite a few ways to configure a tree view component for your project's navigation needs.