# Real-Time Data

## Overview

By default, Salesforce data in your browser remains static until you manually refresh the page. **Platform Events** transform your Avonni components ([Chat](/dynamic-components/components/chat.md), [Kanban](/dynamic-components/components/kanban.md), [List](/dynamic-components/components/list.md), [Data Table](/dynamic-components/components/data-table.md), etc.) into "live" interfaces that update instantly whenever changes occur in your Salesforce org.

This eliminates data lag and ensures your team is always working with the most current information without interruption.

***

## The Architecture of Real-Time Updates

To enable this functionality, you need to configure three specific elements:

<table><thead><tr><th width="220.35546875">Requirement</th><th width="170.12890625">Role</th><th>Description</th></tr></thead><tbody><tr><td><ol><li><strong>Platform Event</strong></li></ol></td><td>The Signal</td><td>A custom "broadcast" channel in Salesforce used to announce data changes.</td></tr><tr><td><ol start="2"><li><strong>Trigger Flow</strong></li></ol></td><td>The Broadcaster</td><td>A Record-Triggered Flow that sends the signal the moment a record is created or updated.</td></tr><tr><td><ol start="3"><li><strong>Component Config</strong></li></ol></td><td>The Listener</td><td>The settings within your Avonni component that tell it to "listen" for the signal and refresh automatically.</td></tr></tbody></table>

***

## Configuration Walkthrough

The following steps walk through one specific example to illustrate how the three required elements work together. The scenario — refreshing a Case Chat when a new comment is posted — was chosen because it clearly demonstrates the logic.

{% hint style="info" %}

#### Adapting the Pattern to Your Own Use Case

**Your actual setup will use different objects, fields, and component types depending on your use case.** Once you understand the pattern, you can apply it to any record type and any Avonni component.
{% endhint %}

**The example scenario:** A support team uses an Avonni Chat component on a Case record page. When a new CaseComment is posted, they want the Chat to refresh automatically for everyone viewing that Case — without anyone having to click refresh.

{% stepper %}
{% step %}

#### Create a Platform Event

***What you're doing**:* Creating a custom "notification channel" in Salesforce. Think of it like a radio frequency: once it exists, anything in your org can broadcast on it, and anything tuned to it can receive the signal.

***Why this step exists**:* Salesforce doesn't have a built-in way to say "something changed, go refresh that component." Platform Events are the mechanism that makes this possible. You need to create one before anything else can reference it.

* Go to **Setup** > **Integrations** > **Platform Events**.
* Click **New Platform Event**.
* **Label:** Enter `Chat Notification` (or `Record Change Event`).
* **Plural Label:** `Chat Notifications`.
* **Publish Behavior:** Select **Publish Immediately**.
* Click **Save**.

<figure><img src="/files/4655cYnJApUKl5oiZ78o" alt=""><figcaption></figcaption></figure>

**Add a Payload Field**

***What you're doing**:* Adding a field to your Platform Event that will carry the ID of the record that changed.

***Why this step exists**:* The event signal alone just says "something happened." Without a payload, the component has no way to know *which* record changed. By passing a Record ID, the component can compare it to the record currently on screen and refresh only when there's a match — avoiding unnecessary refreshes for unrelated records.

* In the **Custom Fields & Relationships** section of your new Platform Event, click **New**.
* Select **Text** as the data type.
* **Field Label:** `RecordId`.
* **Length:** `18`.
* **Field Name:** `RecordId` (API Name will be `RecordId__c`).
* Click **Save**.

<figure><img src="/files/Yy8VEGogbafJy0UPW2KS" alt=""><figcaption></figcaption></figure>

> **Note:** You can add more fields if you want to pass specific data, but the Record ID is usually sufficient for refreshing components.
> {% endstep %}

{% step %}

#### Create a Trigger Flow

***What you're doing**:* Building the automation that fires the Platform Event the moment a record is created or updated.

***Why this step exists**:* The Platform Event is just a channel — it doesn't broadcast anything on its own. This Flow is what actually sends the signal. Every time the triggering condition is met (e.g., a record is created or updated), the Flow publishes an event with the relevant Record ID in the payload.

<mark style="background-color:orange;">**Adapt this to your use case**</mark>**:** The object you trigger on and the ID you pass will depend entirely on what you're refreshing and where you're refreshing it. In this example, we trigger on `CaseComment` and pass the `ParentId` (the Case ID) because the Chat lives on the Case page — not the Comment page. Always ask: *"What page is my component on, and what is the ID of the record on that page?"* That's the ID you need to pass.

* Go to **Setup** > **Process Automation** > **Flows**.
* Click **New Flow** and select **Record-Triggered Flow**.
* **Configure Start:**
  * **Object:** `CaseComment` (or the object your component is displaying).
  * **Trigger:** A record is **Created** (or Updated).
  * **Optimize for:** Actions and Related Records.
* **Add Element: Create Records**.
  * **Label:** `Publish Platform Event`.
  * **Object:** Select the Platform Event you created in Step 1 (e.g., `Chat Notification`).
  * **Set Field Values:**
    * `RecordId__c` ← `{!$Record.ParentId}`
  * *Why ParentId?* Since the Chat is displayed on the **Case** page, we need to notify the Case of the event. When a *Comment* is created, we grab its *Parent's ID* and broadcast that.
* **Save** and **Activate** the flow.

<figure><img src="/files/VdspUNirX2BTaFXYXG5t" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Connect Your Component

***What you're doing**:* Telling the component which Platform Event channel to listen to, and how to decide whether an incoming signal is relevant to the current page.

***Why this step exists**:* This is where the component "tunes in" to the broadcast. The Channel Name tells it which event to listen for. The Key Field Name tells it which field in the payload contains the Record ID. When an event fires, the component compares that ID to the record currently on screen — if they match, it refreshes. If they don't, it ignores the signal.

* Open your component in the **Avonni Component Builder**.
* Ensure the **Data Source** is set to **Query**.
* Open **Advanced Options** > **Query Refresh EMP**.
* Fill in the settings:
  * **Channel Name:** The API name of your event (e.g., `Chat_Notification__e`).
  * **Key Field Name:** The API name of the payload field (e.g., `RecordId__c`).
  * **Key Field Value (Optional):** Leave blank. When blank, the component automatically compares the incoming Record ID against the ID of the record currently displayed on the page. If they match, it refreshes. You only need to fill this in if you want to hardcode a specific ID to watch for.

**Result:** Your component will now refresh its data automatically whenever the flow from Step 2 runs.

<figure><img src="/files/eNCJUlLtqhI1R4W8rqvq" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## Testing Your Configuration

To verify that real-time updates are working:

1. Open your Salesforce Record Page in **two separate browser tabs** (or use an Incognito window for the second one).
2. In Tab 1, post a new message (or update a record).
3. Watch Tab 2. The component should update instantly to show the change without you clicking refresh.

***

## Troubleshooting

If the component does not update:

* **Check Permissions:** Ensure the user has permission to read/create the Platform Event object.
* **Check API Names:** Ensure `Channel Name` includes the `__e` suffix and `Key Field Name` includes `__c`.
* **Check Flow Debug:** Use the Flow Debugger to ensure the Platform Event is actually being published when you create a record.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/real-time-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
