# Perspective Tree Component - Navigation example

**URL:** <https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 21, 2023, 10:50am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801 "2023-10-21T10:50:32Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anthony\_Watts](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@Anthony\_Watts](https://forum.inductiveautomation.com/u/Anthony_Watts)\
**Post date:** [October 21, 2023, 10:50am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/1 "2023-10-21T10:50:32Z")

</div>

I am looking for an example for the Perspective Tree component use for navigation.  
I would prefer to use it instead of the "Menu Tree" component.

I have created teh Tree, but can't work out how to call/display page views

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 21, 2023, 8:14pm UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/2 "2023-10-21T20:14:02Z")

</div>

Here's part of one I created.

> **props.items**
>
> ```auto
> [
> {
> "label": "Home",
> "expanded": true,
> "data": {
> "url": "/"
> },
> "items": []
> },
> {
> "label": "Features",
> "expanded": true,
> "data": {
> "url": "/help"
> },
> "items": []
> },
> {
> "label": "Performance",
> "expanded": true,
> "data": {
> "url": "/myDashboard"
> },
> "items": [
> {
> "label": "MyMachines",
> "expanded": true,
> "data": {
> "url": "/areaChart/MyMachine 1P"
> },
> "items": [
> {
> "label": "Mach03",
> "expanded": true,
> "data": {
> "url": "/machine/Mach03"
> },
> "items": []
> },
> {
> "label": "Mach04",
> "expanded": true,
> "data": {
> "url": "/machine/Mach04"
> },
> "items": []
> },
> {
> "label": "Mach05",
> "expanded": true,
> "data": {
> "url": "/machine/Mach05"
> },
> "items": []
> },
> {
> "label": "Mach06",
> "expanded": true,
> "data": {
> "url": "/machine/Mach06"
> },
> "items": []
> },
> {
> "label": "Mach07",
> "expanded": true,
> "data": {
> "url": "/machine/Mach07"
> },
> "items": []
> },
> {
> "label": "Mach08",
> "expanded": true,
> "data": {
> "url": "/machine/Mach08"
> },
> "items": []
> }
> ]
> }
> ]
> }
> ]
> 
> ```

![Tree as menu](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/7/d793ab3fa0f4e70181306996f690ebc330ed10f6.png)

Configure an event on the tree, set it to onItemClicked, select a script action and add the following code.

```auto
	import urllib
	pagePath = self.props.selectionData[0].value.url
	system.perspective.navigate(urllib.quote(pagePath))

```

You'll need to set up each URL on the Page Configuration dialog.

It works really well and makes a nice, clear, easily understood navigation system for an application or site.

---

<div class="post-metadata">

**Author:** ![Anthony\_Watts](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@Anthony\_Watts](https://forum.inductiveautomation.com/u/Anthony_Watts)\
**Post date:** [November 4, 2023, 12:04am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/3 "2023-11-04T00:04:54Z")

</div>

Thank you very much for your help.  
I now have it working.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 4, 2023, 5:57am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/4 "2023-11-04T05:57:20Z")

</div>

Good work.  
Don't forget to hit the "Solution" link below the post that best answered your question. That will add the ✓ symbol to your question on the index page.

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 6, 2023, 5:55am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/5 "2023-11-06T05:55:27Z")

</div>

HI,

Ca you please show in detail.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/df1a0e04ef4dcc731e931b4403f056e463329a27.png)

```auto
def runAction(self, event):
	import urllib
	pagePath = self.props.selectionData[0].value.url
	system.perspective.navigate(urllib.quote(MachineSummaryControls/Line9Summary_trial))

```

Note: MachineSummaryControls/Line9Summary\_trial  
this is my view path, that I want to open when clicks on LINE 1

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f7cc661c94ddd71d7789fb82e7361045b50e0b53.png)

Please guide. Thank you

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2023, 8:40am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/6 "2023-11-06T08:40:04Z")

</div>

Your tree's items structure isn't set up correctly. It should be in the form,

```
items
  ▼ 0
      label : CUPS
      expanded : true
    ▼ data
        url : MachineSummaryControls/Line9Summary_trial

```

Your `selectionData` looks weird. Where are all the `things` coming from? If you select `CUPS` it should look like this:

```

▼ selectionData
    ▼ 0
        itemPat : 0/0/0
      ▼ value
          url : MachineSummaryControls/Line9Summary_trial

```

