> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/projects/use-cases/account-highlight-panel.md).

# Account Highlight Panel

{% hint style="danger" %}

#### **Before you start**

This use case has some configuration prerequisites. Make sure you review the [**Set up**](#f1104ea9-b30d-4396-b858-55c41b4cffd1) section of this page before building!
{% endhint %}

{% hint style="success" %}

#### Learning focus points

* Combining multiple Dynamic Components into a single panel
* Building a toggleable two-view layout (standard + executive)
  {% endhint %}

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.

{% @arcade/embed flowId="1PsABdniWc9w6beP9Okn" url="<https://app.arcade.software/share/1PsABdniWc9w6beP9Okn>" %}

***

## Set up

{% @arcade/embed flowId="fNXTrzmLX6qLnF4AnaYs" url="<https://app.arcade.software/share/fNXTrzmLX6qLnF4AnaYs>" %}

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

{% stepper %}
{% step %}

#### 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.
  {% endstep %}

{% step %}

#### 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).
  {% endstep %}

{% step %}

#### 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.
  {% endstep %}

{% step %}

#### 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`.
    {% endstep %}

{% step %}

#### 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.
    {% endstep %}

{% step %}

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

```java
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).
    {% endstep %}

{% step %}

#### Configure the SLA Badge

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

```java
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.
  {% endstep %}

{% step %}

#### Display the Account Rating as Stars

* Create a text formula resource named F\_Rating that maps each Rating value to a numeric score.

```java
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.
  {% endstep %}

{% step %}

#### 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`.
  {% endstep %}

{% step %}

#### 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.
    {% endstep %}

{% step %}

#### 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.
  {% endstep %}
  {% endstepper %}

***

## Going further

* Add [**Badge** components](https://docs.avonnicomponents.com/dynamic-components/components/badge) mapped to `Industry`, `SLA__c`, and `Rating` fields with conditional colors to create the color-coded tag row.
* Use [**Component Visibility**](https://docs.avonnicomponents.com/dynamic-components/core-concepts/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](https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/other/open-quick-action) to the Profile Card to launch "New Opportunity" or "New Case" flows directly from the header.

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/A2Ve6KlxDcSO42vXRl5x" %}
[Button](/dynamic-components/components/button.md)
{% endcontent-ref %}

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/V7899pFmnRFXOXh6IZEh" %}
[Chart](/dynamic-components/components/chart.md)
{% endcontent-ref %}

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/rcwTLxwbQmHMB1ag72sA" %}
[Columns](/dynamic-components/components/columns.md)
{% endcontent-ref %}

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/UfX8lhMqduOyJfZH8OcF" %}
[Broken mention](broken://spaces/ODPvvv7Cx9Z9RECLn3oV/pages/UfX8lhMqduOyJfZH8OcF)
{% endcontent-ref %}

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/GPNlgqYwkyBZto4XscuB" %}
[Rating](/dynamic-components/components/rating.md)
{% endcontent-ref %}

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/b9DBZzibpzXNHyonCFCK" %}
[Toggle](/dynamic-components/components/toggle.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/projects/use-cases/account-highlight-panel.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.