[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 palette 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 a sample tree hierarchy. If I go into preview mode, I can expand the east area and west area folders of the tree. The current tree is defined by the items property, which is the underlying dataset. The items dataset can be configured by going back into design mode and right clicking into the tree view customizer of the component. Every row in 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, the separation character is the forward slash. We can see the first item has a path of east area forward slash refrigeration and the text of compressor one.

[01:07] If we look at the tree, 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 you can paste this path into the icon cell for the icon you want to change. 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 our nodes by simply adding the desired text to the tool tip cell. I will type in some text in the tool tip in the first row of the dataset. Then 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 when they are in selected or unselected states.

[02:06] So I can set the unselected background to black and foreground to white. For selected I'll choose a red background and a green foreground. When I go into preview mode, we can see these color 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 folders 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. 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.