Overview
The Tree component is a user interface element designed to display hierarchical data in a tree-like structure. It organizes data into interconnected nodes, allowing users to navigate and interact with the information effectively.
For example, In a Salesforce custom application for managing organizational structure, the Tree component could be used to display the hierarchy of departments and employees. This setup helps users easily navigate through and manage organizational data.
Basic Attributes:
Attributes are the options available for each component, allowing you to customize its appearance and functionality. They help you tailor the look and behavior of your components to fit your needs.
Attribute Name | Description |
---|---|
Model | Creating a New Model: You can either select an existing model from the list or create a new model by clicking on the "Create New Model" option. Reference: Model Creation |
Tree Header | A Header is the name shown to users and can come from various sources. Reference: Label Source Type |
ID Field |
Reference: Id Field |
Nodes | The label field is designated for displaying the label of the tree node. All fields are visible except for image, address, array, and object type fields. Reference: Nodes |
Parent Nodes | The lookup field type should be used as a self-lookup to create a hierarchy. In this context, only lookup fields are visible. Reference: Parent Node |
Icon Field | This is used to display icons for individual nodes, utilizing a field of type ”text” for alternate text. Reference: Icon Field |
Default Icon | You can set the default icon for the tree from the different icon options
|
Is Lazy Load Checkbox | This checkbox field is used during hierarchy creation. When enabled, it creates only the parent-level hierarchy, with child nodes loading as the user expands each tree node. There is no visible change in the UI. |
No Search Bar Checkbox | Checkbox used to hide the search box of a Tree |
No Header Checkbox | Checkbox used to hide the header part of a Tree |
UI Attributes:
Attribute Group | Attribute Name | Description |
---|---|---|
UI | Component Size |
Note: Currently, we support Component Size |
Padding Location | "Padding Location" typically refers to the configuration of spacing around elements | |
Padding Size | "Padding Size" refers to the amount of space added inside an element, between the element's content and its border or edge. | |
Margin Location | "Margin Location" refers to the spacing around the outside edge of an element | |
Margin Size | "Margin Size" refers to the amount of space around the outside edges of an element, | |
Style |
| |
Classes |
|
Visibility and Component
Attribute Name | Description |
---|---|
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
|
Component Label | It simply shows the name of the component. |
Id Field
This ID field is designed to present a list of available options only when the associated UI field is added to the model that has been bound to it.
This ensures that the list appears in the context of the data or configuration specified by the model, allowing for a more dynamic and relevant display of options based on the user's selections and the binding context.
Nodes
This nodes field will display a list of available options only when you include the corresponding UI field in the model that has been bound to it.
This functionality ensures that the list is dynamically generated and relevant to the specific configuration of the model,
Parent Node
This parent node field will show a list of available options only when you add the corresponding UI field to the model that has been bound to it.
This ensures that the displayed list is contextually relevant and dynamically generated based on the specific configuration of the bound UI field in the model.
Icon Field
This icon field will display a list of available options only when the corresponding UI field is added to the model that has been bound to it.
This ensures that the list of icons is contextually appropriate and dynamically generated, aligning with the specific configuration of the bound UI field within the model.
Label Source Type:
Label Source Type Attribute | Description |
---|---|
Model (Salesforce Object) | From this source, users can select a Model (Salesforce Object) field to be displayed as the label name. |
Variable | Here, users can select the label name from variables such as Record ID, Is Disabled, Is Read only, or Is Visible. |
Cookie Key | Choose the available cookie key whose value you want to include from your browser. |
Local Storage Key | Select the available Local Storage Key whose value you want to include from your browser. |
User | Here, you can choose the label from user fields such as First Name, Last Name, Email, Name, Phone, or Session ID. |
Merge Field Expression | Merge Field Expression displays the value selected from the chosen value source. |
Message Body | Inside the message body, user also can add the values manually. |
Events
Events available for any component is of onload type.
Onload Events:
onload event occurs when the component has been loaded.
Here, only onload event actions are available for components.
Actions are basically workflow actions, which you can explore in Workflow here.
Add Comment