Render repeated Freedom UI components

Level: intermediate

Display a dynamic list of repeated Freedom UI components using the Template list component in a Freedom UI page schema based on a template and specific conditions. For example, a list of AI Skills that are connected to Creatio.ai chat panel. This provides a seamless and scalable way to build Freedom UI lists dynamically based on runtime data, with minimal effort.

To render repeated Freedom UI components:

1. Implement the data source. For example, implement the data source that receives the AI Skill list from the CopilotIntent object schema.

   modelConfigDiff schema section

   modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[
       {
           "operation": "merge",
           "path": [
               "dataSources"
           ],
           "values": {
               "CopilotQuickActionsDS": {
                   "type": "crt.EntityDataSource",
                   "scope": "viewElement",
                   "config": {
                       "entitySchemaName": "CopilotIntent",
                       "attributes": {
                           "Name": {
                               "path": "Name"
                           }
                       }
                   }
               }
           }
       }
   ]/**SCHEMA_MODEL_CONFIG_DIFF*/

2. Add an attribute.

   1. Go to the viewModelConfigDiff schema section → values configuration object.
   2. Add an attribute that stores a list of elements to display. For this example, CopilotQuickActions. The data source is the CopilotIntent schema whose Name column values are displayed as the titles of the Button component.
   viewModelConfigDiff schema section

   viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
       {
           "operation": "merge",
           "path": [
               "attributes"
           ],
           "values": {
               ...,
               "CopilotQuickActions": {
                   "isCollection": true,
                   "modelConfig": {
                       "path": "CopilotQuickActionsDS"
                   },
                   "viewModelConfig": {
                       "attributes": {
                           "CopilotQuickActionsDS_Name": {
                               "modelConfig": {
                                   "path": "CopilotQuickActionsDS.Name"
                               }
                           }
                       }
                   }
               }
           }
       }
   ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/

3. Set up rendering parameters.

   1. Bind an attribute to the page element.

      1. Go to the viewConfigDiff schema section → corresponding page element → values configuration object whose type property is set to crt.TemplateList. Learn more: Template list component.

      2. Bind the model attribute to the items property. For this example, CopilotQuickActions.

         Since version 8.3.1, Freedom UI components that work with collections support bindings to attributes inside nested collections. For example, when a collection rendered in the template list includes a nested collection that is passed to the items property of a Data grid component used as a template, bindings like $ParentCollection.NestedCollection.Id for the cellView and editingCellView properties of the Data grid component work correctly.

   2. Implement the template array of objects to render repeated Freedom UI components.

   3. Implement the classes array of CSS classes to customize the appearance and layout of the Template list component.

   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       {
           "operation": "insert",
           "name": "Conversation",
           "values": {
               "type": "crt.TemplateList",
               "items": "$CopilotQuickActions",
               "direction": "row",
               "gap": 32,
               "template": [
                   {
                       "type": "crt.Button",
                       "caption": "$CopilotQuickActions.CopilotQuickActionsDS_Name",
                       "size": "medium",
                       "clicked": {
                           "request": "crt.CopilotActionRequest",
                           "params": {
                               "prompt": "$CopilotQuickActions.CopilotQuickActionsDS_Name"
                           }
                       }
                   }
               ],
               "classes": [
                   "copilot-actions-list"
               ]
           },
           "parentName": "MainContainer",
           "propertyName": "items",
           "index": 0
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/

As a result, Creatio will display a dynamic list of repeated Freedom UI components.

---

See also

Template list component

Best practices for optimizing data fetching in Freedom UI page logic