8.2 Standard, Custom & AppExchange Lightning Components

Standard, Custom & AppExchange Lightning Components

Salesforce Lightning Experience is built upon a modular, component-based user interface architecture. Rather than rendering monolithic HTML pages generated on the server, the Lightning framework renders dynamic client-side applications composed of discrete, reusable user interface elements known as Lightning Components. In the Lightning App Builder, these components serve as the fundamental building blocks that administrators and app builders arrange on canvas templates to deliver functional enterprise applications.

Understanding the behavioral nuances, configuration properties, and technical prerequisites of standard components, as well as the deployment mechanics of custom and AppExchange components, is essential for passing the Platform App Builder examination.

---

Standard Lightning Components Deep-Dive

Salesforce provides a rich palette of prebuilt standard components designed to handle common CRM interaction patterns without code. The most critical standard components tested on the exam include:

1. Highlights Panel

• Position & Role: Positioned at the top of Record Pages, the Highlights Panel surfaces the most critical record data at a glance.
• Data Source: The fields displayed in the Highlights Panel are driven entirely by the object's assigned Compact Layout.
• Field Capacity: Displays up to 7 fields on desktop screens and up to 10 fields in the current mobile Highlights Panel; available space and enabled mobile experience affect display. The first field defined in the compact layout serves as the primary object identifier.
• Action Bar: Displays standard, custom, and quick action buttons. If Dynamic Actions are enabled on the Highlights Panel component in Lightning App Builder, the builder can manage action buttons directly within the App Builder properties pane.

2. Record Detail

• Role: Renders the complete collection of fields and sections configured within the object's traditional Page Layout (configured in Page Layout Editor).
• Architectural Boundary: The standard Record Detail component is coarse-grained—it moves all fields and sections as an indivisible monolithic unit. (To break fields into granular, individually positionable components with conditional visibility, app builders upgrade to Dynamic Forms).

3. Related Lists vs. Related List - Single vs. Related List Quick Links

Salesforce provides three distinct mechanisms for surfacing child relationship records:

• Related Lists (Default): Renders all related lists defined on the assigned Page Layout in a fixed vertical sequence. Offers minimal positional flexibility.
• Related List - Single: A highly targeted component allowing the app builder to select one specific child relationship (e.g., Opportunities, Cases, or Contracts) and place it anywhere on the canvas.
  • Configurable Properties: Parent Record, Related List selection, list type, display count, and action-bar settings. Basic List shows the first four related-list fields; Enhanced List supports up to ten fields and richer list actions. The page layout must include the selected related list. Dynamic Related List–Single has its own List/Tile choices, fields, sorting, and filters.
  • Exam Application: Placing high-priority child records (such as recent open cases) in the prominent left column while banishing less critical related lists to secondary background tabs.
• Related List Quick Links: Renders a compact horizontal row of hyperlinked chips displaying child relationship names and live record counts. Hovering over a chip opens an interactive popover previewing the first few child records, conserving vertical space while retaining instant accessibility.

4. Tabs & Accordion Containers

Container components organize dense, complex pages into structured, navigable sections:

• Tabs Component: Creates horizontal tabbed containers (e.g., "Details", "Related", "Activity", "Chatter"). Builders can add standard or custom-labeled tabs, reorder their sequence, and designate a specific tab as the Default Tab loaded when a user accesses the page.
• Accordion Component: Vertically stacks collapsible content sections. Conserves vertical screen real estate by allowing users to expand only the section they are currently working on. App builders can configure whether multiple sections can be expanded simultaneously or restricted to one open section at a time.

5. Path Component

• Role: Visual stage-based workflow indicator driven by an underlying picklist field (e.g., Opportunity StageName, Lead Status, or Case Status).
• Configuration: Configured in Setup > User Interface > Path Settings.
• Capabilities: For each stage in the business process, the Path component displays up to 5 Key Fields and rich text Guidance for Success, reinforcing governance and best practices during pipeline progression.

6. Report Chart Component

• Role: Embeds a graphical chart from an existing Salesforce report directly into a record, home, or app page.
• Technical Prerequisites:
  1. The underlying source report must have a summary or matrix grouping format (tabular reports without groupings cannot generate charts).
  2. The report must have a chart enabled within the Report Builder.
• Contextual Filtering on Record Pages: When placed on a Record Page, the Report Chart component property pane offers a critical setting: Filter By. Setting this property to the record ID (e.g., Filter By: Account ID) dynamically filters the report chart to display only records associated with the currently viewed record. If this filter is omitted, the chart renders aggregated metrics across the entire enterprise.

+-----------------------------------------------------------------------------+
|                      REPORT CHART CONTEXTUAL FILTERING                      |
+-----------------------------------------------------------------------------+
|                                                                             |
|   Source Report: "All Closed-Won Opportunities by Stage"                    |
|   Underlying Data: $50,000,000 across 4,200 opportunities (Org-Wide)        |
|                                                                             |
|   ┌─────────────────────────────────────────────────────────────────────┐   |
|   │ EMBEDDED ON ACCOUNT RECORD PAGE: "Acme Corp" (Id: 001xx000003DAB)    │   |
|   ├──────────────────────────────────┬──────────────────────────────────┤   |
|   │ WITHOUT "Filter By: Account ID"  │ WITH "Filter By: Account ID"     │   |
|   ├──────────────────────────────────┼──────────────────────────────────┤   |
|   │ Shows org-wide $50,000,000 chart │ Dynamically filters to Acme Corp │   |
|   │ Irrelevant to current Account!   │ Shows Acme's $240,000 pipeline   │   |
|   │ (EXAM FAILURE TRAP)              │ (EXAM CORRECT PATTERN)           │   |
|   └──────────────────────────────────┴──────────────────────────────────┘   |
+-----------------------------------------------------------------------------+

