# Live Call Board

{% @arcade/embed flowId="d61Zta3pZ70V6hRyafhV" url="<https://app.arcade.software/share/d61Zta3pZ70V6hRyafhV>" %}

{% hint style="danger" %}

#### **Not a calling solution**

This tutorial uses a "live call" scenario to demonstrate how **platform events and screen flows can make Dynamic Components refresh in real time for all** users. The same pattern fits any live-status use case (field techs, agents, lead claiming, etc.).
{% endhint %}

{% hint style="warning" %}

#### **Before you start**

This use case has some configuration prerequisites. Make sure you review the [**Set up**](#f1104ea9-b30d-4396-b858-55c41b4cffd1) section of this page before building!
{% endhint %}

{% hint style="success" %}

#### **Learning focus points**

* Creating components that refresh seamlessly using **platform events**
* Combining dynamic components and screen flows&#x20;
  {% endhint %}

## Objective <a href="#id-5f56e1d2-78d8-4f63-af33-0db54f71471a" id="id-5f56e1d2-78d8-4f63-af33-0db54f71471a"></a>

Give sales teams **real-time visibility** into who is calling which Lead, so everyone stays aligned.

Sales reps need to instantly see if a Lead is already being contacted. This helps avoid:

* Multiple reps calling the same customer
* Confusing or frustrating customer experiences
* Wasted time and duplicated efforts

***

## Solution <a href="#a25298b6-ce1d-426e-8db8-aa41f1cf4fca" id="a25298b6-ce1d-426e-8db8-aa41f1cf4fca"></a>

This solution uses **Avonni Dynamic Components** combined with **Salesforce automation**, all built with **no code**.

Sales reps get a live, interactive list of Leads where they can:

* See which Leads are currently “on a call”
* Start a call directly from the list
* Automatically free the Lead when the call ends

The view updates instantly for everyone, ensuring the team always has the latest information.

### How It Works (User Perspective) <a href="#c75990c5-3e25-41fc-89d6-31e1dcfed9ca" id="c75990c5-3e25-41fc-89d6-31e1dcfed9ca"></a>

1. A sales rep opens the Lead list.
2. They immediately see if a Lead is **available** or **already on a call**.
3. When they click **Call**:
   * The Lead is marked as “On Call”
   * Everyone else sees this update instantly
4. When the rep finishes the call:
   * The Lead becomes available again
   * The list refreshes automatically for the whole team

No page refresh or manual updates.

### What we'll create <a href="#id-228f54ff-be7f-4ab7-a30a-3582c52d5dfa" id="id-228f54ff-be7f-4ab7-a30a-3582c52d5dfa"></a>

* 1 **Avonni Dynamic Component** to allow users to view Leads and take action
* 1 **Screen Flow** to handle automation
* 1 **platform event** object that will allow for dynamic refreshing of the component, ensuring users always have the most up to date view
* 2 **custom Lead field** to tag which leads that are currently on call

***

## Set up <a href="#f1104ea9-b30d-4396-b858-55c41b4cffd1" id="f1104ea9-b30d-4396-b858-55c41b4cffd1"></a>

### **Prerequisites**

**Create Lead custom fields**

* Create a boolean `IsActiveCall__c`
* Create a text formula field `CallAvailabitily_F__c`
  1. Display colour HTML codes based on the `IsActiveCall__c` boolean
     1. Example : `IF (IsActiveCall__c = True, '#FF5D2D', '#41B658')`

#### **Platform Event Object**

* Create a platform event in the Salesforce setup, named `LeadCall__e`
  * Create a custom text field to store the LeadId `LeadId__c`

### **Set up the Screen Flow**

{% @arcade/embed flowId="9m7DlW3uTcPJjUeI2pxN" url="<https://app.arcade.software/share/9m7DlW3uTcPJjUeI2pxN>" %}

{% stepper %}
{% step %}

#### **In Flow Builder, create a Screen Flow**

* Create a screen flow `AV_Call_Lead`. We'll use this name to refer to the flow in the Dynamic component going forward.

{% hint style="info" %}
Leverage more Avonni Flow components to boost user experience for this use case.

Our demo uses the following Flow components :&#x20;

* **Alert** for call headers
* **Record details** to display lead fields
* **Timeline** to view recent activities&#x20;

Review our [Going Further section](#going-further) for more.
{% endhint %}
{% endstep %}

{% step %}

#### Create variables

* Start with a `recordId` text input variable
  {% endstep %}

{% step %}

#### Update the Lead record&#x20;

* Update the current Lead with `IsActiveCall__c` = true to tag the Lead record.&#x20;
* This will allow to disable the Call button in the dynamic component when a user calls the lead
  * This also drives the green/red indicator of lead availabity !
    {% endstep %}

{% step %}

#### Create a Platform Event

* Use a create record element to create a `LeadCall__e` platform event record that will trigger the dynamic component refresh so other users get the most up to date view
  * Set the `LeadId__c` field to `recordId`
    {% endstep %}

{% step %}

#### Build a screen

* Display a screen to the user, simulating that they are currently on call and letting them finish the call to make the lead available again

{% hint style="info" %}
We only specify the configuration of mandatory components to make the use case work.

Review the additional components in the [#going-further](#going-further "mention")section.

Add more screens and features to your flow based on your user guidance needs.
{% endhint %}
{% endstep %}

{% step %}

#### Update the Lead record

* Update the current Lead with `IsActiveCall__c` = false.&#x20;
* This will allow to enable the Call button in the dynamic component when the call is done.
  {% endstep %}

{% step %}

#### Create a second Platform Event

* Create a second platform to refresh the dynamic component and make the lead available again to all users.
  {% endstep %}

{% step %}

#### Save and review

{% endstep %}
{% endstepper %}

***

### Configure the Dynamic Component

{% @arcade/embed flowId="EcqnZvGPHorMfcWDwvoc" url="<https://app.arcade.software/share/EcqnZvGPHorMfcWDwvoc>" %}

{% stepper %}
{% step %}

#### **Navigate to the Avonni Dynamic Component Builder**

{% endstep %}

{% step %}

#### Add a Card Container

* Use a **Card container** for a modern look
  {% endstep %}

{% step %}

#### Set up a Data Table

* Set a **Data table** component with a query on Leads, displaying fields

{% hint style="warning" %}

#### **Important**

Set up advanced Query setting Refresh Channel Emp = `LeadCall__e` (the platform event). This will ensure the component listens to this event and trigger a query refresh every time one is created.
{% endhint %}

* Create the `Call` **row level action button**

{% hint style="warning" %}

#### **Important**

Disable the button dynamically by setting it's Disabled property to the `IsActiveCall__c` field value.&#x20;
{% endhint %}

* Create the Call availability column to display colour badges to illustrate at a glance if a lead is available
  * Set up the `CallAvailabitily_F__c` field as a Badge and set it's colour background property as the field name

{% hint style="info" %}
This is the basic set up for this feature. Leverage more Avonni components to boost your user experience by reviewing our [Going further section](#going-further).
{% endhint %}
{% endstep %}

{% step %}

#### Create an Interaction to launch the Flow

* Create an **Open Flow Panel Interaction** for the `Call` action launching the `AV_Call_Lead` screen flow.&#x20;
* This will open the screen flow on the right panel when users click on the button.

{% hint style="warning" %}

#### **Important**

Populate the Flow's recordId input variable with the row action SObject Id (the Lead Id of the row) to pass data from the component
{% endhint %}
{% endstep %}

{% step %}

#### Save and review&#x20;

{% endstep %}
{% endstepper %}

***

## Going further

Review the documentation for the components used in this use case.

### Flow components&#x20;

{% embed url="<https://docs.avonnicomponents.com/flow/flow-components/alert>" %}

{% embed url="<https://docs.avonnicomponents.com/flow/flow-components/record-detail>" %}

{% embed url="<https://docs.avonnicomponents.com/flow/flow-components/timeline>" %}

### Dynamic Component Features

{% embed url="<https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table/apply-badge-color-coding>" %}


---

# 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/projects/use-cases/live-call-board.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.