Add Status Indicators

Overview

This tutorial explains how to display a colored status dot inside an Avonni Data Table column, so that each row’s status (for example, “Open”, “In Progress”, “Closed”) appears as a compact, color-coded circle rather than plain text.

---

Guided Steps

1

Create the status color formula field

Create a text formula field on the object you’re querying in the Data Table. This formula will dynamically return the color code for the status dot. Here’s an example that uses the StageName field and assigns a hex color value to each stage.

IF( ISPICKVAL(StageName,‘Perception Analysis’), ‘#FE9339’,
IF( ISPICKVAL(StageName,‘Value Proposition’), ‘#FCC003’,
IF( ISPICKVAL(StageName,‘Id. Decision Makers’), ‘#FF5D2D’,
IF( ISPICKVAL(StageName,‘Proposal/Price Quote’), ‘#04E1CB’,
IF( ISPICKVAL(StageName,‘Qualification’), ‘#FF906E’,
IF( ISPICKVAL(StageName,‘Negotiation/Review’), ‘#41B658’,
IF( ISPICKVAL(StageName,‘Prospecting’), ‘#EA001E’, ‘#04E1CB’)))))))

2

Add the Data Table and include the formula column

Add the Data Table component, configure it with the Query data source, and include the formula field column in the table.

3

Add a Badge column for the status dot

Create a new column for the colored dot. This column will be linked to the Stage field and set its Type to Badge

4

Configure the Badge to use the formula field

• Turn on the custom label option, but leave it empty so the Data Table column has no header label.

• Select Badge as the type.

• For the Badge attribute, enable the Field Name option and select the formula field you created in step 1. This will dynamically assign a color based on the formula’s result

You’ve now added a color status dot to your Data Table, making it easier to visually highlight key information at a glance.