TCoreHeaderCard

Enhanced dashboard card with structured header containing title area, subtitle, and TButtonContainer for action buttons. Inherits footer, status panels, and traffic light from TCoreCard.

CardDashboardHeaderButtons

Overview

TCoreHeaderCard extends TCoreCard with a sophisticated header structure suitable for dashboard applications. The header replaces TCoreCard's simple TitleLabel with a vertical title/subtitle stack and a TButtonContainer for action buttons (fullscreen, menu, etc.).

Component Structure

TCoreHeaderCard (extends TCoreCard)
├── HeaderDiv
│   ├── DragHandle (6-dot pattern, moved from base class)
│   ├── TitleAreaDiv
│   │   ├── TitleTextDiv (bold title)
│   │   └── SubtitleTextDiv (lighter subtitle)
│   └── ButtonContainer (TButtonContainer with action buttons)
├── ContentDiv (TFormContainer - inherited)
├── FooterDiv (inherited)
│   ├── StatusPanels[0..n]
│   └── TrafficLightDiv
└── ResizeHandle (inherited)

Published Properties

PropertyTypeDescription
DataDisplayTypeTDataDisplayTypeType of data displayed (ctMap, ctChart, etc.). Affects available buttons.
HeaderStyleTHeaderStyleButton layout style (hsCompactActions, etc.).
OnHeaderButtonClickTHeaderButtonClickEventFired when any header button is clicked.

Inherited from TCoreCard

All TCoreCard properties are available including CardTitle, CardSubtitle, TrafficLight, ShowFooter, ShowTrafficLight, StatusCount, etc.

Header Components

TitleAreaDiv

Flex column container holding title and subtitle vertically stacked with 2px gap.

TitleTextDiv

Bold 15px title text in dark color (#1f2937).

SubtitleTextDiv

Lighter 12px subtitle text in muted color (#6b7280).

ButtonContainer

TButtonContainer from Obj.Dashboard.Header providing action buttons. Buttons vary based on DataDisplayType and HeaderStyle.

Public Methods

PROCEDURE SetTitle(CONST Value: STRING);

Sets the title text displayed in the header.

PROCEDURE SetSubtitle(CONST Value: STRING);

Sets the subtitle text displayed below the title.

PROCEDURE SwitchToDashboardMode(Mode: TDashboardMode);

Switches the button container to a different dashboard mode (mdDisplay, mdEdit, etc.) which changes visible buttons.

Button Container Integration

The ButtonContainer uses TButtonContainer from Obj.Dashboard.Header:

/// Button container setup in CreateHeaderCardControls:
ButtonContainer := TButtonContainer.Create(Self);
ButtonContainer.ParentElement := HeaderDiv.ElementHandle;
ButtonContainer.HeaderStyle := HeaderStyle;
ButtonContainer.OnHeaderButtonClick := InternalHeaderButtonClick;
ButtonContainer.SwitchToButtonType(mdDisplay, DataDisplayType);
Event Forwarding: Button clicks are captured by InternalHeaderButtonClick and forwarded to OnHeaderButtonClick property for external handling.

Styling

Header layout uses flex with centered items and 12px gap:

Inheritance Chain

TCoreDiv
  └── TCoreCard (base card with footer/traffic light)
        └── TCoreHeaderCard (enhanced header with buttons)
              └── TDashboardGridCard (grid positioning)

Usage Example

Card := TCoreHeaderCard.Create(Self);
Card.Parent := Self;
Card.SetTitle('Sales Dashboard');
Card.SetSubtitle('Q4 2025 Performance');
Card.DataDisplayType := ctChart;
Card.HeaderStyle := hsCompactActions;
Card.OnHeaderButtonClick := HandleButtonClick;

/// Handle button clicks
PROCEDURE TForm1.HandleButtonClick(Sender: TObject; Action: TMessageType; Payload: TPayload);
BEGIN
   CASE Action OF
      mtFullscreen: /// Handle fullscreen
      mtMenu: /// Handle menu
   END;
END;

Related Components