Community › Forge › Assets list › GTree
gtree
Reactive icon

GTree

icon_trusted
Stable version 1.0.24 (Compatible with OutSystems 11)
Uploaded
 on 12 May 2024
 by 
5.0
 (16 ratings)
gtree

GTree

Documentation
1.0.24

1.Dependencies

In order to use GTree in your project all you need to do is include "GTree" in the dependencies, this will automatically include structures neeeded.


2.Input Parameters

The tree has 3 input parameters :

  • AllNodesList
  • TreeSettings
  • FilterSettings


2.1 AllNodesList

A list of Node .

This is the list representing your tree. Since outsystems does not support recursive structures this should be a tree represented in the form of a list, meaning each item needs at least the NodeId and ParentNodeId defined for defining the tree aspect and the NodeName for display purposes.

2.1.1 Node

Node is a structure with the following attributes

  • NodeId - The id of the node, if you are loading from an entity it can be that entity Id
  • ParentNodeId - The id of the parent node, it should be an id of a an existing node or empty text if it is a root node
  • NodeIcon -  The icon for the node, if this is not provided the tree default one will be rendered.
  • NodeName - The name of the node
  • NodeTitle - The title of the node
  • NodeSubtitle - The subtitle of the node
  • ExtraValue - A field that can be used to provide the tree with additional information
  • IsOpen - This will control how the tree will be rendered. It is also used internally when toggling between expand/collapse
  • IsParent - This determines if a given node will be rendered as a parent even if it has no children.
  • IsChecked - This determines if the node is checked
  • IsHalfChecked - This determines if the node is half checked. A half checked node has a value of false, but for display purposes will be displayed as indeterminate, an example of this is if it has one of three children checked.
  • NodeLevel - Internal attribute, this value should not be passed, has this is an internal value that is populated by the algorithm that mounts the tree structure.
  • IsDisplay - Internal attribute, used to determine if a given node will display, this helps the tree to be performant, nodes not oppened are not rendered, and is this attribute that helps on that 
  • IsHighlight - Internal attribute, used for filtering a tree, it is set to true automatically when filter tree is used, and will render the nodes matching as highlighted.


2.2 TreeSettings

This structure defines tree settings, it's attributes are:

  • IsToggleExpandOnDoubleClick - Default Value, true. If true you can expand/collapse a node by double clicking it.
  • MaxHeight - Default value: 400px. This defines the tree maximum height, used to render the scroll bar correctly when filtering is set to true. Otherwise it can be set to 100%.
  • ExpandIcon - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true ExpandIcon is displayed, if this is set to false IsToggleExpandOnDoubleclick must be set to true, otherwise user will not be able to open/close a node :)
      • Classes - Additional classes to change the expand icon look and feel
      • Style - Additional css to help customize even more the look and feel.
    • ExpandIconOpened - Default Value: Entities.IconName.minus_square_o, accepts an IconName, or any icon class. 
    • ExpandIconClose - Default Value: Entities.IconName.plus_square_o, accepts an IconName, or any icon class.
  • IconFormat - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true icon node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
    • Icon- Default Value: Entities.IconName.star , accepts an IconName, or any icon class. 
  • CheckBox - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true checkbox is displayed
      • Classes - Additional classes to change the checkbox look and feel
      • Style - Additional css to help customize even more the look and feel.
    • IsSimpleCheck- Default Value: false. This determines the behaviour of checking a node. If set to true inheritance will not be applied, meaning that checking a parent will not check all childrens, and unselecting all childrens won't uncheck the parent.
  • Name - Structure that defines look and feel of the name node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true name node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Subtitle- Structure that defines look and feel of the subtitile node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true subtitile node is displayed
      • Classes - Additional classes to change the subtitile look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Extra - Structure that defines look and feel of the extra node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true extra node is displayed
      • Classes - Additional classes to change the extra look and feel
      • Style - Additional css to help customize even more the look and feel.