The `url` value is what gets passed into the `runAction` script.

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 6, 2023, 11:56am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/7 "2023-11-06T11:56:28Z")

</div>

I designed again, when I click on LINE 1, give path page should open.  
But not getting

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/809f90184ef599413b5da0594488e5054aae97d9.png)  
Manually I changed selection data as you suggested, but after clicking again this data is coming. can you please check my code.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6f85f197564d5b5b72457e51f9b7c2d13ca7e3e2.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2023, 1:22pm UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/8 "2023-11-06T13:22:13Z")

</div>

> [@kavya\_shree](#):
>
> Manually I changed selection data as you suggested

You have misunderstood. Don't change the selectionData, change `items` so that `selectionData` gives the correct result.

`system.perspective.navigate(ulrlib.quote('/Line1Page'))`  
This line will always go to the same page - no matter which option you select on the tree. Instead, use the code I posted in post #2.

Please right-click on the Tree component in Project Browser, Copy and paste the configuration in here so we can replicate your setup. (Format it as code using the \</\> button. When you post pictures of code we have to type it all out again in our answers.)

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 6, 2023, 6:13pm UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/9 "2023-11-06T18:13:31Z")

</div>

sorry, below is the code that copied tree from project browser.

```auto
[
  {
    "type": "ia.display.tree",
    "version": 0,
    "props": {
      "items": [
        {
          "data": "I am string data for Item 1",
          "expanded": true,
          "items": [
            {
              "data": {
                "someKey": "Information here."
              },
              "expanded": true,
              "items": [
                {
                  "data": {
                    "things": [
                      "one potato",
                      "two potato",
                      "three potato",
                      "four",
                      "boilem, mash em, put em in a stew"
                    ]
                  },
                  "expanded": false,
                  "icon": {
                    "color": "#869DB1",
                    "path": "material/arrow_right",
                    "style": {}
                  },
                  "items": [],
                  "label": "LINE 1"
                },
                {
                  "data": 3.14159265359,
                  "expanded": false,
                  "items": [],
                  "label": "LINE 2"
                }
              ],
              "label": "TARGETACTUAL"
            }
          ],
          "label": "CUPS"
        },
        {
          "data": [
            1,
            2,
            77,
            89,
            123
          ],
          "expanded": true,
          "items": [
            {
              "expanded": true,
              "items": [
                {
                  "expanded": false,
                  "items": [],
                  "label": "LINE 1"
                },
                {
                  "data": {},
                  "expanded": false,
                  "items": [],
                  "label": "LINE 2"
                }
              ],
              "label": "PRODUCTION STATUS"
            }
          ],
          "label": "CONES"
        }
      ],
      "selection": [
        "1"
      ],
      "selectionData": [
        {
          "itemPath": "1",
          "value": [
            1,
            2,
            77,
            89,
            123
          ]
        }
      ],
      "appearance": {
        "expandIcons": {
          "collapsed": {
            "path": "material/arrow_right"
          },
          "expanded": {
            "path": "material/arrow_drop_down"
          }
        },
        "defaultNodeIcons": {
          "expanded": {
            "path": "material/folder_open"
          },
          "collapsed": {
            "path": "material/folder"
          },
          "empty": {
            "path": "material/stop"
          }
        }
      }
    },
    "meta": {
      "name": "Tree"
    },
    "position": {
      "basis": "249px"
    },
    "custom": {},
    "events": {
      "component": {
        "onItemClicked": {
          "config": {
            "script": "\timport urllib\n\tpagePath = self.props.selectionData[0].value.url\n\tpath = 'http://sjohignpgw01s:8088/data/perspective/client/Orion/TargetActual_MES'\n\tsystem.perspective.navigate(urllib.quote(path))\n\t"
          },
          "scope": "G",
          "type": "script"
        }
      }
    }
  }
]

```

below is the script

```auto
	import urllib
	pagePath = self.props.selectionData[0].value.url
	system.perspective.navigate(urllib.quote('/LINE 1 Page'))
	

```

