Account Highlight Panel

Add on to the highlight panel using Dynamic Components and charts.

Before you start

This use case has some configuration prerequisites. Make sure you review the Set up section of this page before building!

Learning focus points

Combining multiple Dynamic Components into a single panel
Building a toggleable two-view layout (standard + executive)

This guide shows you how to build a custom Account header that replaces Salesforce's default highlight panel. The finished component displays the account logo, key fields in a compact grid, color-coded tags for industry and SLA, live metrics for revenue and open cases, and a second "executive" view that toggles to reveal a pipeline chart and revenue gauge — all configured without code.

Set up

This build leverages columns to organize components. Drag columns and containers as needed.

Drag a Profile Card component onto the canvas.
Set the Title to the Account Name field.
Set the Image URL to a custom field holding the Account logo URL.

Create two view containers

Add two containers inside the panel.
Reserve the first for the standard view (layout, tags, and metrics).
Reserve the second for the executive view (charts).

Configure the Record Detail component

Drag a Record Detail component into the first container.
Set Object Name to Account.
Set Record Id to Component > Record Id.
Set Layout to Compact and Density to Comfy.
Set Number of Columns to 6 for each size.
Enable Read Only.

Build the Opportunity metric

Drag a Metrics component onto the canvas, using columns to organize the layout.
Set the label to "Revenue YTD (Year To Date)".
Create the primary Opportunity query:
- Object API Name = Opportunity
- Field = Amount
- Aggregate function = SUM
- Filters: Account ID = Component > Record Id, Close Date = This Year
Create the secondary Opportunity query:
- Object API Name = Opportunity
- Field = Amount
- Aggregate function = SUM
- Filters: Account ID = Component > Record Id, Close Date = Last Year
Customize the icon:
- Icon Name = standard:opportunity
- Icon Size = X-Small
Open Primary Metric options to compare the two values visually:
- Enable Show Trend Color.
- Set Trend Breakpoint Value to Metric > Secondary Value.
- Set Trend Icon to Dynamic.

Build the Case metric

Drag a Metrics component onto the canvas.
Set the label to "Open Cases".
Create the primary Case query:
- Object API Name = Case
- Field = Id
- Aggregate function = COUNT
- Filters: Account ID = Component > Record Id, IsClosed = False
Create the secondary Case query:
- Object API Name = Case
- Field = Id
- Aggregate function = COUNT
- Filters: Account ID = Component > Record Id, IsClosed = True
Customize the icon:
- Icon Name = standard:opportunity
- Icon Size = X-Small
Open Secondary Metric options to compare the two values visually:
- Enable Show Trend Color.
- Set Trend Breakpoint Value to Metric > Primary Value.
- Set Trend Icon to Caret.

Configure the Industry Badge

Create a text formula resource named F_Industry that maps each Account Industry picklist value to a hex color. This example uses the standard Account Industries.

CASE({!$Component.Record.Industry},
"Agriculture", "#4CAF50",
"Apparel", "#E91E63",
"Banking", "#1565C0",
"Biotechnology", "#00BCD4",
"Chemicals", "#FF9800",
"Communications", "#9C27B0",
"Construction", "#795548",
"Consulting", "#3F51B5",
"Education", "#F44336",
"Electronics", "#009688",
"Energy", "#FFC107",
"Engineering", "#607D8B",
"Entertainment", "#FF5722",
"Environmental", "#8BC34A",
"Finance", "#2196F3",
"Food & Beverage", "#FF7043",
"Government", "#546E7A",
"Healthcare", "#00ACC1",
"Hospitality", "#AB47BC",
"Insurance", "#26A69A",
"Machinery", "#78909C",
"Manufacturing", "#F57C00",
"Media", "#EC407A",
"Not For Profit", "#66BB6A",
"Recreation", "#29B6F6",
"Retail", "#EF5350",
"Shipping", "#5C6BC0",
"Technology", "#00E5FF",
"Telecommunications", "#7E57C2",
"Transportation", "#FF8A65",
"Utilities", "#42A5F5",
"Other", "#90A4AE",
"#CCCCCC"
)

Drag a Badge component onto the canvas.
Set the Label to the Component > Record > Industry relative value.
In the Style section:
- Set the Base Chip Background to the F_Industry formula.
- Set the Text Color to white (#ffffff).

Configure the SLA Badge

Create a text formula resource named F_SLAColour that maps each SLA tier to a color.

CASE ( {!$Component.Record.SLA__c} ,
"Gold" , "#FFD700",
"Silver", "#C0C0C0",
"Bronze" , "#CD7F32",
"Platinium" ,"#E5E4E2","")

Drag a Badge component onto the canvas.
Set the Label to the Component > Record > SLA relative value.
In the Style section, set the Base Chip Background to the F_SLAColour formula.

Display the Account Rating as Stars

Create a text formula resource named F_Rating that maps each Rating value to a numeric score.

CASE ( {!$Component.Record.Rating} ,
"Hot", 5,
"Cold" , 0,
"Warm",3 , 2 )

Drag a Rating component onto the canvas.
Set the Label to "Rating".
Set the Value to the F_Rating formula.
Set the Icon Name to utility:favorite.
Set the Variant to Label Inline.

Add the Revenue Target Gauge

Drag a Gauge Chart component into the second container.
Create a query on the Opportunity object:
- AccountId = Component > Record Id, to scope opportunities to the current record.
- IsClosed = false, to retrieve only open opportunities.
In the Style section, set both Width and Height to 200px.

Build the Pipeline Chart

Drag a Chart component into the second container.
Reuse the Opportunity query from the Gauge chart.
Set Data Mappings:
- Add a left and right axis: Sum the Amount field.
- Add the Stage field as Bars and Bar Segments.
Customize the chart:
- Set content to Stacked Pyramid.
- Enable Show Values.
- Enable Show Legend and Show Legend Header.

Add a Toggle to Switch Views

Place a Toggle component above both containers.
Add a visibility rule to the standard view container so its content displays when the toggle = false.
Add a visibility rule to the executive view container so its content displays when the toggle = true.

Going further

Add Badge components mapped to Industry, SLA__c, and Rating fields with conditional colors to create the color-coded tag row.
Use Component Visibility conditions on the executive view button to show it only to users with the Executive_Dashboard permission set.
Add a Quick Action interaction to the Profile Card to launch "New Opportunity" or "New Case" flows directly from the header.

Button Chart ColumnsspaceRating Toggle

Last updated 3 months ago

Was this helpful?