Collection component

The Collection component functions as a versatile container element, allowing you to iterate through a list of elements and display them according to their specific configurations.

Configurable properties

• collectionSource: This property specifies the process key where a list can be found. It should be a valid array of objects.

Example usage

Here’s an example of configuring a Collection component to display a list of products:

Source collection data example using an MVEL business rule:

output.put("processData", //this is the key
{
  "products": [ // this is the source that will populate the data on collection
    {
      "name": "Product One Plus",
      "description": "The plus option",
      "type": "normal"
    },
    {
      "name": "Product Two Premium",
      "description": "This is premium product",
      "type": "recommended"
    },
    {
      "name": "Product Basic",
      "description": "The most basic option",
      "type": "normal"
    },
    {
      "name": "Gold Product",
      "description": "The gold option",
      "type": "normal"
    }
  ]
}
);

The above configuration will render the Collection as shown below:

Components within a collection use relative paths to the collection source. This means that wherever the collection is found inside the process data, the components inside the collection need their keys configured relative to that collection.

To send and display dynamic data received on the keys you define to the frontend, make sure to include the following data structure in your root UI element using Message parameters. For instance, if you want to include data for the processData key mentioned earlier, your configuration should resemble this:

{
  "processData": ${processData}
}

When do you need Collection Prototypes?

• Single layout for all items: If all items in your collection should display the same way, add one Collection Prototype and leave PIK/PIV empty
• Multiple layouts based on item properties: If items should display differently based on their data (like the type field in the example above), add multiple Collection Prototypes with PIK/PIV configured

For detailed configuration guidance, see the Collection Prototype documentation:

Collection prototype

Limitations

Forms in collections are not supported.