Foundset List

(part of package 'Advanced Renderers') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A Custom List Component that displays a foundset of records with custom rendering, drag & drop sorting, and HTML customization.

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

Properties

dragEnabled

When set to true, allows to drag records into another FoundSet List element Type: Boolean Default Value: false

---

dragSortableOptions

Customize options for the drag n'drop and sortable Type: CustomType<customrenderedcomponents-foundsetlist.sortableOptions>

---

dropEnabled

When set to true, allows to drop records from another FoundSet List element Type: Boolean Default Value: false

---

enabled

Flag indicating whether the list is enabled for user interaction. Type: Enabled Default Value: true

---

entryRendererFunction

A client-side function used to render each entry in the list. Type: Clientfunction

---

entryStyleClassDataProvider

Data provider used to determine the CSS style class for each list entry. Type: Dataprovider

---

firstItemHtml

Optional HTML content to be displayed for the first item in the list. Type: Tagstring

---

foundset

The foundset of records bound to this component. Type: JSFoundset Default Value: {"foundsetSelector":""}

---

lastItemHtml

Optional HTML content to be displayed for the last item in the list. Type: Tagstring

---

responsiveDynamicHeight

Flag indicating whether the list height adjusts dynamically based on its content. Type: Boolean Default Value: false

---

responsiveHeight

Responsive height for the list component in pixels. Type: Number Default Value: 500

---

reverseOrder

When true, the list displays records in reverse order. Type: Boolean Default Value: false

---

selectionClass

CSS style class applied to a selected list entry. Type: Styleclass

---

showAs

Option whether text is shown as sanitized html or trusted html (as is). Type: String Default Value: "html"

---

sortableEnabled

When set to true, allows to reorder records within the FoundSet List element using drag & drop Type: Boolean Default Value: false

---

styleClass

CSS style classes applied to the list component. Type: Styleclass

---

tooltipDataProvider

Data provider used to determine the tooltip content for each list entry. Type: Dataprovider

---

tooltipFunction

This is a client side function that gets 2 arguments: first is the data-target (this should be set in the entry renderer) and second is the entry of the data Type: Clientfunction

---

visible

Flag indicating whether the list component is visible. Type: Visible

---

Events

onClick(record,foundSetIndex,dataTarget,event)

Called when the mouse is clicked on a list entry

Parameters:

• {JSRecord} record The record corresponding to the clicked entry.

• {Number} foundSetIndex The index of the clicked entry in the foundset.

• {String} dataTarget The data target identifier set in the entry renderer.

• {JSEvent} event The event object associated with the click.

---

onDoubleClickMethodID(record,foundSetIndex,dataTarget,event)

Called upon double click on a list entry

Parameters:

• {JSRecord} record The record corresponding to the double-clicked entry.

• {Number} foundSetIndex The index of the entry in the foundset.

• {String} dataTarget The data target identifier set in the entry renderer.

• {JSEvent} event The event object associated with the double-click.

---

onDrop(event,oldIndicies,newIndicies,recordsMoved,recordsMovedTo)

Called when records dragged from another FoundSet List are dropped into this FoundSet list element. You are responsible to persist the changes for the affected records. Make sure to persist any change for the affected record and call loadRecords for the affected foundsets. If you don't the FoundSet List may go into an incosistent state.

Parameters:

• {JSEvent} event The JSEvent for this element

• {Array<Number>} oldIndicies The original indexes, when drag started, of the dropped records

• {Array<Number>} newIndicies The new indexes of records upon drop

• {Array<JSRecord>} recordsMoved The records dragged and dropped

• {Array<JSRecord>} recordsMovedTo The records whom have been shifted upon drop

---

onFirstItemClick(event,dataTarget)

Called when the mouse is clicked on the optional firstItemHtml

Parameters:

• {JSEvent} event The event object associated with the click.

• {String} dataTarget The data target identifier defined in the entry renderer.

---

onLastItemClick(event,dataTarget)

Called when the mouse is clicked on the optional lastItemHtml

Parameters:

• {JSEvent} event The event object associated with the click.

• {String} dataTarget The data target identifier.

---

onRightClickMethodID(record,foundSetIndex,dataTarget,event)

Called upon right click on a list entry

Parameters:

• {JSRecord} record The record corresponding to the right-clicked entry.

• {Number} foundSetIndex The index of the entry in the foundset.

• {String} dataTarget The data target identifier set in the entry renderer.

• {JSEvent} event The event object associated with the right-click.

---

onSortEnd(event,oldIndicies,newIndicies,recordsMoved,recordsMovedTo)

Called when FoundSet List records are reordered by drag&drop. You are responsible to persist the changes for the affected records. Make sure to persist any change for the affected record and call loadRecords for the affected foundsets. If you don't the FoundSet List may get into an incosistent state

Parameters:

• {JSEvent} event The JSEvent for this element

• {Array<Number>} oldIndicies The original indexes of the moved records

• {Array<Number>} newIndicies The new record indexes

• {Array<JSRecord>} recordsMoved The records sorted

• {Array<JSRecord>} recordsMovedTo The records whom have been shifted upon sort end

---

API

addStyleClassForSelector(selector,styleClass)

Adds the given style class to all items in the list's children that match the selector. Note that tag selectors are not supported.

Parameters:

• {String} selector The CSS selector used to identify items in the list's children.

• {String} styleClass The style class to add to or remove from the matching items.

---

removeStyleClassForSelector(selector,styleClass)

Removes the given style class from all items in the list's children that match the selector. Note that tag selectors are not supported.

Parameters:

• {String} selector The CSS selector used to identify items in the list's children.

• {String} styleClass The style class to add to or remove from the matching items.

---

Types

sortableOptions

Configuration options for sortable behavior in the FoundSet List. scripting type: CustomType<customrenderedcomponents-foundsetlist.sortableOptions>

• animation

  • Animation duration in milliseconds for drag transitions.

  • Type: int

• handle

  • CSS style class used to define the drag handle.

  • Type: styleclass

• multiDrag

  • When true, allows multiple records to be dragged simultaneously.

  • Type: boolean

  • Default Value: false

• multiDragKey

  • The key used to enable multiple selection during drag (e.g. CTRL).

  • Type: string

  • Default Value: "CTRL"

---