By UATeam in Lightning App Builder —

Salesforce Lightning App Builder Example

Salesforce Lightning App Builder is a user-friendly, drag-and-drop tool that allows administrators and developers to create customized user interfaces for Salesforce applications. With Lightning App Builder, you can design pages for desktop and mobile, streamline workflows, and enhance user experience.

This guide demonstrates how to use the Lightning App Builder to create a custom record page for the Opportunity object.

What Is Salesforce Lightning App Builder?

Salesforce Lightning App Builder is a tool for building:

  • Custom Record Pages: Design tailored layouts for standard or custom objects.
  • App Pages: Create dashboards or single-page applications.
  • Home Pages: Customize the Salesforce Home page with metrics and actionable components.

Key Features

  • Drag-and-drop interface.
  • Prebuilt Lightning components.
  • Support for custom Lightning components (Aura and LWC).

Lightning App Builder Example

Objective

We’ll create a custom Opportunity record page that:

  1. Displays opportunity details in a compact layout.
  2. Includes a related list of contacts.
  3. Adds a chart to visualize opportunity pipeline stages.

Step 1: Access Lightning App Builder

  1. Navigate to Setup:
    • Click the gear icon in Salesforce → Select Setup.
  2. Open Lightning App Builder:
    • Search for Lightning App Builder in the Quick Find box → Click Lightning App Builder.
  3. Create a New Page:
    • Click New → Select Record Page → Click Next.

Step 2: Configure the Page Layout

  1. Choose a Label and Object:
    • Label: Opportunity Custom Page.
    • Object: Opportunity.
  2. Select a Template:
    • Choose a Header and Three Columns template → Click Finish.

Step 3: Add Components to the Page

1. Add Record Details

  • Drag the Record Detail component into the main column.
  • This displays the detailed fields for the Opportunity object.
  • Drag the Related Lists component into the right-hand column.
  • Use the component properties to display the Contacts related list.

3. Add a Chart

  • Drag the Opportunity Pipeline Chart component into the left-hand column.
  • Configure the chart to display pipeline data for the logged-in user.

4. Add a Custom Component (Optional)

  • If you have a custom Lightning Web Component (LWC), drag it from the Custom section to the desired area.

Step 4: Customize Component Properties

  1. Record Detail:
    • Choose the Compact Layout to save space and highlight key fields.
  2. Opportunity Pipeline Chart:
    • Configure filters to display relevant data based on user role or team.

Step 5: Save and Activate the Page

  1. Save the Page:
    • Click Save to store the page configuration.
  2. Activate the Page:
    • Click Activate to make the page available.
    • Select Org Default to set this page as the default Opportunity record page for the organization.

Step 6: Test the Custom Page

  1. Open an Opportunity Record:
    • Navigate to the Opportunity tab → Open any record.
  2. Verify the Layout:
    • Check that the record details, related contacts, and pipeline chart appear as configured.
  3. Adjust if Necessary:
    • Return to the Lightning App Builder to refine the layout or component properties.

Best Practices for Lightning App Builder

  1. Focus on User Experience:
    • Prioritize critical information and make the layout intuitive.
  2. Leverage Standard Components:
    • Use built-in components for faster implementation and consistent design.
  3. Incorporate Dynamic Filters:
    • Use dynamic filters to display data relevant to the logged-in user.
  4. Optimize for Performance:
    • Limit the number of components to avoid slow load times.
  5. Test on Mobile and Desktop:
    • Ensure your page works seamlessly across all devices.

Conclusion

Salesforce Lightning App Builder simplifies the process of creating custom pages tailored to business needs. By following this example, you can design a functional and visually appealing Opportunity record page that enhances user productivity and data visibility. With its flexibility and ease of use, Lightning App Builder is an essential tool for delivering exceptional Salesforce experiences.