# Build a Custom Record Header & Highlights Panel
{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}
## Overview
Go beyond the standard Salesforce header! This tutorial guides you through using Avonni Dynamic Components to create a **fully customized header** for your record pages. Learn how to visually arrange components to **highlight the most critical record information** (key fields, status indicators, important metrics), add relevant action buttons, and achieve a clean, personalized look tailored precisely to your users' needs – all without code.
## Final Result
Below is an example of the custom record page header you will build in this tutorial.
## Components Used
To build the custom record page header in this tutorial, we will utilize the following Avonni Dynamic Components:
* [Media Object](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/media-object)
* [Columns](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/columns)
* [Icon](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/icon)
* [Text](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/text)
* [Button Menu](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/button-menu)
* [Chip Container](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/chip-container) (used here to display status or keyword tags)
## Guided Steps
{% stepper %}
{% step %}
### Set Target Page Name
To ensure your Dynamic Component displays the correct, context-specific information, especially when placed on a Salesforce record page, you must set its [**Target Page Object**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/getting-started/understanding-the-essentials/target-page-object). This fundamental setting tells your component which primary Salesforce object it's designed to work with.
When your component is on a specific record page (like an Account page), setting the Target Object API Name (e.g., to "Account") allows your component to:
1. **Automatically know the current record's ID:** This ID is accessible via the global variable `$Component.record.Id` or often by selecting `@recordId` from the resource selector.
2. **Access all fields of the current record:** You can use `$Component.record.FieldName` (e.g., `$Component.record.Name`) to display data.
3. **Filter related data:** Crucially for this tutorial, we'll use this current Account ID to fetch and display *only* the Contacts related to it.
{% endstep %}
{% step %}
### Add the Media Object Component
Let's start creating our custom header by adding an Avonni **Media Object**. This component is perfect for arranging an image or icon alongside text and actions in a structured way. Drag it from the Component Library (left panel) onto your canvas.
The Media Object provides three main areas (slots) that we'll use: one on the left for an icon (to characterize the record page), a center slot for text information (such as the record name), and a **right** slot where we can place action buttons, such as a Button Menu. We'll add components to these slots next.
{% endstep %}
{% step %}
### Add the Columns Component to the Media Object Left Slot
To create a side-by-side layout for an icon and text within the Media Object's left area, drag an Avonni **Columns** component from the Component Library *into the left slot*. Once added, select this inner Columns component and configure it in the Properties Panel to have **two column items**. We'll add the Icon and Text components to these columns next.
{% endstep %}
{% step %}
### Place an Icon in the Left Column
In the first (left) column of your newly created columns, drag an Avonni **Icon** component from the Component Library. Select this Icon, then go to its **Properties Panel** and set the **Icon Name**. To provide clear visual context, it's recommended to use an SLDS icon that matches the record type (e.g., `standard:account` for Accounts).
{% endstep %}
{% step %}
### Add a Text Component
In the second (right) of your inner columns, drag one or more **Text** components from the Component Library. For each Text component, select it and go to the **Properties Panel**. Bind the **Value** property to a field from the current record by using the resource selector and navigating to `Component > record > FieldName` (e.g., `$Component.Record.Name`). This is possible because the **Target Page Name** we set up in step 1 provides the `$Component.record` context. You can style this text for emphasis as needed.
{% endstep %}
{% step %}
### Add the Button Menu component
In the right slot of the Media Object, drag an Avonni **Button Menu** component from the Component Library. This will consolidate our action buttons. Select the Button Menu, and in its **Properties Panel**, configure the **Items**. Add menu options like `Label: Edit`, `Value: edit` and `Label: New Task`, `Value: new_task`. Ensure each `Value` is unique. We'll add specific interactions to these items.
*Tip: The Button Menu can be styled (e.g., as an icon-only button), and individual menu items can be conditionally hidden using variables.*
{% endstep %}
{% step %}
### Add Interactions to the Button Menu
Now that you’ve added menu items to your Button Menu component, let’s make them do something! Click on the [**Interactions**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) tab for the Button Menu. Here, you can set up what happens when a user selects each menu item. For example, you can create a menu option that navigates to another page, [opens a flow dialog](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions/flow-control/open-flow-dialog), or [launches an automated process](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions/ai-and-automation/execute-flow). Choose the action you want for each menu item—there are many possibilities to fit your needs..
{% endstep %}
{% step %}
### Add the column component
Next, let’s add a Columns component below the Media Object. This will allow you to organize key record fields in a highlights panel layout. Drag the Columns component onto your canvas. You can display up to 12 columns, depending on the amount of information you want to display. In the Properties Panel, adjust settings such as column alignment and spacing to achieve the desired look and arrangement.
{% endstep %}
{% step %}
### Add a Container
Inside each column, drag in a Container component and set it to use the “Card” variant. In the Properties Panel, adjust the padding settings so that all four corners have small padding. This will give your field sections a clean, card-like appearance with consistent spacing.
{% endstep %}
{% step %}
### Add field information
Now let’s add the key record fields you want to highlight in your panel. Inside each Container component, click the Components icon in the left sidebar and go to the Fields tab. Drag your desired field(s) into the container. Since you set up the Target Page Name in step 1, the correct fields will be available to select. Ensure that each field is set to **Inline** mode for a compact and streamlined display.
{% endstep %}
{% step %}
### Repeat for Additional Columns
Follow the same steps to add different field information to other containers within your columns. This lets you highlight multiple key fields side by side in your custom highlights panel.
{% endstep %}
{% endstepper %}
