Components for Experience Cloud Get It on the AppExchange

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 an 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 for 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

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:

  • The formula checks the value of the StageName picklist.

  • If the StageName is ‘Closed Won’, it returns 'success'.

  • If the StageName is ‘Closed Lost’, it returns 'error'.

  • For any other StageName values, it returns 'base'.

The color of the badges is determined by the value of the 'variant badge,' which adheres to the Lightning Design System standards. The available color options for the variant values include: base (default grey), brand (blue), inverse (white), alt-inverse (transparent with dark border), success (green), info (dark gray), error (red), warning (yellow), and offline (black).

2. Drag the Avonni Data Table Component:

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

3. Open the Component Builder:

  • With the Avonni Data Table component selected, open the component builder.

  • This will allow you to customize the Data Table according to your requirements visually.

4. Configure the Data Source:

  • In the Component Builder, go to the “Data” 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 Fields to the Data Table:

  • 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 field that needs to be displayed as a badge.

  • For type, select Badge.

  • Regarding the Type Attribute section

    • Check the field name toggle

    • Select the formula field created in step 1.

  • And you're done.

Conclusion:

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.

Last updated