Skip to main content




Applies only to Traditional Web Apps




  • Edit
  • Display conversational content such as display photos, text, images, delivery time and status.

    A ChatMessage is used to display conversation posts in notifications or chat screens.

    How to use

    1. Drag the ChatMessage pattern into the preview.

    2. Set the content that you need in the placeholders.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    IsRight When set to true, aligns the pattern to right. Boolean No none
    IsInline If set as true, the chat balloon styles are changed to something similar to a post pattern. Boolean No False
    Color Set the backgound color. Color Identifier No Entities.Color.Neutral3
    ExtendedClass Add custom style classes to this Block. Text No none

    Layout and Classes


    Event Name Description Mandatory
    OnClick Event triggered when the user clicks the message container. False

    CSS Selectors

    Element CSS Class Description
    .chat-message-actions is--hidden When the server action ToggleChatActions hides the content
    .chat-message-actions is--visible When the server action ToggleChatActions shows the content

    Advanced Use Case

    Change ChatMessage styles according to user

    1. Drag a ListRecords widget into the preview with the chat users as the Source Record List.

    2. In the ListRecords widget, drag a ChatMessage pattern.

    3. In the IsRight parameter, type If(Chat.List.Current.ChatUser.Sender, True, False) to make the message appear on the right for the active user.

    4. In the Color parameter, type If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3) to change the background according to the user.

    5. In the ExtendedClass property, use If(Chat.List.Current.ChatUser.Sender, "color-neutral-0", "") to change the color of text to white, if the background has the primary color. If the primary color is white, change the following code to color-neutral-10.

    6. In the UserInitials pattern, set the Color parameter inside the Image placeholder to If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3) in order to change the text color and to match the same conditions set above.

    7. Set the IsLight parameter to If(Chat.List.Current.ChatUser.Sender, True, False).

    8. Publish and test.

    The result would be something like this:

    Show/Hide Actions Placeholder on click

    1. Drag the ChatMessage Pattern into the preview.
    2. Type a name for the pattern.
    3. In the Events property, choose a New Screen Action for the Handler.
    4. In this new action, drag the ToggleChatActions. You can find it under the Logic tab - OutSystemsUIWeb - ChatMessage folder.

    5. In the WidgetId parameter, type the name of the ChatMessage pattern.

    6. Publish and test.

    The result is something like this:

    • Was this article helpful?