Chat 🆕

Overview

The Avonni Chat component brings real-time messaging to your Lightning Pages. Use it to power internal collaboration, customer communications, or any workflow where threaded conversations add value to Salesforce.

---

Quick Start: Build a Case Chat in 2 Minutes

Want to see the component in action immediately? Follow these 7 steps to add a functional Case Comment history to a Case Record Page.

1

Create a New Component

• Open the Avonni Dynamic Components App.

• Click the New button to create a new component.

• Name: Enter a name (e.g., "Case Chat History").

• Target Page Object: Select Case.

  • Critical: The Target Page Object setting tells the component it is operating in the context of a Case record, allowing variables like {!RecordId} to function correctly.

2

Add the Component to the Canvas

• From the Component Library (left sidebar), search for Chat.

• Drag and drop the Chat component onto the main canvas

3

Configure the Data Source to Query

We need to fetch the Case Comment records from Salesforce.

• Select the Chat component on the canvas.

• In the Properties Panel (right), set Data Source to Query.

• Object: Select CaseComment.

• Filter:

  • Click Add Filter.

  • Field: ParentId.

  • Operator: Equal.

  • Value: {!$Component.RecordId}.

  • Why: This ensures we only load comments for the specific Case currently being viewed.

• Order By: CreatedDate ASC (Oldest to Newest).

4

Map the Query Fields

Connect the fields returned by your Query to the Chat component attributes.

• Scroll down to the Data Mappings section.

• Content: Select Body.

  • Note: This maps the actual text of the comment to the message bubble.

• Date: Select CreatedDate.

Check the Preview: The canvas should now display the conversation history for the context record. If the preview is empty, ensure the Preview Context is set to a case from the Debug Panel.

5

Configure the Publisher

Set up the input box for new messages.

• Scroll to the Publisher section.

• Mode: Set to Rich.

• Button Label: Change "Send" to Post Comment.

• Placeholder: Enter Type a reply....

6

Add the "Save" Logic (Interaction)

Make the "Post Comment" button functional.

• Click the Interactions tab in the Properties Panel.

• Click Add Interaction.

  • Trigger: Select On Message Publish.

  • Action: Select Enter Record Data Manually.

  • Object: Select CaseComment.

• Field Mappings:

  • ParentId: {!RecordId} (Links the comment to this Case).

  • CommentBody: {!event.detail.value} (Captures your typed text).

  • IsPublished: true (Important: ensure this is set to true so the comment is visible).

7

Save and Activate

• Click Save.

• Use the Deploy button to add this dynamic component to your actual Salesforce Case Lightning Page

---

Configuration

Select the Chat component on the canvas to access its properties in the Properties Panel. Configuration involves defining where the messages come from, how the publisher behaves, and how to handle new messages.

Connecting to Message Data (Data Source)

You can populate the chat history using either the Manual or Query method.

Option A: Manual Data Source

Use this for static displays or prototyping.

1. Select Data Source: Choose Manual.

2. Configure Resources: Resources represent the people or entities involved in the chat.

   • Label: The display name of the person/user.

   • Avatar Source: URL for the user image.

   • Avatar Fallback Icon: An icon name (e.g., standard:user) to display if no image is available.

   • Avatar Initials: Text to display (e.g., "JD") if no image is available.

3. Configure Messages: Create the specific message bubbles.

   • Author: The name or ID of the resource who sent the message.

   • Type: Explicitly set as inbound (received) or outbound (sent).

   • Date: The timestamp of the message.

   • Content: The actual text body of the message.

Option B: Query Data Source

Use this to dynamically fetch records from Salesforce (e.g., pulling all comments related to a Case).

1. Select Data Source: Choose Query.

2. Define Query: Select the Object (e.g., CaseComment) and set filters (e.g., ParentId equals recordId) to fetch the correct records.

3. Data Mappings: Map the fields from your query to the chat display.

   • Content: Select the field containing the message body (e.g., CommentBody).

   • Date: Select the field containing the timestamp (e.g., CreatedDate).

---

General Settings

These settings control the overall behavior of the chat component, including how messages are attributed and displayed.

Setting	Description	Example
Current Resource ID	ID of the message author; determines sent vs. received positioning. Defaults to current user if empty.	{!$User.Id}
Read Only	Hides publisher; users can view but not send	falase
Disabled	Grays out component; prevents all interaction	false
Message Date Format	How timestamps display on messages	"MMM d, yyyy h:mm a" → "Jan 15, 2025 2:30 PM"

---

Publisher Settings

Customize the input area where users type new messages.

Setting	Description	Example
Mode	ID of the message author; determines sent vs. received positioning. Defaults to current user if empty.	{!$User.Id}
Placeholder	Hides publisher; users can view but not send	falase
Publish Button Label	Grays out component; prevents all interaction	false
Maximum Length	How timestamps display on messages	"MMM d, yyyy h:mm a" → "Jan 15, 2025 2:30 PM"
Minimum Length	Required characters before sending	10
Show Character Count	Display character counter	True
Toolbar Position	Where formatting tools appear	Top

Categories

Select which formatting tool groups appear in the Rich mode toolbar:

• Font: Font family and size options.

• Text: Bold, italic, underline, strikethrough.

• Body: Lists, alignment, indentation.

• Remove Formatting: Clear all formatting from selected text.

• Header: Heading level options.

• Color: Text color picker.