2.3 FilterSettings

This parameter controll wether or not to display a filter and it's aditional features. It's attributes are:

  • ShowFilter - If set to yes a filter input will be displayed, by entering "Enter" it will fire the filter function.
  • HideNotFoundLeafs - If this is set to true the tree will hide leaf nodes that do not match the search criteria. If this is true, simple check will be automatically set to true, because we want to make sure user is only selecting visible nodes.
  • IsShowSearchButton - If set to yes this will show a search button
  • IsShowResetButton - If set to yes this will show a reset button


3.Events

The tree triggers the NodesChecked event everytime you select a node. That event payload is a a list of Node.

This is the list of ALL checked nodes after checking/unchecking a node. This has to be a list because if you select a node with children it will automatically select all children, and thus it will be easier to handle it that way.


1.0.23

1.Dependencies

In order to use GTree in your project all you need to do is include "GTree" in the dependencies, this will automatically include structures neeeded.


2.Input Parameters

The tree has 3 input parameters :

  • AllNodesList
  • TreeSettings
  • FilterSettings


2.1 AllNodesList

A list of Node .

This is the list representing your tree. Since outsystems does not support recursive structures this should be a tree represented in the form of a list, meaning each item needs at least the NodeId and ParentNodeId defined for defining the tree aspect and the NodeName for display purposes.

2.1.1 Node

Node is a structure with the following attributes

  • NodeId - The id of the node, if you are loading from an entity it can be that entity Id
  • ParentNodeId - The id of the parent node, it should be an id of a an existing node or empty text if it is a root node
  • NodeIcon -  The icon for the node, if this is not provided the tree default one will be rendered.
  • NodeName - The name of the node
  • NodeTitle - The title of the node
  • NodeSubtitle - The subtitle of the node
  • ExtraValue - A field that can be used to provide the tree with additional information
  • IsOpen - This will control how the tree will be rendered. It is also used internally when toggling between expand/collapse
  • IsParent - This determines if a given node will be rendered as a parent even if it has no children.
  • IsChecked - This determines if the node is checked
  • IsHalfChecked - This determines if the node is half checked. A half checked node has a value of false, but for display purposes will be displayed as indeterminate, an example of this is if it has one of three children checked.
  • NodeLevel - Internal attribute, this value should not be passed, has this is an internal value that is populated by the algorithm that mounts the tree structure.
  • IsDisplay - Internal attribute, used to determine if a given node will display, this helps the tree to be performant, nodes not oppened are not rendered, and is this attribute that helps on that 
  • IsHighlight - Internal attribute, used for filtering a tree, it is set to true automatically when filter tree is used, and will render the nodes matching as highlighted.


2.2 TreeSettings

This structure defines tree settings, it's attributes are:

  • IsToggleExpandOnDoubleClick - Default Value, true. If true you can expand/collapse a node by double clicking it.
  • MaxHeight - Default value: 400px. This defines the tree maximum height, used to render the scroll bar correctly when filtering is set to true. Otherwise it can be set to 100%.
  • ExpandIcon - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true ExpandIcon is displayed, if this is set to false IsToggleExpandOnDoubleclick must be set to true, otherwise user will not be able to open/close a node :)
      • Classes - Additional classes to change the expand icon look and feel
      • Style - Additional css to help customize even more the look and feel.
    • ExpandIconOpened - Default Value: Entities.IconName.minus_square_o, accepts an IconName, or any icon class. 
    • ExpandIconClose - Default Value: Entities.IconName.plus_square_o, accepts an IconName, or any icon class.
  • IconFormat - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  icon node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
    • Icon- Default Value: Entities.IconName.star , accepts an IconName, or any icon class. 
  • CheckBox - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  checkbox  is displayed
      • Classes - Additional classes to change the checkbox look and feel
      • Style - Additional css to help customize even more the look and feel.
    • IsSimpleCheck- Default Value:  false. This determines the behaviour of checking a node. If set to true inheritance will not be applied, meaning that checking a parent will not check all childrens, and unselecting all childrens won't uncheck the parent.
  • Name - Structure that defines look and feel of the name node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  name node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Subtitle- Structure that defines look and feel of the subtitile node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  subtitile node is displayed
      • Classes - Additional classes to change the subtitile look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Extra - Structure that defines look and feel of the extra node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  extra node is displayed
      • Classes - Additional classes to change the extra  look and feel
      • Style - Additional css to help customize even more the look and feel.


