Customizing the Badge Color using a formula

Overview

In this tutorial, we aim to customize the badge colors within the Avonni Data Table 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.

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.

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:

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.

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

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.

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.

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.

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

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.

• For type, select Badge.

• Regarding the Type Attribute section

  • Check the field name toggle

  • Select the formula field created in step 1.

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.