• Highlight Color: Background highlight color picker.

Blocked Words

Define words that cannot be included in published messages. When users attempt to send messages containing blocked words, the publish action is prevented.

---

Real-Time Updates (Platform Events)

By default, the Chat component updates when you post a message. However, if a colleague or a customer posts a reply while you are looking at the screen, you usually wouldn't see it until you refresh the page.

Platform Events solve this. They allow the Chat component to "listen" for changes and update instantly when a new message is created in the database.

How to Enable Real-Time Chat

By default, the chat updates only when you post a message or refresh the page. To create a live, "Instant Messaging" experience where replies from others appear immediately, you can enable Platform Events.

This is configured in the Data Source settings:

1. Set Data Source to Query.

2. Expand Advanced Options and locate Query Refresh EMP.

3. Channel Name: Enter the API name of your Platform Event (e.g., Chat_Notification__e).

4. Key Field Name: Enter the API name of the field containing the Record ID (e.g., RecordId__c).

Need help setting this up? Using this feature requires creating a Platform Event and a Trigger Flow in Salesforce. 👉 Read the Full Setup Guide: How to Configure Real-Time Updates

---

Interaction Configuration

By default, the Chat component displays data. To make it functional (i.e., actually saving a message when the user clicks "Send"), you must configure an Interaction.

Scenario: Creating a Record on Publish

1. Navigate to the Interactions tab in the properties panel.

2. Add a new interaction with the trigger "Publish a New Message".

3. Action: Select Create Record.

4. Select: Enter Record Data Manually.

5. Object: Choose the object where messages should be stored (e.g., CaseComment, FeedItem, or a custom Chat_Log__c object).

6. Field Mappings: Map the data from the Chat component to your Salesforce Object.

   • Example (Case Comment):

     • ParentId: Map to {!Record.Id} (to link it to the current record).

     • CommentBody: Map to the Chat Component Attribute Value (this carries the text the user just typed).

     • IsPublished: Set a constant value of true.

Note: Once the record is created via the Interaction, the Chat Query (if configured) will automatically refresh to display the new message in the timeline

---

Example

Project Discussion Log

Goal: Create a chat interface on a custom "Project" object. This allows the project team to discuss updates and have those messages saved to a custom "Project Update" object.

1

Create the Component

• Open the Avonni Dynamic Components App.

• Click New.

• Name: Enter "Project Team Chat".

• Target Page Name: Select your custom object (e.g., Project or Project__c).

  • Why: This is critical. It tells the component it is operating in the context of a Project record, enabling the use of the {!RecordId} variable.

2

Add Component to Canvas

• From the Component Library (left sidebar), search for Chat.

• Drag and drop the Chat component onto the canvas.

3

Connect to the Data Source

We need to query the custom object where messages will be stored.

• Data Source: Query.

• Object: Project_Update__c (Custom Object).

• Filter: Project__c equals {!RecordId}.

  • Why: Filters the list to only show updates related to the current Project record.

• Order By: CreatedDate ASC.

4

Map Data

Unlike standard objects, custom objects require explicit mapping to ensure the user's name and picture appear correctly.

• Content: Message_Body__c (Rich Text Area field)

• Date: CreatedDate

• Author Name: CreatedBy.Name

• Author Avatar: CreatedBy.SmallPhotoUrl

  • Why: This dynamically pulls the user who posted the update's Salesforce profile picture

5

Configure the Publisher

Set up the input to allow for rich formatting, useful for project status reports.

• Mode: Rich

• Placeholder: "Share a project update..."

• Button Label: "Post Update"

• Blocked Words: (Optional) Add sensitive internal project codenames if necessary.

6

Add the "Save" Logic (Interaction)

Configure the component to create a new Project_Update__c record when the button is clicked.

• Interaction Trigger: Publish a new message

• Action: Create Record

• Select: Create Enter Record Data Manually.

• Target Object: Project_Update__c

• Field Mappings:

  1. Project__c: Map to {!RecordId}

     • Context: Links the update to the specific Project.

  2. Message_Body__c: Map to {!event.detail.value}

     • Context: Saves the typed content.

  3. Type__c: Team Chat (Static Value)

     • Context: If your object supports multiple update types, you can hardcode a specific type for this chat window.

7

Real-Time Updates (Optional)

To make messages appear instantly for all team members:

1. Channel Name: Chat_Notification__e (Assuming you created a Platform Event).

2. Key Field Name: RecordId__c.

---

Key Considerations

• Data Model Planning: For Query mode, ensure your Salesforce objects have the necessary fields to store message content, timestamps, and author information, along with lookup relationships to parent records.

• Resource Identification: The Current Resource ID determines message positioning. For customer-facing implementations, consider how you'll identify external participants versus internal users.

• Character Limits: Set appropriate maximum lengths based on your target object's field limits to prevent data truncation.

• Blocked Words: Review and update your blocked words list regularly to maintain communication standards without being overly restrictive.

• Performance: For conversations with extensive history, use query filters to limit the number of messages loaded initially, or consider pagination strategies for very active threads.

---

In Summary

The Avonni Chat component transforms your Lightning Pages into collaborative communication hubs. Whether you're building internal team tools or customer-facing interfaces, the combination of flexible data sources, rich publishing options, and actionable interactions lets you create sophisticated messaging experiences that integrate directly with your Salesforce data model—all without writing code