You are here:
Tree Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains a Tree LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Tree Lightning Web Component displays a visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items display as hyperlinks. Items in the hierarchy can be nested. Items with nested items are also known as branches.
Available c-tree Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
header |
string |
Sets the text for the tree heading. |
||
items |
array |
Adds the data for the tree. The items attribute is an array of key-value pairs that describe the tree. See Available items Attributes. |
||
icon-url |
url |
string |
Overrides the default URL of the svg resource. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the tree component. |
Example c-tree Component
<c-tree
icon-url="{iconUrl}"
theme="{theme}"
items="{treeData}"
onselect="{handleTreeSelect}"
>
</c-tree>Available items Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
label |
string |
yes |
Sets the title and label for the hyperlink. |
|
metatext |
string |
Adds text to provide users with supplemental information and aid with identification or disambiguation. |
||
name |
string |
yes |
Defines the item's unique name for the |
|
href |
string |
Sets the URL for the item link. |
||
expanded |
(Default: false) |
To display nested (branched) items, set to true. |
||
disabled |
(Default: false) |
To disable branch, set to true. A disabled branch cannot be expanded. |
Event Listener
onselect
Fires when a tree item is selected and before navigating to a given hyperlink. Returns the item object.
Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The Tree Lightning Web Component displays visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items display as hyperlinks. Items in the hierarchy can be nested. Items with nested items are also known as branches.
Available c-tree Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
header |
string |
Sets the text for the tree heading. |
||
items |
array |
Adds the data for the tree. The items attribute is an array of key-value pairs that describe the tree. See Available items Attributes. |
||
icon-url |
url |
string |
Overrides the default URL of the svg resource. |
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme for the tree component. |
Example c-tooltip Component
<c-tree
icon-url="{iconUrl}"
theme="{theme}"
items="{treeData}"
onselect="{handleTreeSelect}"
>
</c-tree>Available items Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
label |
string |
yes |
Sets the title and label for the hyperlink. |
|
metatext |
string |
Adds text to provide users with supplemental information and aid with identification or disambiguation. |
||
name |
string |
yes |
Defines the item’s unique name for the`onselect` event handler to return the tree item the user clicks. |
|
href |
string |
Sets the URL for the item link. |
||
expanded |
(Default: false) |
To display nested (branched) items, set to true. |
||
disabled |
(Default: false) |
To disable branch, set to true. A disabled branch cannot be expanded. |
