Mutli Project and/or Multi Gateway Menu Tree Navigation in Perspective

Ignition
1

I want/need to find a way to navigate to other projects, and in the near future, projects on other Gateways. My layout right now is like the “Gateway A” below and soon to be joined with “Gateway B”

image
image1184×1104 37.2 KB

Each gateway represents a separate facility in a separate city. I was hoping to copy the “Project Nav” to each gateway so if A needs to see B they can as long as the network is up but each can function independent. I’m hoping to use a Menu Tree docked on the left for my navigation. I used something like this

[
  {
    "target": "",
    "items": [
      {
        "target": "http(s)//<gateway_address_A>:<port>/data/perspective/client/Project A1/myPage",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Project A1",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      },
      {
        "target": "http(s)//<gateway_address_A>:<port>/data/perspective/client/Project A2/myPage",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Project A2",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      }
    ],
    "navIcon": {
      "path": "chevron_right",
      "color": "#6C6C6C"
    },
    "label": {
      "text": "Gateway A",
      "icon": {
        "path": "menu_list"
      }
    },
    "showHeader": true
  },
  {
    "target": "",
    "items": [
      {
        "target": "http(s)//<gateway_address_B>:<port>/data/perspective/client/Project B1/myPage",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Project B1",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      },
      {
        "target": "http(s)//<gateway_address_B>:<port>/data/perspective/client/Project B2/myPage",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Project B2",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      }
    ],
    "navIcon": {
      "path": "chevron_right",
      "color": "#6C6C6C"
    },
    "label": {
      "text": "Gateway B",
      "icon": {
        "path": "menu_list"
      }
    },
    "showHeader": true
  }
]

The links work great if I’m running the Perspective Workstation because I can set the “Tab/Window Links” to “In Window”. I see a very quick flash of a load/splash screen but then I’m open in the new project and the layout looks just like it had from the previous project.
When I browse from a browser however each Project is opened in a new tab. I assume if I built the navigation with flex container and custom created the buttons as links I might be able to set 'target = “_self” '. I thought about creating a binding that looked at the current gateway and returning a mounted page or external link as needed but I still don’t know how to point to a different project within the same gateway.
I could probably get by if when navigating the new browser tab opened, the old/original tab closed. Giving the appearance that the page had just refreshed.
Long story short can a Menu Tree only navigate to pages within it’s own project without having to set it as an external link? Is there a property that can be set to let Ignition know how you want the Menu Tree to handle the item target?

2

Maybe you could put the actual navigation in an onItemClicked event handler; with the navigation action/script you’d be able to set the target.

3

Thank you! That was easier then I expected. I added a single line script to the onItemClick

system.perspective.navigate(url = event.target, newTab = 'false')

and then set the items in the menu tree to “enabled : false” to stop the default navigation to a new tab.

1 Like