# Vertical menu tree in perspective

**URL:** <https://forum.inductiveautomation.com/t/vertical-menu-tree-in-perspective/75685>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [June 29, 2023, 6:55am UTC](https://forum.inductiveautomation.com/t/vertical-menu-tree-in-perspective/75685 "2023-06-29T06:55:28Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [June 29, 2023, 4:29pm UTC](https://forum.inductiveautomation.com/t/vertical-menu-tree-in-perspective/75685/8 "2023-06-29T16:29:49Z")

</div>

Here's how I did it.  
 ![Page configuration](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/c/ec99daea60bb4e5d39717ddec1ace55bca391352.png)  
_Figure 1. Do the Page Configuration._

 ![Menu structure editor](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/3503a7d3fe2e00829dfbd00976aacac6b3955f99.png)  
_Figure 2. Create the menu structure in text. I do this in the actual application. Note the use of the '|' pipe character to separate the menu and URL._

Bind the tree's `items` property to the text and apply a script transform on it:

> **The 'items' binding script transform.**
>
> ```auto
> def transform(self, value, quality, timestamp):
> # Update the test tree with the structure.
> #	Anchors and path URLs to be provided in form shown below using '|' (vertical bar) as separator.
> #	A001 |/Home
> #	A001/B001 |/Area/1/Bath/1
> #	A001/B001/C001 |/Area/1/Bath/1/Clamp1
> # 2023-06-29 Transistor
> 	
> items = []
> treeExpand = self.view.params.treeExpand
> 	
> for line in value.splitlines():
> if line.strip(): # Ignore empty lines.
> if line[0] != "#": # Lines can be commented out with #.
> current = items
> branch, url = line.split('|')
> 	
> for part in branch.strip().split("/"): # Strip off leading and trailing spaces.
> folderExists = False # Check if the current folder exists in our items list.
> for itemsPointerItem in current:
> if part == itemsPointerItem['label']:
> folderExists = True
> current = itemsPointerItem['items']
> 			
> if not folderExists:
> item = {
> "label": part,
> "expanded": treeExpand,
> "items": [],
> "data": {"url": url.strip()}
> }
> current.append(item)
> current = item['items']
> 	
> return items
> 
> ```
> 
> The selected item is available in `selectionData.0.value.url`
> 
> ```auto
> [
> {
> "itemPath": "3/0",
> "value": {
> "url": "/machine/Sealer03"
> }
> }
> ]
> 
> ```

On the menu tree add an `onItemClicked` event, Script:

```auto
def runAction(self, event):
	pagePath = self.props.selectionData[0].value.url
	system.perspective.navigate(pagePath)

```

Note that I've used a script to do the navigation. If found that if I used a navigation event that the navigation happened before `selectionData[0].value.url` had been updated and so a second click was required each time.

Have fun!

---

_[View the full topic](https://forum.inductiveautomation.com/t/vertical-menu-tree-in-perspective/75685)._