A configurable Lightning Web Component that displays a rich, gradient-styled summary card for any Salesforce object. Designed for Contacts, Accounts, and Leads but works with any queryable object.
Includes a standalone visual configuration builder with live preview, saved configurations, and full App Builder integration.
| Component | Description |
|---|---|
customerHighlight |
The display card. Place on any Record, App, or Home page. |
customerHighlightEditor |
Standalone config builder with interactive dropdowns, color pickers, field tables, and live preview. Place on any App or Home page. |
| Class | Description |
|---|---|
CustomerHighlightController |
Backend for schema metadata (objects, fields, relationships) and config CRUD (save, load, delete). |
CustomerHighlightControllerTest |
53 test methods covering all controller logic and picklist classes. |
ObjectPicklist |
VisualEditor.DynamicPickList — populates the Object dropdown in App Builder. |
IconPicklist |
VisualEditor.DynamicPickList — populates the Header Icon dropdown in App Builder with ~45 curated SLDS icons. |
HighlightConfigPicklist |
VisualEditor.DynamicPickList — populates the Saved Configuration dropdown in App Builder from Highlight_Config__c records. |
| Object | Description |
|---|---|
Highlight_Config__c |
Stores saved card configurations. Name = config name, Config_JSON__c = full configuration as JSON. |
- Salesforce CLI (
sf) installed - Authenticated to your target org
sf project deploy start --source-dir force-app --target-org <your-org-alias-or-username> --wait 10After deployment, ensure that users who need to use the editor or view cards backed by saved configs have access to the Highlight_Config__c object:
- Go to Setup > Profiles (or Permission Sets)
- Grant Read, Create, Edit, Delete access on
Highlight_Config__cand all its fields to the relevant profiles - System Administrators get this automatically
The editor is a standalone Lightning component where you visually design your card layout.
- Go to Setup > Lightning App Builder
- Create or edit an App Page (e.g., "Card Builder")
- Search for "Highlight Card Builder" in the component palette and drag it onto the page
- Activate the page and add it to a Lightning App via the navigation bar
Once on the page, the editor has two columns:
Left Column - Settings Form:
| Section | What It Does |
|---|---|
| Load Saved Config | Dropdown to load a previously saved configuration for editing. |
| Config Name | Text field for the name you want to save this config as. |
| General | Card title text, header icon (dropdown), and target object (dropdown). |
| Header Fields | Dropdowns filtered by selected object for Name, City, State, and Photo URL fields. |
| Theme | Native color pickers for gradient start and end colors with a live preview strip. |
| Display Fields | Dynamic table of field rows. Each row has: Field (dropdown), Icon (dropdown), Label Override (text), Group Number (for visual dividers), and Chart Type (bar/ring) for numeric fields. |
| Progress Indicator | Optional bottom-of-card progress bar or donut ring driven by a numeric/percent field. |
| Related List | Dropdown of child relationships on the selected object, with a sub-table for choosing which fields to display from the related records. |
Right Column - Live Preview:
- Paste any valid Record ID (e.g., a Contact, Account, or Lead ID) into the Preview Record ID field
- The actual
customerHighlightcard renders in real-time with your current settings - Changes to any setting immediately update the preview
Save/Load/Delete:
- Save button (top right): Saves the current settings to a
Highlight_Config__crecord with the name in the Config Name field. If a record with that name already exists, it updates it. - New button: Clears all fields back to defaults for a fresh configuration.
- Delete button: Removes the currently loaded configuration from the database.
- Navigate to a record (e.g., a Contact)
- Click the gear icon > Edit Page to open Lightning App Builder
- Search for "customerHighlight" in the component palette
- Drag it into the desired region of the page layout
In the right-side properties panel, you have two approaches:
- In the Saved Configuration dropdown, select a config you built in the editor (e.g., "Contact Card")
- All other properties are ignored when a saved config is selected — the card loads everything from the saved config
- Click Save and Activate the page
If you prefer not to use saved configs, fill in properties manually:
| Property | Description | Example |
|---|---|---|
| Saved Configuration | Leave as "-- None (use properties) --" | |
| Card Title | Optional header text | Customer 360 |
| Header Icon | SLDS icon dropdown | standard:contact |
| Object | Which object to display | Contact |
| Name Field | API name of the heading field | Name |
| City Field | API name for city | MailingCity |
| State Field | API name for state | MailingState |
| Photo Field | API name of a URL field for the avatar | PhotoUrl |
| Gradient Start Color | Hex color code | #0d47a1 |
| Gradient End Color | Hex color code | #1565c0 |
| Fields Configuration | JSON or CSV (see below) | |
| Progress Field | Numeric/percent field API name | Engagement_Score__c |
| Progress Label | Display label for the progress indicator | Engagement |
| Progress Display Type | bar or ring |
bar |
| Related List API Name | Relationship name | Opportunities |
| Related Object API Name | Child object API name | Opportunity |
| Related List Label | Label text | Recent Opportunities |
| Related Record Fields | Comma-separated field API names | Name, Amount, StageName |
| Related Records to Show | Number of child records | 3 |
The Fields Configuration property accepts two formats:
[
{"apiName":"Email","icon":"utility:email","group":1},
{"apiName":"Phone","icon":"utility:phone","group":1},
{"apiName":"MailingCity","icon":"utility:location","label":"City","group":2},
{"apiName":"AnnualRevenue","icon":"utility:money","group":2,"chartType":"bar"}
]Each entry supports:
| Key | Required | Description |
|---|---|---|
apiName |
Yes | Field API name on the selected object. |
icon |
No | SLDS icon name (e.g., utility:email). Shown in a circular container. |
label |
No | Override label. Defaults to the field's metadata label. |
group |
No | Group number (default 1). Fields in different groups are separated by a divider line. |
chartType |
No | bar or ring. Only meaningful for numeric/percent fields. Renders an inline progress bar or donut ring below the field value. |
Email|utility:email, Phone|utility:phone --- MailingCity|utility:location|City
- Pipe (
|) separates:FieldApiName|IconName|LabelOverride - Comma separates fields within a group
- Triple dash (
---) separates groups
- Gradient background with configurable start/end colors
- Avatar — displays the photo URL field as a circular image, or shows initials if no photo exists
- Name and location in the profile header
- Grouped field rows with circular icon containers, auto-resolved labels from object metadata, and visual dividers between groups
- Inline charts — numeric fields can render a horizontal progress bar or a donut ring chart directly below the field value
- Related records — shows child records (e.g., Opportunities, Cases) with clickable links that navigate to the record
- Bottom progress indicator — a standalone bar or donut ring driven by any numeric/percent field
- Fully object-agnostic — works with Contact, Account, Lead, or any queryable standard/custom object
| Setting | Value |
|---|---|
| Object | Contact |
| Name Field | Name |
| City Field | MailingCity |
| State Field | MailingState |
| Photo Field | PhotoUrl |
| Gradient Start | #0d47a1 |
| Gradient End | #1565c0 |
| Fields | Email|utility:email, Phone|utility:phone, Department|utility:people |
| Setting | Value |
|---|---|
| Object | Account |
| Name Field | Name |
| City Field | BillingCity |
| State Field | BillingState |
| Gradient Start | #1b5e20 |
| Gradient End | #2e7d32 |
| Fields | Industry|utility:world, Phone|utility:phone --- AnnualRevenue|utility:money|Revenue |
| Related List | Contacts |
| Related Object | Contact |
| Related Fields | Name, Email |
| Setting | Value |
|---|---|
| Object | Lead |
| Name Field | Name |
| City Field | City |
| State Field | State |
| Gradient Start | #4a148c |
| Gradient End | #7b1fa2 |
| Fields | Company|utility:company, Email|utility:email, Phone|utility:phone |
force-app/main/default/
classes/
CustomerHighlightController.cls # Schema metadata + config CRUD
CustomerHighlightControllerTest.cls # 53 test methods
ObjectPicklist.cls # App Builder object dropdown
IconPicklist.cls # App Builder icon dropdown
HighlightConfigPicklist.cls # App Builder saved config dropdown
lwc/
customerHighlight/ # Display card component
customerHighlight.js # Component logic + wire adapters
customerHighlight.html # Template with gradient, fields, charts
customerHighlight.css # Dark theme styling
customerHighlight.js-meta.xml # Exposed on Record/App/Home pages
customerHighlightEditor/ # Configuration builder
customerHighlightEditor.js # Editor logic + save/load/preview
customerHighlightEditor.html # Two-column layout with live preview
customerHighlightEditor.css # Editor styling
customerHighlightEditor.js-meta.xml # Exposed on Record/App/Home pages
objects/
Highlight_Config__c/ # Custom object for saved configs
Highlight_Config__c.object-meta.xml
fields/
Config_JSON__c.field-meta.xml # Long Text Area (131,072 chars)
All components use Salesforce API v65.0.