Account Highlight Panel

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.

1

Add the Profile Card

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

2

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

3

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.

4

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.

5

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.

6

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

7

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.

8

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.

9

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.

10

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.

11

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.

ButtonChartColumnsspaceRatingToggle