How to color-code badges

Overview

In this tutorial, we'll customize the appearance of the StageName field in our Avonni Data Table. We'll change the background colors of the StageName values to make them visually distinct, improving readability and data visualization.

Guided tutorial

. 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:

Copy

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.

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 that those colored badges appear in your table.

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 formula, similar to this one (adapt the formula for your specific needs)

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

Add the Avonni Data Table Component

Drag the Avonni Data Table into your Dynamic Component layout. Select it, then configure its Data Source using an Avonni Query to fetch the necessary Salesforce records and fields. After setting up the query, go to the Columns section in the Properties Panel to add columns, map them to the correct Source Fields from your query, and adjust their settings.

Add the Badge column

Click on the "Add Columns" button, then select the field you want to display on that column..
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

Last updated 3 months ago

Was this helpful?