User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


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 USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:



Description

The Tree component displays a tree hierarchy based on an array of objects. Icons can be chosen for the nodes of the tree, and different icons can be used when an node is  expanded or collapsed.

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

An array of objects, each of which represents a node on the tree.

NameDescriptionProperty Type
labelLabel text for the list item.value: string
expandedWhether or not the tree appears with all levels expanded.value: boolean
dataString data for list item.value: string
itemsAn array of objects, each of which represents a child node on the tree.array
array
interactableIf set to false, the tree is displayed but the user can't interact with it in the runtime. Default is true.value: boolean
selectionHolds the item index path of the current selection.value: string
selectionData

Array of objects containing the data and index path for all currently selected items.

NameDescriptionProperty Type
itemPathIndex path.value: numeric
valueI am string data for the item.value: string.
array
appearance

Settings for the appearance of the tree.

NameDescriptionProperty Type
textOverflowSetting indicating whether overflowing text should cause the entire tree to scroll horizontally or whether the text should be truncated with an ellipsis. Default is scroll.value: string dropdown
expandIcons

Settings for the expand icons . Options as follows:

NameDescriptionProperty Type
collapsed

Icon appearance when path is collapsed.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object


object
expanded

Icon appearance when path is expanded.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object


object
empty

Icon appearance when path is empty.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object


object
object
defaultNodeIcons

Settings for the node icons. Options as follows:

NameDescriptionProperty Type
expanded

Icon appearance when path is expanded.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName.  The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object
object
collapsed

Icon appearance when path is collapsed.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object
object
empty

Icon appearance when path is empty.

NameDescriptionProperty Type
pathPath to the icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons.value: string
ColorFill color to apply to the icon.string
styleSets a style for the icon. Full menu of style options is available. You can also specify a style class.object
object
object
selectedStyleSets a style for when nodes are selected. 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
unselectedStyleSets a style for when nodes are unselected. 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
rowHeightHeight, in pixels, of each row/node of the tree. Default is 24.value: numeric
object
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 Component 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.

Example

PropertyValue

appearance.defaultNodeIcons.collapsed.path

material/Play_arrow
appearance.defaultNodeIcons.collapsed.color#D9D900
appearance.defaultNodeIcons.expanded.pathmaterial/subdirectory_arrow_right
appearance.defaultNodeIcons.expanded.color#FFAC47
appearance.defaultNodeIcons.empty.pathmaterial/panorama_fish_eye
appearance.defaultNodeIcons.empty.color#000000


  • No labels