Render repeated Freedom UI components

Level: intermediate

Display a dynamic list of repeated Freedom UI components using the crt.TemplateList component in the Freedom UI page schema based on template and specific conditions. For example, the list of AI Skills that are connected to Creatio.ai chat panel. This provides a seamless and scalable way to build Freedom UI lists 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: TemplateList component.
      2. Bind the model attribute to the items property. For this example, CopilotQuickActions.

   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 crt.TemplateList 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, a dynamic list of repeated Freedom UI components will be displayed.

---

See also

TemplateList component