# List Form Component (part of package '[Servoy Core](/reference/servoyextensions/packages/ui-component-packages/servoy-core.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) 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](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoy-developer/component_and_service_property_types.md#insets) *** ### editable Specifies if the list form component allows editing of entries. Type: [Protected](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true *** ### foundset Reference to the foundset bound to the component for displaying data. Type: [JSFoundset](/reference/servoycore/dev-api/database-manager/jsfoundset.md) Default Value: {"foundsetSelector":""} *** ### pageLayout Determines the layout mode of the list form component, such as 'cardview' or 'listview'. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) *** ### paginationStyleClass CSS style class for styling the pagination controls of the component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#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: ). 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](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/js-lib/number.md) *** ### rowEditableDataprovider Data provider indicating whether each row is editable. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### rowEnableDataprovider Data provider indicating whether each row is enabled. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### rowStyleClass CSS style class applied to individual rows in the list form component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### rowStyleClassDataprovider Data provider used to determine the CSS style class for each row dynamically. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### styleClass CSS style class for custom styling of the list form component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "svy-listformcomponent" *** ### tabSeq Defines the tab order for navigating through the component. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq) *** ### visible Controls the visibility of the list form component. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible) *** ## Events ### onListItemClick(record,event) Triggered when a list item is clicked. **Parameters:** > * {[JSRecord](/reference/servoycore/dev-api/database-manager/jsrecord.md)} record The record associated with the clicked list item. > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event Contains details about the click event, such as the source and coordinates. *** ### onSelectionChanged(event) Triggered when the foundset selection changes. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event Contains details about the selection change. *** *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/list-form-component-container.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.