# Customizing the Badge Color using a formula

## Overview

In this tutorial, we aim to customize the badge colors within the [Avonni Data Table](/flow/flow-components/data-table.md) according to the **`StageName`** field of opportunity. We will modify the visual representation of the **`StageName`** values to enhance data visualization and user experience within the table.

<figure><img src="/files/4Q0sKHgdX4KPBDk5QhOY" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can customize this guide to meet your requirements. Follow the same steps, and when needed, replace the field name we used with the one you wish to show as a badge.
{% endhint %}

## Steps

These steps show you how to add colored badges to your Salesforce data table. First, you'll create a formula that assigns different colors based on the stage of an opportunity (like "Closed Won" or "Closed Lost"). Then, you'll add a data table to your Salesforce screen and configure it to display your opportunity data. Finally, you'll select the badge option for the column containing your formula, so those colored badges appear in your table.

### **1. Create a Formula Field**

* Navigate to the Object Manager in Salesforce Setup.
* Find and select the object where you want to create the formula, e.g., Opportunity.
* Click on “**`Fields & Relationships`**” and then “**`New Field`**”.
* Choose “**`Formula`**” as the data type and proceed.

Enter the following formula:

```markup
IF(ISPICKVAL(StageName,'Closed Won'), 'success',
   IF(ISPICKVAL(StageName,'Closed Lost'), 'error', 'base'))
```

**Explanation of the Formula:**

This formula checks the "StageName" field. If it's "Closed Won," the formula returns "success" (green badge). If it's "Closed Lost," it returns "error" (red badge). It returns "base" (gray badge) for all other stages.

{% hint style="warning" %}
The Lightning Design System predefines badge colors and cannot be customized. The available options are:

* **base:** Gray (default)
* **brand:** Blue
* **inverse:** White
* **alt-inverse:** Transparent with a dark border
* **success:** Green
* **info:** Dark gray
* **error:** Red
* **warning:** Yellow
* **offline:** Black
  {% endhint %}

### **2. Add the Avonni Data Table Component**

* Open the screen element where you want to add the Avonni Data Table component.

### **3. Customize the Data Table**

* When the Avonni Data Table component is selected, open the component builder.
* This will allow you to customize the Data Table visually according to your requirements.

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

### **4. Configure the Data Source**

* In the Component Builder, go to the “Data Source” section.
* Configure the data source to point to the object that contains your formula field, e.g., Opportunity.

{% hint style="info" %}
If using the Variable Data Source, set up the 'Get Records' element first. This step is crucial to guarantee that Salesforce retrieves all the necessary information from your object.
{% endhint %}

* Ensure the data source is set up correctly to pull the necessary records.

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

### **5. Add the Badge column**

* Access the "Columns" section, then click and drag your desired columns into the Avonni Data Table area from the panel on the left. Make sure to include the column that will display the badge.
* Click on the column where the badge needs to be displayed.

<figure><img src="/files/6zXBJOoc6rh2cwR9J4QH" alt=""><figcaption></figcaption></figure>

* For type, select **`Badge`**.
* Regarding the Type Attribute section
  * Check the field name toggle
  * Select the formula field created in [step 1](#1.-create-a-formula-field).

That's it! Your data table will now display colored badges based on the stage of each opportunity.

## Wrapping Up

Now, your Avonni Data Table should display the **`StageName`** status with a colored badge based on the condition specified in the formula field. ‘Closed Won’ stages will show a green badge, ‘Closed Lost’ stages will show a red badge, and all other stages will show a neutral badge. This customization allows for a more visually intuitive representation of your data.


---

# 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/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.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.