2.3 FilterSettings

This parameter controll wether or not to display a filter and it's aditional features. It's attributes are:

  • ShowFilter - If set to yes a filter input will be displayed, by entering "Enter" it will fire the filter function.
  • HideNotFoundLeafs - If this is set to true the tree will hide leaf nodes that do not match the search criteria. If this is true, simple check will be automatically set to true, because we want to make sure user is only selecting visible nodes.
  • IsShowSearchButton - If set to yes this will show a search button
  • IsShowResetButton - If set to yes this will show a reset button


3.Events

The tree triggers the NodesChecked event everytime you select a node. That event payload is a a list of Node.

This is the list of ALL checked nodes after checking/unchecking a node. This has to be a list because if you select a node with children it will automatically select all children, and thus it will be easier to handle it that way.



1.0.22

Demo - Intro

This version is relative to the demo of the component.

For full documentation of the Gtree usage and available actions please refer to the previous documentantion.

Following is a brief explanation of each screen and what use cases are included.

DefaultTree 

This is the way GTree is rendered by default.

Data: GTree expects a list with at least the following parameters defined, NodeId, ParentNodeId and NodeName
Icons: Default icons of the tree is stars. However if the data tree passed in has the node icon the one used willl be that
Colors and aspect: Tree uses the Outsystems preset variables so it will use the theme primary color and font size.
Node attributes: All Node attributes are visible by default. To hide them you just have to pass in these parameters as false.
Double click: Double clicking a node will toggle between expanded and colapsed by default, but this can be switched off.


CustomizedTree

Gtree is customizable , There are a couple of parameters that can be passed to it to allow some customization.

Icons: The tree is designed to use OS Icons, in this example it is possible to try some of them.
Checkbox: Gtree gives the option of using checkboxes to select the nodes. The on check event gives the list of all checked nodes because of check inheritance.


FilterTree

By default the option to filter is disabled, but it's possible to enable it. This search allows the user to filter a tree by the node name.
By doing it so, you can also define some aditionnal parameters.
Hide Leafs: It is possible to hide the leafs that doesn't match the search criteria, by doing that the tree checkbox will be automatically set to "simple check".
Buttons: If buttons are hidden Enter also triggers the search

OnCheckedEvent

The way you handle the tree onCheck event is entirily up to you, in this example we are creating some tags with the selected nodes.
Parameter:The event has a parameter that is the list of the checked nodes.
Tree Data:Tree data has an optional parameter "IsChecked" This allows you to open up a tree with some values already checked.


LargeTree

Gtree is optimized and will only render the visible nodes.
In this example it is loading a 5000 nodes tree.


1.0.21

1.Dependencies

In order to use GTree in your project all you need to do is include "GTree" in the dependencies, this will automatically include structures neeeded.


2.Input Parameters

The tree has 3 input parameters :

  • AllNodesList
  • TreeSettings
  • FilterSettings


2.1 AllNodesList

A list of Node .

This is the list representing your tree. Since outsystems does not support recursive structures this should be a tree represented in the form of a list, meaning each item needs at least the NodeId and ParentNodeId defined for defining the tree aspect and the NodeName for display purposes.

2.1.1 Node

