Perspective - Tree

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.

Name	Description	Property Type
items	An array of objects, each of which represents a node on the tree. label: Label text for the list item. Value is string. expanded: Whether or not the tree appears with all levels expanded. Value is boolean. data: String data for list item. Value is string. items: An array of objects, each of which represents a child node on the tree. Value is an array.	array
interactable	If set to false, the tree is displayed but the user can't interact with it in the runtime. Default is true.	value: boolean
selection	Holds the item index path of the current selection.	value: string
selectionData	Array of objects containing the data and index path for all currently selected nodes. itemPath: Index path. Value is numeric. value: The value of the 'data' property for the selected node. Value is string.	array
appearance	Settings for the appearance of the tree. Click here to see the appearance properties.	object
style	Sets 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

appearance Properties

Name	Description	Property Type
textOverflow	Setting 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: collapsed: Icon appearance when path is collapsed. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. expanded: Icon appearance when path is expanded. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. empty: Icon appearance when path is empty. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. 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
defaultNodeIcons	Settings for the node icons. Options as follows: collapsed: Icon appearance when path is collapsed. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. expanded: Icon appearance when path is expanded. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. empty: Icon appearance when path is empty. path: Path 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 is string. Color: Fill color to apply to the icon. style: Sets a style for the icon. 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
selectedStyle	Sets 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
unselectedStyle	Sets 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
rowHeight	Height, in pixels, of each row/node of the tree. Default is 24.	value: numeric

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

The Tree component also has Component Events associated with it. See the Perspective - Tree Scripting page for more information.

Example

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