---
schema_version: "1"
id: c8fd391adcdb34fc729cf384246a1e38305be93d870c07432cd27b3d49c138a8
title: TreeListSelector 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_treelistselector_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_treelistselector_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e668f6a160fa3bc2eab8ae10b6ab8c45c06e2ff6433ed4edc05d84b40ecad218
description: For the managed package runtime, this page contains the TreeListSelector LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# TreeListSelector Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the TreeListSelector 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 Spring '21

The _TreeListSelector Lightning Web Component_ is a variant of Tree Lightning Web Component that displays visualization of a structural hierarchy, that allows for browsing a tree based hierarchy as a list. Items in the hierarchy can be nested.

## Available c-tree-list-selector Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Sets the theme for the tree component.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">header</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Sets the text for the treeListSelector heading.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">extraclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Adds extra class to the container element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">channel</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">To use with pubsub, set this feature to register an event listener. By default, the <em>Datasource Lightning Web Component</em> fires <code>onresult</code> and <code>oninit</code>.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">items</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">array</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Adds the data for the treeListSelector. The <em>items</em> attribute is an array of key-value pairs that describe the tree. See Available <em>items</em> Attributes.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">childItemsPath</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Provides alternate path for obtaining child items array for a given item.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">customEventName</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">(Default: select)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Custom Event name that will be fired by pubsub and CustomEvent on item select.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">customBackLabel</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Adds a custom static "back" click label that replaces the dynamic label.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">backLabelPrefix</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">(Default: "Back to ")</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Sets prefix for dynamic "back" click label.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">levelZeroBackLabelSuffix</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">(Default: All)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Sets dynamic "back" click label suffex for topmost level in hierarcy, to be displayed when tree goes one level deep.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">defaultRootLevelSelectionId</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Optionally Add an item which is selected by default on root level and on "back" action click from level 1.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">selectRootLevelDefaultOnLoad</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">true, false (Default:false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Allows for selecting defaultRootLevelSelectionId when component initially loads.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">highlightWithoutSelectionOnLoad</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">
              <p style="margin-bottom:0;">true, false (Default:false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Allows for highlighting an item without firing event on load. Works in tandem with <em>selectRootLevelDefaultOnLoad</em> attribute.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e65 ">
              <p style="margin-bottom:0;">registeredPubsubChannel</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e83 ">
              <p style="margin-bottom:0;">No</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e89 ">
              <p style="margin-bottom:0;">Registeres a pubsub listener for channel name passed.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-tree-list-selector Component

```
header = "Browse Hierarchy";
theme = "slds";
channel = "myPubSubChannel";
childItemsPath = null;
items = 
  {
    id: "1",
    label: "Root1",
    items: [
      {
        id: "4",
        label: "ChildCatalog1",
        items: [
          {
            id: "41",
            label: "ChildCatalog1_1"
          },
          {
            id: "42",
            label: "ChildCatalog1_2"
          }
        ]
      },
      {
        id: "5",
        label: "ChildCatalog2",
        items: [
          {
            id: "51",
            label: "ChildCatalog2_1"
          },
          {
            id: "52",
            label: "ChildCatalog2_2"
          }
        ]
      },
      {
        id: "6",
        label: "ChildCatalog3"
      },
      {
        id: "7",
        label: "ChildCatalog4"
      }
    ]
  },
  {
    id: "2",
    label: "Root2"
  }
];
```

```
<c-tree-list-selector
    header={header}
    child-items-path={childItemsPath}
    items={items}
    theme={theme}
    channel={channel}
>
</c-tree-list-selector>
```

## Available items Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e567">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e573">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e579">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e585">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d237468e591">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e567 ">
              <p style="margin-bottom:0;">id</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e573 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e579 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e585 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e591 ">
              <p style="margin-bottom:0;">Sets ID of a tree item/node. Required for <em>key</em> field in <em>template:for</em> directive.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e567 ">
              <p style="margin-bottom:0;">label</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e573 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e579 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e585 ">
              <p style="margin-bottom:0;">yes</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e591 ">
              <p style="margin-bottom:0;">Sets the title and label for the item element.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e567 ">
              <p style="margin-bottom:0;">items</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e573 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e579 ">
              <p style="margin-bottom:0;">array</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e585 ">
              <p style="margin-bottom:0;">no</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d237468e591 ">
              <p style="margin-bottom:0;">Sets children items for a given item.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Event Listener

onselect

Fires when a treeListSelectorItem is selected. Returns the item id and isChildItemsPresent Boolean value.