Build a Custom Record Header & Highlights Panel

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

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.

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.

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

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.

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.

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 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, or launches an automated process. Choose the action you want for each menu item—there are many possibilities to fit your needs..

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.

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.

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.

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.