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
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:

 


IULocgo


Menu Tree

Description

The Menu Tree component can be configured to allow users to navigate pages in a Perspective Session. The Menu Tree defines a hierarchical view of information that can be configured to expand submenu branches and menu items. The subitems can be further expanded to expose more subitems if any exist, and collapsed to hide subitems.

Each menu item has its own path, for example, "Western Region/CA/San Jose" that determines its location in the Menu Tree. The Separation Character property (by default its forward-slash), dictates how the paths are broken up.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
items

Configure items representing nodes in a subtree from this option. If defined, a submenu will branch from here with these options.

 Click to see the items properties
NameDescriptionProperty Type
target

A url (external), or mounted path to a page. If "items" is empty (no subtree to this item), this will navigate to that location.

Entering Page paths without the leading "/" will open pages in a new tab.

value: string
itemsConfigure items representing nodes in a subtree from this option. If defined, a submenu will branch from here with these options.array

navIcon

Icon image appended to the right of the menu item.

 Click to see navIcon options
NameDescriptionProperty Type
pathShorthand path to icon source, in format: library/IconName.value: string
colorColor of the icon. Can also assign the "fill" property in styles. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
object
label

Menu item label.

 Click to see label options
NameDescriptionProperty Type
textText to display for this option.value: string
icon

Image icon added to the right of the label text.

NameDescriptionProperty Type
pathShorthand path to icon source, in format: library/IconName.value: string

object
visibleWhether this option should be displayed in the menu tree.value: boolean
enabledIf true, this option is currently enabled to perform its action or render its submenu.value: boolean
showHeaderWhether to display this option's text as a header/title for it's submenu.value: boolean
style

This feature is new in Ignition version 8.0.5
Click here to check out the other new features

Sets a style for this item. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object

array
layoutAlignmentSpecifies which side of the root menu is aligned to. Submenu slides in from the opposite side.value: boolean
enabledIf true, this component is currently enabled to perform its actions.value: boolean
itemStyleSets style for the menu tree component. You can also specify a style class.object
headerStyleSets style for the menu header. You can also specify a style class.object
backActionStyleStyle to display in the root menu. You can also specify a style class.object
backActionTextText to display in prompt to go back to the root menu. You can also specify a style class.value: string
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Perspective Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Component Methods

This feature is new in Ignition version 8.0.5
Click here to check out the other new features

 onItemClicked

Fired when an item is selected.

 event.enabled
  • Object Path

event.enabled

  • Type

Boolean

  • Description

 Whether the item interacted with is enabled.

 event.label
  • Object Path

event.label

  • Type

String

  • Description

 Text to display for this option.

 event.path
  • Object Path

event.label

  • Type

List

  • Description

A list containing the item indexes leading to the item that was clicked.

 event.target
  • Object Path

event.target

  • Type

String

  • Description

A url (external) or a mounted path to a page.

Examples
Example 1

Menu Tree Example 1


You can use links to go to URL links outside your project or internal to your project.
For this example assume you have some screens defined in the project page configuration (home gear). Assume the URL's for those are as follows:

  • /screen_1
  • /screen_2
  • /screen_3
  • /screen_b
  • /screen_a1
  • /screen_a2


Images on the left side of the Menu Tree are associated with the label.icon.path
Images on the right side of the Menu Tree are associated with the navIcon.path
target property is the link to the screen to navigate to.

Top Level Properties

PropertyValue
props.items.0.navIcon.pathmaterial/trending_flat
props.items.0.navIcon.color#6C6C6C
props.items.0.label.textMenu Numbers
props.items.0.label.icon.path

material/list

props.items.0.label.showHeaderfalse
props.items.1.navIcon.pathmaterial/trending_flat
props.items.1.navIcon.color#008000
props.items.1.label.textMenu Letters
props.items.1.label.icon.pathmaterial/settings
props.items.1.label.showHeadertrue
props.items.2.navIcon.pathmaterial/stop
props.items.2.navIcon.color#FF8A8A
props.items.2.label.textNo Target Link
props.items.2.label.icon.pathmaterial/stop_screen_sharing
props.items.2.label.showHeadertrue

