🎨

User Interface and Lightning App Builder

Lightning App Builder, Dynamic Forms, page layouts, actions, buttons, list views, Path, Kanban, and Lightning components.

⏱️ Estimated reading time: 50 minutes

Lightning App Builder: Pages and Templates

Lightning App Builder is the main drag-and-drop tool for designing Lightning pages without code.

3 types of pages you can create:

1. App Page:
- Standalone page accessible from app navigation.
- Ideal for custom dashboards, command centers, internal portals.
- Templates: one column, two columns, three columns.
- Assigned to a Lightning App and appears as a tab.

2. Home Page:
- Replaces the default home page.
- Typical components: Assistant, Key Deals, Today's Tasks, Performance Chart, Recent Items.
- Can be assigned to: the entire org (default) or to specific profiles or a specific app.
- Only one active Home Page per profile/app.

3. Record Page:
- Customizes the detail view of a specific record.
- The most complex and most exam-tested page type.
- Assigned by: Org Default β†’ App Default β†’ App + Record Type + Profile (most specific wins).
- Available templates: Header and One Column, Header and Two Columns (3:9, 6:6, 4:8), Header and Three Columns, Full Width.

Record Page Activation/Assignment:
When activating a Record Page, you can assign it with different specificity levels:
- Org Default: Applies to all users, all apps.
- App Default: Applies only within a specific Lightning App.
- App, Record Type, and Profile: The most specific assignment. Overrides all others.

Rule: The most specific assignment ALWAYS wins.

Available standard components:
- Related Lists, Related Record, Highlights Panel, Record Detail, Chatter Feed, Path, Activities, Flow (embed Screen Flows), Rich Text, Report Chart, Custom Lightning Components.

Dynamic Forms:
Allow placing individual fields in any page region (not tied to Page Layout sections). Benefits:
- Visibility Rules: Show/hide fields based on user profile, record type, field values, permissions, or device.
- Eliminates the need for multiple Page Layouts for different visibility combinations.
- Only available on Record Pages and only for Custom Objects (and some selected Standard Objects).

Dynamic Actions:
Similar to Dynamic Forms but for record actions (buttons). Controls which actions are shown based on dynamic criteria without needing different Page Layouts per profile.
- Replaces the 'Salesforce Mobile and Lightning Experience Actions' section of the Page Layout.
- Allows assigning different actions by profile, Record Type, or field value.

Component Visibility Rules:
Each Lightning component in App Builder can have visibility rules:
- Device: Desktop only, mobile only, both.
- Permissions: Based on user permissions.
- Field Values: Based on a record field value.
- Advanced (Custom): Custom boolean formulas.

🎯 Key Points

  • βœ“ 3 page types: App Page, Home Page, Record Page
  • βœ“ Record Pages assigned by Org Default β†’ App Default β†’ App + RT + Profile (most specific wins)
  • βœ“ Dynamic Forms: individual fields with Visibility Rules on Record Pages (Custom Objects only)
  • βœ“ Dynamic Actions: control which actions are shown based on dynamic criteria
  • βœ“ Component Visibility Rules: each component can have filters by device, profile, or field value

Page Layouts, Compact Layouts, and Related Lists

Page Layouts remain relevant, especially before migrating to Dynamic Forms.

Page Layouts control:
1. Fields: Which fields appear and their arrangement (columns, sections).
2. Sections: Field groupings with custom titles.
3. Related Lists: Which related lists appear and in what order.
4. Actions (Buttons): Which Quick Actions and buttons show in the action bar.
- Section: 'Salesforce Mobile and Lightning Experience Actions'.
- If not customized, inherits the global section (Publisher Global Layout).
5. Field Properties: Mark fields as Required or Read-Only in the layout context.

Page Layout Assignment:
- Assigned through the Profile Γ— Record Type matrix.
- One profile + one Record Type = one specific Page Layout.
- If no Record Types are active, one layout is assigned per profile.

Mini Page Layout:
- Controls which fields appear in hover tooltips (popup when hovering over a record hyperlink).
- Configured within the Page Layout Editor in the 'Mini Page Layout' section.

Compact Layouts:
- Control which fields appear in the Highlights Panel (the top bar of a record).
- Also control which fields are seen in the Mobile App and in Lookup Cards.
- Maximum 7 fields (plus the Name field which always appears).
- The first field in the Compact Layout is used as the record's main title.
- Assigned by Record Type. If no Record Types, there's one active Compact Layout per object.
- System Default Compact Layout: shows only the Name field.

