Versions Compared

Old Version 9

changes.mady.by.user Brandon Au

Saved on

compared with

New Version Current

changes.mady.by.user Brandon Au

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Component Palette Icon:

On_this_page



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

Perspective_property


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 nodes.

NameDescriptionProperty Type
itemPathIndex path.value: numeric
valueThe value of the 'data' property for the selected node. value: string
array
appearance

Settings for the appearance of the tree.

Expand
titleClick here to see the appearance properties
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 for text, background, margin and padding, border, shape and miscellaneous. 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. You can also specify a style class.object
unselectedStyleSets a style for when nodes are unselected. Full menu of style options is available. 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


Component Events

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.

Expand
titleonItemClicked

Fires whenever a node is clicked. 

Object PathTypeDescription
event.dataAnyThe value of the contextual 'data' object on the clicked node. 
event.itemPathListA list containing the item indexes leading to the item that was clicked. 
event.labelStringThe displayed text on the clicked item. 


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