List Form Component

(part of package 'Servoy Core') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

listformcomponent_doc.js

This is a reference page; many components have detailed usage guides here.

Properties

containedForm

Specifies the form that is embedded within the list form component. Type: Formcomponent

---

editable

Specifies if the list form component allows editing of entries. Type: Protected Default Value: true

---

foundset

Reference to the foundset bound to the component for displaying data. Type: JSFoundset Default Value: {"foundsetSelector":""}

---

pageLayout

Determines the layout mode of the list form component, such as 'cardview' or 'listview'. Type: String

---

paginationStyleClass

CSS style class for styling the pagination controls of the component. Type: 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 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

---

rowEditableDataprovider

Data provider indicating whether each row is editable. Type: Dataprovider

---

rowEnableDataprovider

Data provider indicating whether each row is enabled. Type: Dataprovider

---

rowStyleClass

CSS style class applied to individual rows in the list form component. Type: Styleclass

---

rowStyleClassDataprovider

Data provider used to determine the CSS style class for each row dynamically. Type: 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. .listitem-info { background-color: blue; } .listitem-selected { background-color: orange; } Type: Styleclass

---

styleClass

CSS style class for custom styling of the list form component. Type: Styleclass Default Value: "svy-listformcomponent"

---

tabSeq

Defines the tab order for navigating through the component. Type: Tabseq

---

visible

Controls the visibility of the list form component. Type: Visible

---

Events

onListItemClick(record,event)

Triggered when a list item is clicked.

Parameters:

• {JSRecord} record The record associated with the clicked list item.

• {JSEvent} event Contains details about the click event, such as the source and coordinates.

---

onSelectionChanged(event)

Triggered when the foundset selection changes.

Parameters:

• {JSEvent} event Contains details about the selection change.

---

---