--- schema_version: "1" id: aa83f4b65ecd9908b5f813336082d889af0706b9903bf1854c44bdac4704b03e title: List 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_list_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_list_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 280b31c234c2c24963862c3c80c8bb39b2a2368168340774a07fc7981eac8708 description: For the managed package runtime, this page contains a List LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # 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](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 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-list`component and write an iteration 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](http://item.name/)_ is visible as the label for each list item. However, the user can still change the sort field and search field. ``` ``` ## 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 | field-name | (Default: Name) | string | | Specifies which key from the records to display.|

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. ```

``` ## 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. ``` ``` ## 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. ```

``` ## 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. ``` ``` ## 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.