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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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

Attribute	Value	Type	Required	Description
theme	slds, nds (Default: slds)	string		Sets the theme for the tree component.
header		string	No	Sets the text for the treeListSelector heading.
extraclass		string	No	Adds extra class to the container element.
channel		string		To use with pubsub, set this feature to register an event listener. By default, the Datasource Lightning Web Component fires `onresult` and `oninit`.
items		array		Adds the data for the treeListSelector. The items attribute is an array of key-value pairs that describe the tree. See Available items Attributes.
childItemsPath		string	No	Provides alternate path for obtaining child items array for a given item.
customEventName	(Default: select)	string		Custom Event name that will be fired by pubsub and CustomEvent on item select.
customBackLabel		string	No	Adds a custom static "back" click label that replaces the dynamic label.
backLabelPrefix	(Default: "Back to ")	string	No	Sets prefix for dynamic "back" click label.
levelZeroBackLabelSuffix	(Default: All)	string	No	Sets dynamic "back" click label suffex for topmost level in hierarcy, to be displayed when tree goes one level deep.
defaultRootLevelSelectionId		string	No	Optionally Add an item which is selected by default on root level and on "back" action click from level 1.
selectRootLevelDefaultOnLoad	true, false (Default:false)	boolean	No	Allows for selecting defaultRootLevelSelectionId when component initially loads.
highlightWithoutSelectionOnLoad	true, false (Default:false)	boolean	No	Allows for highlighting an item without firing event on load. Works in tandem with selectRootLevelDefaultOnLoad attribute.
registeredPubsubChannel		string	No	Registeres a pubsub listener for channel name passed.

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

Attribute	Type	Required	Description
id	string	yes	Sets ID of a tree item/node. Required for key field in template:for directive.
label	string	yes	Sets the title and label for the item element.
items	array	no	Sets children items for a given item.

Event Listener

onselect

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