(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dynamic List User Manual

The Dynamic List component displays a scrollable or paginated list of items, supporting dynamic data loading, virtualization for performance, and flexible layout. It is ideal for rendering large datasets efficiently and can be customized with various data source and visual options.

Properties

Visual Properties

  • itemSize
    Sets the height (in pixels) of each list item. Adjusting this value changes the vertical space each item occupies.
    Example:
    itemSize: 80 will render each list item with a height of 80px.

  • autoHeight
    When enabled, the list automatically adjusts its height based on the number of visible elements. Useful for embedding lists in flexible layouts.
    Example:
    autoHeight: true will make the list shrink or grow to fit its content.

  • numberOfVisibleListElements
    Specifies how many list items should be visible when autoHeight is enabled. The component height will be calculated as itemSize * numberOfVisibleListElements.
    Example:
    numberOfVisibleListElements: 5 with itemSize: 100 will set the list height to 500px.

Data Source Properties

  • dataSourceId
    Specifies the ID of the data source from which the list fetches its data. This should match a configured data source in your system.
    Example:
    dataSourceId: "usersDataSource"

  • dataSourcePath
    Defines a JSON path expression to extract the list data from the API response. This is useful when the data is nested within the response object.
    Example:
    dataSourcePath: "content.items" will extract the array from response.content.items.

  • getEntityCollectionHttpRequestParametersMap
    Configures HTTP request parameters for fetching data from the data source. Allows mapping of query, path, or body parameters as needed by the backend API.
    Example: 

  {
    "QUERY": { "active": true },
    "PATH": {},
    "BODY": {}
  }

  • keyExpression
    Defines the field used as a unique key for each list item. This improves rendering performance and ensures correct item tracking.
    Example:
    keyExpression: "userId" will use the userId field as the unique identifier for each item.

  • enablePagination
    Enables server-side pagination for large datasets. When true, the list loads data in pages rather than all at once.
    Example:
    enablePagination: true will fetch data page by page as the user scrolls.

  • pageSize
    Sets the number of items to load per page when pagination is enabled.
    Example:
    pageSize: 25 will load 25 items per page.

Elements

  • elements
    Contains child dynamic elements to be rendered for each list item. This allows for flexible layouts and embedding of other dynamic components within each list entry.
    Example: 
  [
    { "type": "DynamicTextComponent", "props": { "text": "{{name}}" } }
  ]

General Properties (Inherited)

  • displayName
    Sets the display name of the component, shown in the structure panel.
    Example:
    displayName: "User List"

  • id
    Specifies a unique identifier for the component.
    Example:
    id: "userList1"

Data Example

The list expects an array of objects, each representing a list item. If using pagination, the response should be a paginable object with a content array.
Example data:

[
  { "userId": 1, "name": "Alice" },
  { "userId": 2, "name": "Bob" }
]

Or, with pagination:

{
  "content": [
    { "userId": 1, "name": "Alice" },
    { "userId": 2, "name": "Bob" }
  ],
  "totalElements": 100,
  "totalPages": 10,
  "number": 0,
  "size": 10
}

Property Sections

Visual

  • itemSize
  • autoHeight
  • numberOfVisibleListElements

Data Source

  • dataSourceId
  • dataSourcePath
  • getEntityCollectionHttpRequestParametersMap
  • keyExpression
  • enablePagination
  • pageSize

Elements

  • elements

General

  • displayName
  • id

This manual provides a structured overview of the Dynamic List component, with each property explained, categorized, and accompanied by usage examples.

  • No labels