List Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a List 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 Summer '20

The List Lightning Web Component creates a searchable and sortable list from the provided data.

Available c-list Attributes

Attribute	Value	Type	Required	Description
channel		string		If set, the list component acts as observer and listens to the channel for data from the Datasource LWC.
enable-load-more	true, false (Default: false)	boolean		To enable a button to load more list items.
field-name	(Default: Name)	string		Specifies which key from the records to display.
issearchavailable	true, false (Default: false)	boolean		To display the search input field and filter dropdown list, set to true.
issortavailable	true, false (Default: false)	boolean		To enable sorting by ascending and descending order, set to true.
load-more-btn-label	(Default: "Load More Items")	string		Specifies the label of the load more button.
load-more-number-of-items	(Default: Default value depends upon the parent container height)	string		Limits the content to load when load more button is clicked.
max-height	CSS (if set, the heightproperty takes priority)	string		Specifies maximum height for the component.
name		string		Specifies the name of the element. Used by the Form Lightning Web Component.
records		array	yes	Contains the data for the list.
searchattribute	(Default: name)	string		Specifies comma separated field names used to search.
sortattribute	(Default: name)	string		Specifies which field to sort.
theme	slds, nds (Default: slds)	string		Specfies which theme to use.

Example c-list Component with Defined c-list-item

To create your own template for the list items, add a c-list-items component inside the c-listcomponent and write an iteration template.

<c-list records={data} issearchavailable="true" issortavilable="true">
        <c-list-items>
        </c-list-items>
    </c-list>

    <!-- iteration template required -->
    <template>
        <ul class="slds-has-dividers_around slds-has-block-links_space">
            <template for:each={data} for:item="item" for:index="index">
                <li key={item.id} class="slds-item">
                    <a href="javascript:void(0);">{item.name}</a>
                </li>
            </template>
        </ul>
    </template>

Example c-list Component

If a c-list-items component is not specified, the default layout for the list items is used. Only the item.name is visible as the label for each list item. However, the user can still change the sort field and search field.

<c-list records={data}>
    </c-list>

Available Methods

sortListBy(reverse, field)

Sorts the list by field. The second parameter is optional. If no field is provided then it takes name.

searchListBy(searchKey, fields)

Filters the list. The second parameter is optional. If no fields are provided, then it takes only name. Fields can also be a comma separated attribute string.

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The List Lightning Web Component creates a searchable and sortable list from provided data.

Available c-list Attributes

Attribute	Value	Type	Required	Description
channel		string		If set, the list component acts as observer and listens to the channel for data from the Datasource LWC.
enable-load-more	true, false (Default: false)	boolean		To enable a button to load more list items.
issearchavailable	true, false (Default: false)	boolean		To display the search input field and filter dropdown list, set to true.
issortavailable	true, false (Default: false)	boolean		To enable sorting by ascending and descending order, set to true.
load-more-btn-label	(Default: "Load More Items")	string		Specifies the label of the load more button.
load-more-number-of-items	(Default: Default value depends upon the parent container height)	string		Limits the content to load when load more button is clicked.
name		string		Specifies the name of the element. Used by the Form Lightning Web Component.
records		array	yes	Contains the data for the list.
searchattribute	(Default: name)	string		Specifies comma separated field names used to search.
sortattribute	(Default: name)	string		Specifies which field to sort.
theme	slds, nds (Default: slds)	string		Specfies which theme to use.

Example c-list Component with Defined c-list-item

To create your own template for the list items, add a c-list-items component inside the c-list component and write an iteration template.

    <c-list records={data} issearchavailable="true" issortavilable="true">
        <c-list-items>
        </c-list-items>
    </c-list>

    <!-- iteration template required -->
    <template>
        <ul class="slds-has-dividers_around slds-has-block-links_space">
            <template for:each={data} for:item="item" for:index="index">
                <li key={item.id} class="slds-item">
                    <a href="javascript:void(0);">{item.name}</a>
                </li>
            </template>
        </ul>
    </template>

Example c-list Component

    <c-list records={data}>
    </c-list>

Available Methods

sortListBy(reverse, field)

Sorts the list by field. The second parameter is optional. If no field is provided then it takes name.

searchListBy(searchKey, fields)

Filters the list. The second parameter is optional. If no fields are provided, then it takes only name. Fields can also be a comma separated attribute string.

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The List Lightning Web Component creates a searchable and sortable list from data provided.

Available c-list Attributes

Attribute	Value	Type	Required	Description
channel		string		If set, the list component acts as observer and listens to the channel for data from the Datasource LWC.
issearchavailable	true, false (Default: false)	boolean		To display the search input field and filter dropdown list, set to true.
issortavailable	true, false (Default: false)	boolean		To enable sorting by ascending and descending order, set to true.
name		string		Specifies the name of the element. Used by the Form Lightning Web Component.
records		array	yes	Contains the data for the list.
searchattribute	(Default: name)	string		Specifies comma separated field names used to search.
sortattribute	(Default: name)	string		Specifies which field to sort.
theme	slds, nds (Default: slds)	string		Specfies which theme to use.

Example c-list Component with Defined c-list-item

To create your own template for the list items, add a c-list-items`component inside the `c-list component and write an iteration template.

    <c-list records={data} issearchavailable="true" issortavilable="true">
        <c-list-items>
        </c-list-items>
    </c-list>

    <!-- iteration template required -->
    <template>
        <ul class="slds-has-dividers_around slds-has-block-links_space">
            <template for:each={data} for:item="item" for:index="index">
                <li key={item.id} class="slds-item">
                    <a href="javascript:void(0);">{item.name}</a>
                </li>
            </template>
        </ul>
    </template>

Example c-list Component

    <c-list records={data}>
    </c-list>

Available Methods

sortListBy(reverse, field)

Sorts the list by field. The second parameter is optional. If no field is provided then it takes name.

searchListBy(searchKey, fields)

Filters the list. The second parameter is optional. If no fields are provided, then it takes only name. Fields can also be a comma separated attribute string. === Preview Lightning Web Component

The Preview Lightning Web Component enables previewing Lightning web components. User can set values to public attributes from user interface and dynamically check the output.