Related Lists:
- Show child records associated with the current record.
- Configured in the Page Layout (drag to Related Lists section).
- Related List - Single: Shows an embedded related list directly on the Record Page (Lightning App Builder component).
- Visible fields in the Related List are configured by clicking the wrench on the element in the Page Layout Editor.
- Enhanced Related Lists: Allow inline actions (edit, delete) directly from the list.

Blank Spaces & Sections:
- Use 'Blank Space' to create empty spaces in the layout.
- Sections can be 1 or 2 columns.
- Collapsible sections can be configured as collapsed by default.

🎯 Key Points

  • βœ“ Page Layouts: fields, sections, related lists, actions β€” assigned by Profile Γ— Record Type
  • βœ“ Compact Layouts: Highlights Panel + Mobile + Lookup Cards β€” max 7 fields
  • βœ“ Mini Page Layouts: control hover tooltips for record links
  • βœ“ Dynamic Forms replaces the need for multiple Page Layouts for field visibility
  • βœ“ If the actions section isn't customized, it inherits from the Publisher Global Layout

Actions, Buttons, and Quick Actions

Quick Actions allow performing quick operations directly from a record or from any context.

Quick Action Types:

1. Object-Specific Quick Actions:
- Linked to a specific object.
- Access the parent record context (can pre-fill fields from the parent).
- Types: Create (create related record), Update (update fields), Log a Call, Custom (LWC, Visualforce, Flow).
- Configured in: Object Manager > [Object] > Buttons, Links, and Actions.
- Added to the Page Layout in the actions section.

2. Global Quick Actions:
- NOT linked to any specific object.
- Available from the '+' menu in the global navigation bar.
- Have no parent record context β†’ cannot pre-fill fields from a parent.
- Use cases: create a new Task, Event, Contact, or custom record from anywhere.
- Configured in: Setup > Global Actions.
- Added to: Publisher Global Layout.

Predefined Field Values:
- When creating a 'Create' type Quick Action, you can pre-fill fields automatically.
- Example: 'New Case' Quick Action on Account pre-fills the Account field with the current record and Priority with 'High'.
- Predefined fields are NOT editable by the user in the action form.

Action Layout:
- Each Quick Action has its own mini layout defining which fields appear in the popup form.
- Can be different from the object's main Page Layout.
- Enables creating simplified forms with only necessary fields.

Custom Buttons and Custom Links:

TypeLocationAction
List ButtonList viewExecutes URL, JavaScript (Classic), or Flow
Detail Page ButtonRecord detail pageExecutes URL or JavaScript
Detail Page LinkAppears as a link on the pageExecutes URL

Important note: Custom Buttons with JavaScript only work in Salesforce Classic, NOT in Lightning Experience. In Lightning, Quick Actions with Screen Flows are used for equivalent functionality.

Lightning Actions:
- Actions in Lightning appear in the action bar at the top of the Record Page.
- Only the first actions that fit in the bar are shown; the rest are hidden under a dropdown menu.
- Order matters: the most important actions should be first in the Page Layout.
- With Dynamic Actions (Lightning App Builder), you can control which actions are shown based on dynamic criteria, removing the Page Layout dependency.

🎯 Key Points

  • βœ“ Object-Specific Actions: inherit parent context, allow Predefined Field Values
  • βœ“ Global Actions: no parent context, available in the global navigation '+' menu
  • βœ“ Predefined Field Values are set when creating the Quick Action and are NOT editable by users
  • βœ“ Custom Buttons with JavaScript do NOT work in Lightning (Classic only)
  • βœ“ Dynamic Actions remove the Page Layout dependency for action visibility

List Views, Path, Kanban, and Productivity Tools

Salesforce offers multiple visual tools to improve productivity and user experience.

List Views:
- Display records from an object filtered by criteria.
- Custom List Views can be created with specific filters.
- Visibility: Private (creator only), Shared with specific groups, All users.
- Advanced options: Inline Editing (edit fields directly from the list), Charts (mini charts), Kanban view.
- Admins can pin a List View as the default view for the entire org.
- Mass Actions: From a List View, bulk actions can be performed: change owner, send mass email, change status.