7. Flow Component

• Role: Embeds an active Screen Flow directly onto a Lightning Page.
• Parameter Passing: Can automatically pass the ID of the current record into a Flow text variable named recordId (which must be marked as Available for input in Flow Builder).
• Use Cases: Guided call scripts, customer intake questionnaires, warranty registration wizards, and multi-step diagnostic checklists.

8. Rich Text Component

• Role: Renders custom formatted text, headings, hyperlinks, bulleted lists, and inline images.
• Conditional Banners: In modern app design, Rich Text components are paired with Component Visibility Filters to act as dynamic alert banners (e.g., displaying a prominent red callout box stating "CRITICAL: Customer is in Active Litigation" only when Legal_Hold__c = TRUE).

---

Custom Lightning Components (LWC) & Metadata Configuration

When standard declarative components cannot meet specialized UI requirements—such as integrating third-party JavaScript charting libraries, calling external REST endpoints directly from the client, or rendering complex dynamic grids—developers build custom Lightning Web Components (LWC) or legacy Aura components.

For a custom component to appear in the Lightning App Builder component palette, its XML configuration file (<componentName>.js-meta.xml) must be properly configured:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <!-- 1. Must be set to true to expose component in App Builder palette -->
    <isExposed>true</isExposed>
    <masterLabel>Loan Amortization Calculator</masterLabel>
    <description>Calculates monthly principal and interest payments</description>
    
    <!-- 2. Targets define the page contexts where component is available -->
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    
    <!-- 3. TargetConfigs define configurable properties in App Builder pane -->
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="chartTitle" type="String" label="Amortization Title" default="Payment Schedule"/>
            <property name="showPrincipalOnly" type="Boolean" label="Hide Interest Breakdown" default="false"/>
            <!-- Restrict component to specific objects -->
            <objects>
                <object>Loan_Application__c</object>
                <object>Opportunity</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Critical XML Tags Examined

• <isExposed>: Must be explicitly set to true. If set to false, the component is strictly private to code and will never appear in the Lightning App Builder palette.
• <targets>: Declares the page environments where the component can be deployed:
  • lightning__RecordPage: Exposes component for Record Pages.
  • lightning__AppPage: Exposes component for App Pages.
  • lightning__HomePage: Exposes component for Home Pages.
  • lightning__RecordAction: Exposes component as a Screen Quick Action modal.
  • lightning__UtilityBar: Exposes component for Lightning App Utility Bars.
• <targetConfigs>: Defines configurable design properties that surface in the App Builder right-hand property pane when an administrator selects the component on the canvas. It also supports <objects> tags to restrict component availability to specific sObjects.

---

AppExchange Lightning Components

The Salesforce AppExchange offers thousands of prebuilt, enterprise-ready Lightning components developed by Salesforce ISV partners.

• Installation: Administrators install AppExchange packages (managed or unmanaged) into the Salesforce organization via Setup or the AppExchange directory.
• Palette Placement: Once installed, third-party components automatically appear in the Lightning App Builder component palette under the Custom - Managed expandable section.
• Security & Governance: Managed AppExchange components execute within isolated namespaces under Lightning Locker or Lightning Web Security (LWS), protecting organizational data integrity while extending native platform functionality.

---

Standard Component Comparison Matrix

---

Exam Traps and Best Practices

• Trap: Embedding a Report Chart without Grouping. If a question states that an administrator cannot select a report in the Report Chart component, the cause is almost certainly that the source report lacks summary or matrix groupings, or has no chart configured.
• Trap: Custom LWC Missing from App Builder. If a developer reports that a freshly deployed LWC is invisible in Lightning App Builder, verify two things immediately: is <isExposed> set to true, and does <targets> include the specific page target (e.g., lightning__RecordPage)?
• Best Practice: Related List - Single over Full Related Lists. Avoid dropping the generic Related Lists component onto main record canvas areas. It generates a long, unorganized scrolling page. Instead, use Related List - Single to place the top 1 or 2 critical child lists in prominent tabs, and deploy Related List Quick Links for secondary child objects.

Filtering a Related List

The regular Related List–Single component isolates a related list, but does not provide the Dynamic Related List–Single component's independent filters, fields, and sort configuration. For example, to show only the three most recent escalated Cases on a Contact page, use Dynamic Related List–Single, filter Escalated = true, sort Created Date descending, and set the display count to three. Confirm object support in the palette. Other related lists can remain in the standard Related Lists component on a secondary tab. On unsupported objects, choose another supported presentation rather than assuming any list component can filter.

A report chart without a contextual record filter shows the source report's broader results within its security context; it does not automatically grant access to all company data. Verify both source-report filters and the viewing user's permissions.

Official Source Check

Checked October 19, 2026: Dynamic related list configuration.

Checked October 19, 2026: Standard Lightning component considerations.