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
Here's part of one I created.
props.items
[
{
"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": []
}
]
}
]
}
]
Configure an event on the tree, set it to onItemClicked, select a script action and add the following code.
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.
4 Likes
Thank you very much for your help.
I now have it working.
1 Like
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.
HI,
Ca you please show in detail.
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
Please guide. Thank you
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.
I designed again, when I click on LINE 1, give path page should open.
But not getting
Manually I changed selection data as you suggested, but after clicking again this data is coming. can you please check my code.
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.)
1 Like
sorry, below is the code that copied tree from project browser.
[
{
"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
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 (9.3 KB)
In post #6 I asked you,
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
[
{
"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"
}
}
}
}
}
]
1 Like
ok will check, get back to you.
when I drag the tree , these potatoes data is coming. I am not getting url
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.
1 Like
very sorry, I am getting same page on all links. below is my settings.
[
{
"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:
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.
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
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"**))
- 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.
- You have
**in the path. Remove those. - Why have you two navigations in the one event?
2 Likes
Ya I got the solution. Thank you so much
1 Like