Node is a structure with the following attributes

  • NodeId - The id of the node, if you are loading from an entity it can be that entity Id
  • ParentNodeId - The id of the parent node, it should be an id of a an existing node or empty text if it is a root node
  • NodeIcon -  The icon for the node, if this is not provided the tree default one will be rendered.
  • NodeName - The name of the node
  • NodeTitle - The title of the node
  • NodeSubtitle - The subtitle of the node
  • ExtraValue - A field that can be used to provide the tree with additional information
  • IsOpen - This will control how the tree will be rendered. It is also used internally when toggling between expand/collapse
  • IsParent - This determines if a given node will be rendered as a parent even if it has no children.
  • IsChecked - This determines if the node is checked
  • IsHalfChecked - This determines if the node is half checked. A half checked node has a value of false, but for display purposes will be displayed as indeterminate, an example of this is if it has one of three children checked.
  • NodeLevel - Internal attribute, this value should not be passed, has this is an internal value that is populated by the algorithm that mounts the tree structure.
  • IsDisplay - Internal attribute, used to determine if a given node will display, this helps the tree to be performant, nodes not oppened are not rendered, and is this attribute that helps on that 
  • IsHighlight - Internal attribute, used for filtering a tree, it is set to true automatically when filter tree is used, and will render the nodes matching as highlighted.


2.2 TreeSettings

This structure defines tree settings, it's attributes are:

  • IsToggleExpandOnDoubleClick - Default Value, true. If true you can expand/collapse a node by double clicking it.
  • MaxHeight - Default value: 400px. This defines the tree maximum height, used to render the scroll bar correctly when filtering is set to true. Otherwise it can be set to 100%.
  • ExpandIcon - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true ExpandIcon is displayed, if this is set to false IsToggleExpandOnDoubleclick must be set to true, otherwise user will not be able to open/close a node :)
      • Classes - Additional classes to change the expand icon look and feel
      • Style - Additional css to help customize even more the look and feel.
    • ExpandIconOpened - Default Value: Entities.IconName.minus_square_o, accepts an IconName, or any icon class. 
    • ExpandIconClose - Default Value: Entities.IconName.plus_square_o, accepts an IconName, or any icon class.
  • IconFormat - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  icon node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
    • Icon- Default Value: Entities.IconName.star , accepts an IconName, or any icon class. 
  • CheckBox - Structure that defines look and feel of the expand icon.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  checkbox  is displayed
      • Classes - Additional classes to change the checkbox look and feel
      • Style - Additional css to help customize even more the look and feel.
    • IsSimpleCheck- Default Value:  false. This determines the behaviour of checking a node. If set to true inheritance will not be applied, meaning that checking a parent will not check all childrens, and unselecting all childrens won't uncheck the parent.
  • Name - Structure that defines look and feel of the name node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  name node is displayed
      • Classes - Additional classes to change the name look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Subtitle- Structure that defines look and feel of the subtitile node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  subtitile node is displayed
      • Classes - Additional classes to change the subtitile look and feel
      • Style - Additional css to help customize even more the look and feel.
  • Extra - Structure that defines look and feel of the extra node.
    • NodeFormat - Basic look and feel of the node
      • Show - If true  extra node is displayed
      • Classes - Additional classes to change the extra  look and feel
      • Style - Additional css to help customize even more the look and feel.


2.3 FilterSettings

This parameter controll wether or not to display a filter and it's aditional features. It's attributes are:

  • ShowFilter - If set to yes a filter input will be displayed, by entering "Enter" it will fire the filter function.
  • HideNotFoundLeafs - If this is set to true the tree will hide leaf nodes that do not match the search criteria. If this is true, simple check will be automatically set to true, because we want to make sure user is only selecting visible nodes.
  • IsShowSearchButton - If set to yes this will show a search button
  • IsShowResetButton - If set to yes this will show a reset button


3.Events

The tree triggers the NodesChecked event everytime you select a node. That event payload is a a list of Node.

This is the list of ALL checked nodes after checking/unchecking a node. This has to be a list because if you select a node with children it will automatically select all children, and thus it will be easier to handle it that way.