please show how to add one more folder under CUPS like TARGETACTUAL.  
please find the attached project page.  
[MENU\_Tree.zip](https://forum.inductiveautomation.com/uploads/short-url/cNq0ssCHpl2Znjd2b27ZKqQ9ZYb.zip) (9.3 KB)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 6, 2023, 6:43pm UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/10 "2023-11-06T18:43:25Z")

</div>

In post #6 I asked you,

> [@Transistor](#):
>
> Your `selectionData` looks weird. Where are all the `things` coming from? If you select `CUPS` it should look like this: ...

You didn't answer and the tree structure is still full of amazing garbage! Why are there potatoes and numerical arrays in there and not a single `"data" : {"url": "<url>"}` structure in there as shown in post #6?

Paste this into the root of the view in your Project Browser. Switch to Preview Mode and watch `PROPS.selectionData` as you navigate the tree. Then have a look at the data structure to understand how it's supposed to be configured.

> **Hyperlink tree JSON**
>
> ```auto
> [
> {
> "type": "ia.display.tree",
> "version": 0,
> "props": {
> "items": [
> {
> "data": {
> "url": "/overview/cups"
> },
> "expanded": true,
> "items": [
> {
> "data": {
> "url": "/overview/cups/targetActual"
> },
> "expanded": true,
> "items": [
> {
> "data": {
> "url": "/machine/cups/line1"
> },
> "expanded": false,
> "items": [],
> "label": "Line 1"
> },
> {
> "data": {
> "url": "/machine/cups/line2"
> },
> "expanded": false,
> "items": [],
> "label": "Line 2"
> }
> ],
> "label": "Target actual"
> }
> ],
> "label": "CUPS"
> },
> {
> "data": {
> "url": "/overview/cones"
> },
> "expanded": true,
> "items": [
> {
> "expanded": true,
> "items": [
> {
> "expanded": false,
> "items": [],
> "label": "Line 1",
> "data": {
> "url": "/machine/cones/line1"
> }
> },
> {
> "data": {
> "url": "/machine/cones/line2"
> },
> "expanded": false,
> "items": [],
> "label": "Line 2"
> }
> ],
> "label": "Production status",
> "data": {
> "url": "/overview/cones/productionStatus"
> }
> }
> ],
> "label": "CONES"
> }
> ],
> "selection": [
> "1/0/0"
> ],
> "selectionData": [
> {
> "itemPath": "1/0/0",
> "value": {
> "url": "/machine/cones/line1"
> }
> }
> ],
> "appearance": {
> "expandIcons": {
> "collapsed": {
> "path": "material/arrow_right"
> },
> "expanded": {
> "path": "material/arrow_drop_down"
> }
> },
> "defaultNodeIcons": {
> "expanded": {
> "path": "material/folder_open"
> },
> "collapsed": {
> "path": "material/folder"
> },
> "empty": {
> "path": "material/stop"
> }
> }
> }
> },
> "meta": {
> "name": "Tree"
> },
> "position": {
> "basis": "506px"
> },
> "custom": {},
> "events": {
> "component": {
> "onItemClicked": {
> "type": "script",
> "scope": "G",
> "config": {
> "script": "\timport urllib\n\tpagePath = self.props.selectionData[0].value.url\n\tsystem.perspective.navigate(urllib.quote(pagePath))\n\t"
> }
> }
> }
> }
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 7, 2023, 3:22am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/11 "2023-11-07T03:22:46Z")

</div>

ok will check, get back to you.  
when I drag the tree , these potatoes data is coming. I am not getting url

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 7, 2023, 8:04am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/12 "2023-11-07T08:04:50Z")

</div>

> [@kavya\_shree](#):
>
> when I drag the tree , these potatoes data is coming.

Sorry, I see that now. The tree component is supplied with strange initial data. I never noticed before.  
Yes, you need to remove all of those and replace each data with a URL.

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 7, 2023, 9:10am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/13 "2023-11-07T09:10:02Z")

</div>

very sorry, I am getting same page on all links. below is my settings.

```auto
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "style": {
        "classes": "Menu/Menu_Vertical"
      }
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.display.tree",
        "version": 0,
        "props": {
          "items": [
            {
              "data": {
                "url": "/overview/cups"
              },
              "expanded": true,
              "items": [
                {
                  "data": {
                    "url": "/overview/cups/targetActual"
                  },
                  "expanded": true,
                  "items": [
                    {
                      "data": {
                        "url": "\"/TargetActual_MES\""
                      },
                      "expanded": false,
                      "items": [],
                      "label": "Line 1"
                    },
                    {
                      "data": {
                        "url": "\"/Line9Summary_trial_MES\""
                      },
                      "expanded": false,
                      "items": [],
                      "label": "Line 2"
                    }
                  ],
                  "label": "Target actual"
                }
              ],
              "label": "CUPS"
            },
            {
              "data": {
                "url": "/overview/cones"
              },
              "expanded": true,
              "items": [
                {
                  "expanded": true,
                  "items": [
                    {
                      "expanded": false,
                      "items": [],
                      "label": "Line 1",
                      "data": {
                        "url": "/machine/cones/line1"
                      }
                    },
                    {
                      "data": {
                        "url": "/machine/cones/line2"
                      },
                      "expanded": false,
                      "items": [],
                      "label": "Line 2"
                    }
                  ],
                  "label": "Production status",
                  "data": {
                    "url": "/overview/cones/productionStatus"
                  }
                }
              ],
              "label": "CONES"
            }
          ],
          "selection": [
            "0/0/1"
          ],
          "selectionData": [
            {
              "itemPath": "0/0/1",
              "value": {
                "url": "/machine/cups/line2"
              }
            }
          ],
          "appearance": {
            "expandIcons": {
              "collapsed": {
                "path": "material/arrow_right"
              },
              "expanded": {
                "path": "material/arrow_drop_down"
              }
            },
            "defaultNodeIcons": {
              "expanded": {
                "path": "material/folder_open"
              },
              "collapsed": {
                "path": "material/folder"
              },
              "empty": {
                "path": "material/stop"
              }
            }
          }
        },
        "meta": {
          "name": "Tree_0"
        },
        "position": {
          "basis": "506px"
        },
        "custom": {},
        "events": {
          "component": {
            "onItemClicked": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\timport urllib\n\tpagePath = self.props.selectionData[0].value.url\n\tsystem.perspective.navigate(urllib.quote(\"/TargetActual_MES\"))\n\tpagePath = self.props.selectionData[0][1].value.url\n\tsystem.perspective.navigate(urllib.quote(\"/Line9Summary_trial_MES\"))\n\t\t\n"
              }
            }
          }
        }
      }
    ]
  }
]

