Tree View

The tree view is a component for displaying a hierarchy. Actions can be performed when elements in each hierarchy are clicked.

Note

• The tree view is a component available only for desktop applications.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by actions.
2	Width	Number	222	width	number	222	Component width
3	Height	Number	230	height	number	230	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Color	String Color Picker		color	string		Tree view color
7	Font Size	Number	16	fontSize	number	16	Font size
8	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide
9	Value	Table [Details 1]	[Details 1]	value	array of object	[Details 1]	Tree view value
10	Click Event	Selection 1. None 2. Action	None				Click event

Note

• [value] is an object or array of objects consisting of id, label, and children. The children will further store objects or arrays of objects. The value is entered directly as an object.

[Details 1] Value (value)

[{
  "id": "root",
  "label": "Parent",
  "children": [
    {
      "id": "1",
      "label": "Child - 1"
    },
    {
      "id": "2",
      "label": "Child - 2",
      "children": [
        {
          "id": "2a",
          "label": "Child - 2-A"
        }
      ]
    }
  ]
}]

Event

Event name	Description
onclick	Performs an action when clicked.

The "selected" property allows you to retrieve the object array containing the child elements of the element you clicked on.

Project	Example
Obtaining Method	$ui.tree_view_id.selected
Obtained Value	{“id”:“2”,“label”:“Child - 2”,“children”:[{“id”:“2a”,“label”:“Child - 2-A”}]}