Sub Level Properties of Item 0

PropertyValue
props.items.0.items.0.target/screen_1
props.items.0.items.0.navIcon.pathmaterial/cloud
props.items.0.items.0.navIcon.color#00D9D9
props.items.0.items.0.label.textItem 1
props.items.0.items.0.label.icon.pathmaterial/chat
props.items.0.items.0.label.showHeadertrue
props.items.0.items.1.target/screen_2
props.items.0.items.1.navIcon.pathmaterial/cloud_queue
props.items.0.items.1.label.textItem 2
props.items.0.items.1.label.showHeadertrue
props.items.0.items.2.target/screen_3
props.items.0.items.2.navIcon.pathmaterial/cloud_circle
props.items.0.items.2.label.textItem 3
props.items.0.items.2.label.showHeadertrue


Sublevel Properties of Item 1

PropertyValue
props.items.1.items.0.navIcon.pathmaterial/trending_flat
props.items.1.items.0.label.textSub Menu A
props.items.0.items.0.label.showHeadertrue
props.items.1.items.1.target/screen_b
props.items.1.items.1.navIcon.pathmaterial/data_usage
props.items.1.items.1.label.textItem B
props.items.1.items.0.items.0.target/screen_a1
props.items.1.items.0.items.0.navIcon.pathmaterial/group
props.items.1.items.0.items.0.navIcon.color#6C6C6C
props.items.1.items.0.items.0.label.textItem A 1
props.items.1.items.0.items.0.label.showHeadertrue
props.items.1.items.0.items.1.target/screen_a2
props.items.1.items.0.items.1.navIcon.pathmaterial/group_add
props.items.1.items.0.items.1.navIcon.color#6C6C6C
props.items.1.items.0.items.1.label.textItem A 2
props.items.1.items.0.items.1.label.showHeadertrue
Example 2

Basic Two Level Navigation Tree




The items property for this component is complex. It is an "object" type that has as many levels as you want. Here is an example of the JSON used to create the two level image above. You can copy the text below and paste it into the items property of your Menu Tree component. No code is needed to make this component navigate.

This example assumes several things in order to work:

  • Target fields that are blank (HMI and Administration) do not navigate when clicked.
  • There are several pages created in the project:
    • /overview
    • /lines
    • /packaging
    • /userPermissions
    • /userEdit
  • There are icons stored in ignition.
    • A hamburger menu icon with a path of "menu_list"
    • A greater than symbol with a path of "chevron_right"

 Click to see an image of the items property in the designer

items Property
[
  {
    "target": "",
    "items": [
      {
        "target": "/overview",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Overview",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      },
      {
        "target": "/lines",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Lines",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      },
      {
        "target": "/packaging",
        "items": [],
        "navIcon": {
          "path": "Packaging"
        },
        "label": {
          "text": "Repeater",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      }
    ],
    "navIcon": {
      "path": "chevron_right",
      "color": "#6C6C6C"
    },
    "label": {
      "text": "HMI",
      "icon": {
        "path": "menu_list"
      }
    },
    "showHeader": true
  },
  {
    "target": "",
    "items": [
      {
        "target": "/userPermissions",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Edit Permissions",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      },
      {
        "target": "/userEdit",
        "items": [],
        "navIcon": {
          "path": ""
        },
        "label": {
          "text": "Edit Users",
          "icon": {
            "path": ""
          }
        },
        "showHeader": true
      }
    ],
    "navIcon": {
      "path": "chevron_right",
      "color": "#6C6C6C"
    },
    "label": {
      "text": "Administration",
      "icon": {
        "path": "menu_list"
      }
    },
    "showHeader": true
  }
]


  • No labels