```

script:

```auto
import urllib
	pagePath = self.props.selectionData[0].value.url
        # display Line 1
	system.perspective.navigate(urllib.quote("/TargetActual_MES"))
        # display Line 2
	pagePath = self.props.selectionData[1].value.url
	system.perspective.navigate(urllib.quote( **"/Line9Summary_trial_MES"** ))
		

```

I dont know where I am missing, Is there any video is there for this topic.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 7, 2023, 9:40am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/14 "2023-11-07T09:40:12Z")

</div>

**The JSON**  
`"url": "\"/TargetActual_MES\""`.  
You have somehow pasted in strings with escaped quotation marks, **`\"`**. Remove them. It should read,  
`"url": "/TargetActual_MES"`.

`"url": "\"/Line9Summary_trial_MES\""`.  
Same problem. It should read,  
`"url": "/Line9Summary_trial_MES"`.

When you look at the properties in the Perspective Property Editor you should not see quotation marks, `"..."` in any of the values.

**The script**

```auto
import urllib
	pagePath = self.props.selectionData[0].value.url
        # display Line 1
	system.perspective.navigate(urllib.quote("/TargetActual_MES"))
        # display Line 2
	pagePath = self.props.selectionData[1].value.url
	system.perspective.navigate(urllib.quote( **"/Line9Summary_trial_MES"** ))

```

1. In post #8 I pointed out that you had hard-coded the target URLs into your script. If you do that they will always go to the same page. You still have that problem in the script above. Read the post again.
2. You have `**` in the path. Remove those.
3. Why have you two navigations in the one event?

---

<div class="post-metadata">

**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\
**Post date:** [November 8, 2023, 4:44am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/15 "2023-11-08T04:44:41Z")

</div>

Ya I got the solution. Thank you so much

---

<div class="post-metadata">

**Author:** ![srija\_somisetty](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@srija\_somisetty](https://forum.inductiveautomation.com/u/srija_somisetty)\
**Post date:** [March 1, 2024, 7:02am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/16 "2024-03-01T07:02:17Z")

</div>

i have used code you have given in 2nd post but it is navigating me to the same page every time can you please help

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 1, 2024, 9:32am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/17 "2024-03-01T09:32:23Z")

</div>

> [@srija\_somisetty](#):
>
> can you please help

Not if you don't show (1) what you have done, (2) what you expected and (3) what you got.  
Look in post #2 at the props.items JSON and, in particular, at the "url" values.

* * *

Tip: if you are replying to a specific user then use the Reply button under the post or use the `@username` syntax so they get an inbox notification.