π¨
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.
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.
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
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.
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
- 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.,
- Can be used in: Quick Actions, Flows, Mass Email.
- Replace Letterheads + HTML Templates (which are Classic/Legacy).
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