YouTube ChannelBook A DemoContact SupportInstall the Avonni Dynamic Components

Header

The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers.

Overview

The Avonni Header component adds titles, subtitles, icons, images, and structure to your Salesforce Dynamic Components. As a layout element, it focuses on presentation to draw attention and provide context without tying to specific data objects.

Key features include:

  • Text Elements: Caption, title, and subtitle for layered information.

  • Visuals: Icons and background images for engagement.

  • Dynamic Binding: Link to variables, formulas, or record fields for adaptability.

  • Integration: "Joined" option to blend with content below.

  • Simplicity: Quick setup for headers in pages, sections, or forms.

Use Cases

  • Page Headers: Top-level titles on App or Record Pages (e.g., "Account Overview").

  • Section Dividers: Organize content in Cards or Containers (e.g., "Billing Details").

  • Form Headers: Label input groups (e.g., "Create New Contact").

  • Dashboard Labels: Title charts or metrics sections.

  • Visual Separation: Break up long pages for better readability.

Choosing Between Header and Card Components

Both can serve as headings, but select based on needs:

Component
Best For
Key Differences

Header

Simple, standalone titles with basic icons/text.

Focuses on text/icon; no slot for nested components.

Card

Integrated headings with content below.

Includes slots for other elements; more layout flexibility and styling.

Configuration

Select the Header on the canvas to access properties in the right-hand Properties Panel.

Properties

These control text, visuals, and behavior.

Property
Type
Description
Example

API Name

Text

Unique identifier for referencing in interactions/formulas.

AccountHeader

Caption

Text/Binding (Optional)

Short text above title; static or bound to Variable/Formula.

"Account" or {!accountType}

Title

Text/Binding

Main heading; bind for dynamics (e.g., record fields).

"Account Details" or $Component.record.Name

Subtitle

Text/Binding (Optional)

Text below title for details.

"Industry: {!industryVar}"

Icon Name

Text/Binding (Optional)

SLDS or Avonni icon next to title; dynamic via formula.

standard:account

Background Image

Text/URL (Optional)

URL for background; bind to variable for dynamics.

"https://example.com/bg.jpg" or {!bgImageVar}

Is Joined

Boolean

Connects header visually to content below (e.g., removes bottom border).

On for integrated look.

Tip: For icons, reference Salesforce Lightning Design System (SLDS) docs for names. Bind properties to make headers context-aware.

Examples

Static Header

  1. Configure Properties:

    • Caption: (Blank)

    • Title: "Account Details"

    • Subtitle: "Information about the current Account"

    • Icon Name: standard:account

    • Background Image: (None)

    • Is Joined: On

Result: A basic, unchanging header with icon, ideal above a static Data Table.

Dynamic Header on Account Record Page

  1. Configure Properties:

    • Set the Target Page Object to Account: In your Dynamic Component's settings (e.g., in the canvas or main properties), select "Account" as the Target Page Object. Why do this? This tells the component it's placed on an Account Record Page, enabling access to the current record's data via bindings like $Component.record.FieldName. Without it, dynamic record bindings won't work, and the header would remain static.

    • Caption: "Account"

    • Title: $Component.record.Name (mapped to the current Account's Name field)

    • Subtitle: $Component.record.Industry (mapped to the current Account's Industry field)

    • Icon Name: standard:account

    • Background Image: (None)

    • Is Joined: On

Result: Header updates per record (e.g., Title shows "Acme Corp"), with dynamic Subtitle.

Key Considerations

  • Dynamic Power: Bind Caption/Title/Subtitle to Record Variables or Target Page Object for context-sensitive headers (e.g., user-specific or record-based).

  • Icon Selection: Choose relevant SLDS icons; test for visual consistency across devices.

  • Background Images: Select high-contrast images to ensure text readability; avoid overuse to prevent distraction.

  • Is Joined Option: Toggle to integrate with below content.

  • Accessibility: Use clear, hierarchical text; add alt text if images/icons need it via custom attributes.

  • Performance: Dynamic bindings may require efficient formulas to avoid delays on load.

Troubleshooting Common Issues

  • Bindings Not Updating: Verify resource names (e.g., $Component.record.Name); check page context (App vs. Record).

  • Icon Not Displaying: Confirm valid SLDS name; browse Avonni/SLDS docs for options.

  • Background Overlays Text: Adjust image opacity via CSS if supported, or choose lighter images.

  • No Visual Connection: Ensure Is Joined is on and no conflicting borders in parent components.

  • Static Despite Bindings: Test with sample data; refresh canvas or preview in app.

Summary

The Avonni Header component delivers flexible, engaging titles for structuring Dynamic Components. With dynamic bindings and visuals, it's essential for clear, contextual UIs in Salesforce. For related components, see Avonni Card or Layout Guide.

Last updated

Was this helpful?