Version: 10

Customize the chat view in the Agent Inbox panel

Level: intermediate

While agents handle a chat, they might need data or actions that are specific to how your company works with customers, for example, the account of the contact or a company-specific action for the chat. You can customize the chat view of the Agent Inbox panel to give agents these tools and data in one place, without switching to other pages. For example, add a button that runs a custom action for the selected chat, add a field to the contact profile, or show an additional column on the chat tile. To do this, extend the "Agent side bar" (AgentSideBar code) schema of the "Client module" type. The chat view is built on the Conversation component and its child components. Learn more: Omnichannel inbox component.

Add a button to the chat header

The elements of the chat header are grouped in a layout container that has no name. You cannot add a button to the group of out-of-the-box buttons. Creatio adds the custom button on a separate line above or below the chat header.

To add a button to the chat header:

Open the Contact Center app in the Application Designer.
Open the Agent side bar page.
Click → Source code to open the source code of the Freedom UI page.

Add the button.

Add a localizable string that stores the tooltip of the button. For example, set the code of the string to "UsrSomeChatActionButton_title." Instructions: Add a localizable string.
Go to the viewConfigDiff schema section.

Add the button to the actions property of the Conversation component.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrSomeChatActionButton",
        "values": {
            "type": "crt.Button",
            /* Button icon. Specify the name of an out-of-the-box
            Freedom UI icon. */
            "icon": "rocket-icon",
            "size": "medium",
            "iconPosition": "only-icon",
            "color": "default",
            /* Button tooltip. */
            "title": "#ResourceString(UsrSomeChatActionButton_title)#",
            "clicked": {
                "request": "usr.UsrSomeChatActionRequest",
                "params": {
                    /* ID of the selected item. While a chat is open,
                    the ID of the chat. */
                    "chatId": "$SelectedItemId"
                }
            }
        },
        /* Name of the "Conversation" component. */
        "parentName": "Conversation",
        "propertyName": "actions"
        /* Without the "index" property, Creatio adds the button on
        a separate line below the chat header. To add the button on
        a separate line above the chat header, set "index" to
        "0." */
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Implement the request handler.

Go to the handlers schema section.

Add a custom implementation of the usr.UsrSomeChatActionRequest custom request handler.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    ...,
    {
        request: "usr.UsrSomeChatActionRequest",
        /* The implementation of the custom request handler. */
        handler: async (request, next) => {
            /* ID of the selected chat from the "chatId" parameter of
            the request. */
            const chatId = request.chatId;
            /* Implement the business logic of the button. */
            /* Call the next handler if it exists and return its
            result. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,

Save the changes.

As a result, the chat header of the Agent Inbox panel shows the button. If an agent clicks the button, Creatio runs the business logic for the selected chat.

Add a button to the message sender

Open the Contact Center app in the Application Designer.
Open the Agent side bar page.
Click → Source code to open the source code of the Freedom UI page.

Add the button.

Add a localizable string that stores the tooltip of the button. For example, set the code of the string to "UsrSomeToolbarButton_title." Instructions: Add a localizable string.
Go to the viewConfigDiff schema section.

Add the button to the toolbarItems property of the Message editor body component.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrSomeToolbarButton",
        "values": {
            "type": "crt.Button",
            "displayType": "text",
            /* Button icon. Specify the name of an out-of-the-box
            Freedom UI icon. */
            "icon": "pen-icon",
            "size": "small",
            "iconPosition": "only-icon",
            "color": "default",
            /* Button tooltip. */
            "title": "#ResourceString(UsrSomeToolbarButton_title)#",
            "clicked": {
                "request": "usr.UsrSomeToolbarActionRequest"
            }
        },
        /* Name of the "Message editor body" component. */
        "parentName": "MessageEditorBody",
        "propertyName": "toolbarItems",
        /* Button position in the toolbar. Out of the box, the
        toolbar includes 5 elements. */
        "index": 1
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Implement the request handler.

Go to the handlers schema section.

Add a custom implementation of the usr.UsrSomeToolbarActionRequest custom request handler.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    ...,
    {
        request: "usr.UsrSomeToolbarActionRequest",
        /* The implementation of the custom request handler. */
        handler: async (request, next) => {
            /* Text in the chat input. */
            const text = await request.$context.OmniChatInput;
            /* ID of the selected item. While a chat is open, the ID of
            the chat. */
            const chatId = await request.$context.SelectedItemId;
            /* Implement the business logic of the button. To change
            the text in the chat input, set the "OmniChatInput"
            attribute. */
            /* Call the next handler if it exists and return its
            result. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,

Save the changes.

As a result, the message sender of the Agent Inbox panel shows the button at the specified position. If an agent clicks the button, Creatio runs the business logic for the selected chat.

Add a field to the contact profile

The contact profile shows the data of the contact of the selected chat. Creatio loads the data of the selected chat to the ActiveChatDS data source of the "Chat" (OmniChat code) object. Learn more: Contact compact profile (user documentation).

To add a field to the contact profile:

Open the Contact Center app in the Application Designer.
Open the Agent side bar page.
Click → Source code to open the source code of the Freedom UI page.

Set up the attribute of the field.

Go to the viewModelConfigDiff schema section.

Add the attribute that binds the column of the contact to the view model.

viewModelConfigDiff schema section
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
    ...,
    {
        "operation": "merge",
        "path": ["attributes"],
        "values": {
            "UsrActiveChatContactAccountName": {
                "modelConfig": {
                    /* Path to the column from the "ActiveChatDS"
                    data source. Creatio loads the value together
                    with the data of the selected chat. */
                    "path": "ActiveChatDS.Contact.Account.Name"
                }
            }
        }
    }
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

