A Collection Prototype is an additional container type that allows you to define multiple prototypes for a single Collection. This feature enables you to display elements from the same collection differently.
For instance, imagine you are designing a user interface where users can browse a list of products, with one product deserving special emphasis as the recommended choice. In this scenario, you can employ a collection containing different collection prototypes, each tailored for regular and recommended products
- Prototype Identifier Key - This key instructs the system on where to look within the iterated object to identify the prototype to display. In the example below, the key is "type."
- Prototype Identifier Value - This value should be present at the Prototype Identifier Key when this
COLLECTION_PROTOTYPEshould be displayed. In the example below, the value can be "normal" or "recommended."
Let's revisit the example we used in the Collection section:
Sample source collection data for products:
"name": "Product One Plus",
"description": "The plus option",
"name": "Product Two Premium",
"description": "This is premium product",
"type": "recommended" // source for type - recommended
"name": "Product Basic",
"description": "The most basic option",
"type": "normal" //source for type - normal
"name": "Gold Product",
"description": "The gold option",
The above configuration will render:
Adding elements with UI Actions
When configuring elements that incorporate UI Actions there are a few considerations to keep in mind. These adjustments are necessary to enable users to select products for further processing in subsequent steps of the workflow.
Step 1 - Defining the Node Action
This save-item action is categorized as manual since it is user-triggered and mandatory because product selection is a prerequisite for proceeding to the next Node in the process. Additionally, it is marked as Repeatable to allow users to change their selected product.
Pay attention to the Data to send section, which specifies where in the process data the selected product (the one the user clicked on) should be saved. In this example, it is saved under the
Step 2 - Adding the UI Action
Now that you have a Node Action defined, you can proceed to add a UI action to the collection prototype. This UI action can be added directly to the collection prototype UI element or other UI elements within it that support UI actions. For more information on UI actions, click here.
Collection Item Save Key field has an important role in the UI Action configuration of element with the UI action. This field represents how we pass the value of the Product that the user has selected to the Node Action that we created in Step 1, named save-item.
In our example, we set Collection Item Save Key to be
selectedProduct key is how we expose the data from the Collection to the Node Action It is imperative that the name in the Collection Item Save Key is the same as the one used in the Data to send input in the Node Action.
Before clicking the collection prototype UI element with the attached UI action, this is how the process data appears:
After selecting a product from the list (notice the new field