--- schema_version: "1" id: 7f80e259466f43d95a8bc62b52b7c592088b74a64ec309e6364f5dd4f61ae95c title: Tree Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_tree_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_tree_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: db82185407df7cf343cd89e0605114a44959efded98486a52bd8eb125cddf682 description: For the managed package runtime, this page contains a Tree LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Tree Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a Tree LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## 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 ``` ``` ## 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.
## 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 ``` ``` ## 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.
## Event Listener onselect Fires when a tree item is selected and before navigating to a given hyperlink. Returns the item object.