Kanban View:
- Visual board view (like Trello) that groups records by a picklist or lookup field.
- Classic example: Opportunities grouped by Stage (columns: Prospecting, Qualification, Proposal, etc.).
- Allows drag-and-drop to move records between columns (changing the field value).
- Shows numerical summary per column (count, sum).
- Available from any List View by clicking the Kanban icon.
- You can configure which field groups columns and which field is summarized.

Path:
- Visual band at the top of a record showing process stages.
- Works with Picklist fields or Stage (Opportunity).
- Configured in: Setup > Path Settings > Enable Path > New Path.
- Key Fields: Can configure key fields that appear in a popup when clicking each stage. Help the user know what info to complete before advancing.
- Guidance for Success: Custom help text for each stage (tips, best practices).
- Added as a Path component in Lightning App Builder.
- One Path per object per Record Type.

Split View:
- Available in Console Apps.
- Shows the List View in a side panel and the selected record in the main panel.
- Enables quick navigation between records without leaving the list.

Related Lookup Filters:
- Filters that restrict available records in a Lookup field.
- Example: on a Contact Lookup field, filter to show only active contacts from the same Account.
- Configured when editing the relationship field.

Global Search:
- Searches across all objects simultaneously.
- Results filtered by user permissions.
- Admins can configure which fields are searchable per object (Search Layouts).
- Search Layouts: Control which fields appear in search results, lookup dialogs, and phone/tablet results.

🎯 Key Points

  • βœ“ Kanban View: board view with drag-and-drop, groups by picklist/lookup
  • βœ“ Path: visual stages with Key Fields and Guidance for Success β€” configured per picklist
  • βœ“ List Views support Inline Editing, Charts, mass actions, and Kanban
  • βœ“ Split View (Console Apps): list + record side-by-side for quick navigation
  • βœ“ Search Layouts control which fields appear in global search results

Lightning Components: Standard, Custom, and AppExchange

Lightning Experience is built on a reusable component architecture.

Component types available in Lightning App Builder:

1. Standard Components:
Pre-built by Salesforce. Include:
- Record Detail: The complete Page Layout form.
- Related Lists: All related lists configured in the Page Layout.
- Related List - Single: An individual embedded related list.
- Highlights Panel: Shows Compact Layout fields.
- Chatter: Record's Chatter feed.
- Activities: Activity timeline (Tasks, Events, Emails, Calls).
- Path: Process stage bar.
- Flow: Embeds a Screen Flow directly on the page. Users can interact with the flow without leaving the record.
- Rich Text: Displays formatted text, instructions, or basic HTML.
- Report Chart: Embeds a report chart directly on the page.
- Accordion: Groups content in collapsible sections.
- Tabs: Groups components in tabs to save space.

2. Custom Components (LWC - Lightning Web Components):
- Developed by programmers using standard web HTML, JavaScript, and CSS.
- Can be exposed for Lightning App Builder use by configuring their metadata.
- Can receive admin configuration parameters (design attributes).
- They are the evolution of Aura Components (legacy).
- Require deployment but once deployed, administrators use them as drag-and-drop.

3. AppExchange Components:
- Installed from AppExchange.
- Used just like Standard Components in App Builder.
- Examples: advanced charts, interactive maps, integration widgets.

Lightning Page Templates:
Define the page structure (regions where components can be placed).
- Standard templates: Full Width, Two Columns (various proportions), Three Columns.
- Template is selected when creating the page. Can be changed later but may require relocating components.

Flow Component in Lightning Pages:
One of the most powerful uses: embedding Screen Flows directly in a Record Page.
- The flow runs in the record context.
- The recordId can be passed as input to the flow to work with the current record.
- Use case: escalation forms, configuration wizards, post-sale surveys.

Lightning Email Templates:
- Visually designed with the drag-and-drop Email Template Builder.
- Support merge fields (e.g., {!Contact.FirstName}).
- Can be used in: Quick Actions, Flows, Mass Email.
- Replace Letterheads + HTML Templates (which are Classic/Legacy).

🎯 Key Points

  • βœ“ 3 component types in App Builder: Standard, Custom (LWC), and AppExchange
  • βœ“ The Flow component embeds Screen Flows directly in Record Pages
  • βœ“ LWC (Lightning Web Components) replace Aura Components (legacy)
  • βœ“ Report Chart allows embedding report charts directly on pages
  • βœ“ Page templates define available regions and can be changed later
  • βœ“ Admins can use custom LWC as drag-and-drop without writing code