# List Form Component

(part of package '[Servoy Core](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/servoy-core)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

listformcomponent\_doc.js

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### containedForm

Specifies the form that is embedded within the list form component. Type: [Formcomponent](https://docs.servoy.com/servoy-developer/component_and_service_property_types#formcomponent)

***

### containedFormMargin

Margin added to the containedForm. Use this property instead of adding margin via CSS for a correct layout of the contained forms. Type: [Insets](https://docs.servoy.com/servoy-developer/component_and_service_property_types#insets)

***

### editable

Specifies if the list form component allows editing of entries. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### foundset

Reference to the foundset bound to the component for displaying data. Type: [JSFoundset](https://docs.servoy.com/reference/servoycore/dev-api/database-manager/jsfoundset) Default Value: {"foundsetSelector":""}

***

### pageLayout

Determines the layout mode of the list form component, such as 'cardview' or 'listview'. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### paginationStyleClass

CSS style class for styling the pagination controls of the component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### responsiveHeight

This property sets the height of the listformcomponent when using scrolling mode in a responisive form. Adding a listformcomponent in a flex-content layout and setting responsiveHeight property to 0, let the listformcomponent grow up to 100% height of parent element (see more on flex-layout here: <https://github.com/Servoy/12grid/wiki/Flexbox-Layout> ). Used with other containers than flex-content layout in order to grow the listformcomponent to 100% height, the parent element must have a known height. When responsiveHeight is set to -1, the LFC will auto-size it's height to the number of rows displayed - in this case there is no vertical scrollbar and all rows are rendered Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 300

***

### responsivePageSize

This property in only used when the component is placed in a responsive form; it is ignored in absolute; when used in paging mode (client property UICONSTANTS.LISTFORMCOMPONENT\_PAGING\_MODE = true) it sets the number of records displayed in a single page; when used in scrolling mode (which is the default mode) it is only used when pageLayout is set to cardiew, and it sets the maximum records displayed in a single row of the listformcomponent. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

***

### rowEditableDataprovider

Data provider indicating whether each row is editable. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### rowEnableDataprovider

Data provider indicating whether each row is enabled. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### rowStyleClass

CSS style class applied to individual rows in the list form component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### rowStyleClassDataprovider

Data provider used to determine the CSS style class for each row dynamically. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### selectionClass

In case **rowStyleClassDataprovider** or **rowStyleClass** are used, make sure that the selection styleclass definition is last in the solution stylesheet, to avoid overwriting it.\
\&#xNAN;*.listitem-info* {\
\&#xNAN;*background-color: blue;*\
}\
\&#xNAN;*.listitem-selected* {\
\&#xNAN;*background-color: orange;*\
} Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### styleClass

CSS style class for custom styling of the list form component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass) Default Value: "svy-listformcomponent"

***

### tabSeq

Defines the tab order for navigating through the component. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### visible

Controls the visibility of the list form component. Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onListItemClick(record,event)

Triggered when a list item is clicked.

**Parameters:**

> * {[JSRecord](https://docs.servoy.com/reference/servoycore/dev-api/database-manager/jsrecord)} record The record associated with the clicked list item.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event Contains details about the click event, such as the source and coordinates.

***

### onSelectionChanged(event)

Triggered when the foundset selection changes.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event Contains details about the selection change.

***

***