Tree

The tree Component is used to represent hierarchical menu structures in a hierarchy format. It is mandatory to configure the properties ObjProp's Id, Parent Id, Title, and Title Symbolic.

• How to Create

1. Choose Tree type in New Component Popup Screen.

2. Enter the name for the component and the name displayed on the Screen (Symbolic String or Custom Name ). After that, select the created Business Object.

3. Component에 Business Object의 Field Mapping을 한다. (Step4)

   INFO

   Layout Type Selection in Step2 is skipped.

• Applicable List of Component Attributes

1. Search Type: An attribute that determines the search type of the List.

2. Default Expand All: This sets whether nodes are expanded when the Tree loads. If set to Default or No, only the top-level nodes are displayed, with their child nodes collapsed. If set to Yes, all nodes are displayed expanded.

3. Collapse Disabled: This attribute disables the collapse feature in the Toolbar. The default value is NO, indicating that the collapse feature is enabled. Changing it to YES keeps the Component expanded at all times.

4. Default Collapse State: When Collapse Disabled is set to No, this attribute sets the initial state of the screen upon entry. The default value is N/A, indicating that the collapse feature is enabled. Changing it to Close means that the screen starts with all nodes collapsed.

5. Tab Pane Id: When the Screen is structured with a Tab Component and this Component is placed at the bottom, the Tab Component's Panel Id value is registered to link it with the Tab.

6. Object Prop: This is an attribute for data retrieval in the Tree Component. If incorrectly registered or omitted, Tree's structure may not be displayed.

   INFO

   The relationship between controls must be set according to the parent-child relationship. For the Id, the Id value of the child Control should be entered, and for the Parent Id, the parent Id value of the child Control Id entered in the Id should be entered. Additionally, the Title selects the name of the Control to be displayed on the screen.

7. Style – Font: The font of the text in the Tree Component is configured.

8. Style – Text Color: The text color of the Tree Component is configured.

9. Style – Back Color: The background color of the Tree Component is configured.

10. Style – Flat Appearance: The border of Tree Component is configured.

11. Style – Outline: The Outline of the Tree Component is configured.

• Available List of Services

Name	Platform	Description
load	Common	The event that occurs during data loading
node-click	Web	The event tha occurs when tree node is clicked

Load: The event that occurs when the Tree Component is loaded, and for the Load Event, it is important to register the Action Service configuration for the Tree Component.
The Load Event occurs every time a node in the tree is clicked.

INFO

You can register a Lambda Action to execute the Load, and in the Prop, you can register the Key value as objectProp to pass it along.

[Image 1. Node Click Example]

Node-Click: The Service executed when clicking on a tree node in the Tree Component is an event specific to web platforms, as it involves interacting with the user interface.

[Image 2. Registration of Action that calls Alert when Node is clicked]

• Available List of Controls

1. ToolbarButton: A control where an action can be invoked when a button is clicked or touched.
2. Lookup: A control that invokes a popup window for searching, allowing users to select search criteria from within the popup screen.
3. Text: An Input control for text input.
4. Select: A dropdown list control where options are selectable, with the Group Code from registered Common Code being used as options.
5. CheckBox: A control that allows for selection and deselection via checkboxes.
6. Hidden: Set the hidden attribute of controls within a component.
7. DatePicker: A control that facilitates easy selection of dates in a UI format when entering dates.