Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



The Tree View navigation strategy is excellent for large project structures. Instead of a tab strip, which can take up a lot of space, the windows are instead listed out in a Tree View. Users can double click on an item in the tree view and it will swap out one main window for another. The list is fairly compact, and can contain folders, helping you to group similar windows just like you would in the project
browser.

Editor_notes

Remove the 2nd sentence above "Instead of a tab strip..." and replace with the following sentence.

It uses a typical navigation strategy again with a docked west window that contains a Tree View to navigate around to various areas.





Editor_notes

Replace the image above with the following image.



On_this_page



Scroll HTML Exporter Ignore


Iulink
URLhttps://www.inductiveuniversity.com/videos/navigation-tree-view/8.0
NameNavigation - Tree View





  1. Add a Tree View component to a docked window.
    1. Set up some objects using the Tree View customizer. In the image below, there are four objects, each corresponding to a different window.



      Editor_notes

      Replace Step 1 with the following:

      In this example, we are using the Tree View Nav project template which is set up when the project is created. By default, Tree View navigation comes with several default folders to help get you started. This simple example adds one new main window.

      Once you create your project and set the Tree View as your navigation strategy, open the Project Browser, and expand the Main Windows folder. Click the Navigation folder to open the skeleton project, then select the Tree property. 





  2. From Property Editor, find the Items property and click on the Dataset Viewer  icon. 



    This brings up a dataset editor.  You will see a number of columns that identify how each tree view item is displayed, similar to the customizer where each row corresponds to a node in the tree view.


    Editor_notes

    Delete the last sentence in Step 2 (under the image).  Also in Step 2, replace the dataset viewer icon with this updated icon....


  3. Add a column to the dataset using the Add Column  icon. Call the column windowPath and set it to column position 0. For each row, give it a value of the path to the window within the project browser.




    Editor_notes

    Replace Step 3 (including the image) above with this new Step 3 content and image. 

    3.This brings up a dataset editor.  You will see a number of columns that identify how each tree view item is displayed. Each row corresponds to a node in the tree view. The windowPath column is the window that we want to navigate to.  The path is the folder that the window will display in the Tree View.  

    Note: This example assumes you already have your new window created in your Project Browser.

    4. Let's add a new main window under Administration.  To add a new Main Window (i.e., Reports) we first need to add a row.  Click the Add Row icon  and populate the fields manually using the data from the previous row, or you can also copy the entire dataset into a notepad where you can manually manipulate the data to add a row, and then paste it back into the dataset editor.  Click OK


    Note:  Do not use the Tree View Customizer to edit any of your data. Use only the Dataset Editor, otherwise it will overwrite that item's dataset. 






  4. You can then add a script that will use the newly added windowPath to open the correct window when a user double clicks on a node. Right click on the Tree View component and select Scripting.

  5. Select the mouseClicked event handler, and add the following script to the Script Editor tab.

    Code Block
    languagepy
    titlemouseClicked code
    # If the user performs a double click, open the appropriate window
    if event.clickCount == 2:
    	row = event.source.selectedItem
    	data = event.source.data
    	if row != -1:
    		# Grab the window path value out of the tree view's items dataset
    		windowPath = data.getValueAt(row, "windowPath")
    		system.nav.swapTo(windowPath)


    Editor_notes

    Add the image below under the code block above.



  6. Click OKNow you can save your project and test out the component.

    Note
    titleAdding New Nodes to the Navigation Tree

    If you need to add new nodes to the tree, you can still add them with the Customizer, but you will notice that the windowPath column we added does not show up. This is because the customizer only recognizes a certain set of columns, and ignores the others. So after adding new nodes with the Customizer, simply open up the dataset to provide values for the windowPath.


    Editor_notes

    Replace the last sentence is Step 6 with the following.

    Save your project and launch the Vision Client and test out the Tree View navigation. 



Editor_notes

Add this image under Step 6. 



Next_link




...