Add the field.

Add a localizable string that stores the label of the field. For example, set the code of the string to "UsrContactAccount_label." Instructions: Add a localizable string.
Go to the viewConfigDiff schema section.

Add the field to the fields property of the Contact profile component.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrContactAccount",
        "values": {
            "type": "crt.Input",
            "label": "#ResourceString(UsrContactAccount_label)#",
            /* Field attribute. */
            "control": "$UsrActiveChatContactAccountName",
            "labelPosition": "above",
            "readonly": true
        },
        /* Name of the "Contact profile" component. */
        "parentName": "ContactProfile",
        "propertyName": "fields",
        /* Field position. Out of the box, "0" is the container
        of the button that links the chat to a contact, "1" is the
        container of the channel, "2" is the email, "3" is the business
        phone, and "4" is the mobile phone. */
        "index": 5
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Save the changes.

As a result, the contact profile of the Agent Inbox panel shows the field with the data of the contact of the selected chat.

Add an element to the chat tile

The out-of-the-box chat tiles use the ChatsNewItemsDS template for the New items list and the ChatsInProgressItemsDS template for the In progress list.

To add an element to the chat tile:

Open the Contact Center app in the Application Designer.
Open the Agent side bar page.
Click → Source code to open the source code of the Freedom UI page.

Set up the attribute of the element.

Go to the viewModelConfigDiff schema section.

Add the attribute that binds the column of the chat to the viewModelConfig.attributes property of the collection attribute.

viewModelConfigDiff schema section
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
    ...,
    {
        "operation": "merge",
        "path": ["attributes"],
        "values": {
            /* Collection attribute. "ChatsNewItems" for the
            "New items" list. */
            "ChatsInProgressItems": {
                "viewModelConfig": {
                    "attributes": {
                        ...,
                        "UsrContactAccountName": {
                            "modelConfig": {
                                /* Path to the column from the data
                                source of the "OmniChat" object.
                                "ChatsNewItemsDS" for the
                                "New items" list. */
                                "path": "ChatsInProgressItemsDS.Contact.Account.Name"
                            }
                        }
                    }
                }
            }
        }
    }
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

Add the element.

Go to the viewConfigDiff schema section.

Add the element that shows the column, for example, a Label component, to the tile template.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrInProgressChatTileAccountLabel",
        "values": {
            "type": "crt.Label",
            /* Bind to the collection attribute, not to the data
            source. */
            "caption": "$ChatsInProgressItems.UsrContactAccountName",
            "labelEllipsis": true
        },
        /* Name of the tile template. "ChatsNewItemsDS" for the
        "New items" list. You can also specify a nested container
        of the template, for example,
        "InProgressChatTileSecondLineFlexContainer." */
        "parentName": "ChatsInProgressItemsDS",
        "propertyName": "items"
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Save the changes.

As a result, the chat tiles of the Agent Inbox panel show the column of the chat.

Add a button to the chat header​

Add a button to the message sender​

Add a field to the contact profile​

Add an element to the chat tile​

See also​

Add a button to the chat header

Add a button to the message sender

Add a field to the contact profile

Add an element to the chat tile

See also