Note

Note

Attention Trailblazer!

Salesforce has two different user interfaces: Lightning Experience and Salesforce Classic. It’s easy to switch between the two. You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

This module is designed for Lightning Experience.

Learning Objectives

After completing this unit, you’ll be able to:
  • Understand how the Lightning App Builder can help you build responsive apps and custom pages for Salesforce1 and Lightning Experience
  • Understand the layout of the Lightning App Builder user interface
  • Describe the difference between a Lightning Page and a Lightning component

Introduction to the Lightning App Builder

Your users are busy. They’re closing deals, providing top-notch service, and marketing to your prospects and customers. By creating customized pages, you can put key information at your users’ fingertips and provide them with an easy interface to update and add records.

The Lightning App Builder is a point-and-click tool that makes it easy to create custom pages for Salesforce1 and Lightning Experience. With the Lightning App Builder, you can combine various components on a single page to give your users what they need all in one place.

How the Lightning App Builder Works

With the Lightning App Builder, you can build:
  • Single-page apps that drill down into standard pages
  • Dashboard-style apps, such as apps to track top sales prospects or key leads for the quarter
  • “Point” apps to solve a particular task, such as an expense app for users to enter expenses and monitor expenses they’ve submitted
  • Custom record pages for your objects, tailored to the needs of your users
  • Custom Home pages containing the components and features that your users use most

Lightning Pages are the underlying technology for the Lightning App Builder. A Lightning Page is a custom layout that lets you design pages for use in the Salesforce1 mobile app or in Lightning Experience. A Lightning Page is composed of regions that contain components.

Here’s a sneak peek at one of the pages you’re going to build.

Lightning App Page Structure

The structure of a Lightning Page adapts for the device it’s viewed on. The template you choose when creating the page controls how it displays on a given device. The Lightning Page’s template divides the page into regions.

Lightning page regions

Lightning Components

A Lightning component is a compact, configurable, and reusable element that you can drag and drop onto a Lightning Page in the Lightning App Builder.

You can use standard, custom, and third-party components in the Lightning App Builder.
Standard Components
Standard components are Lightning components built by Salesforce.
Custom Components
Custom components are Lightning components that you or someone else have created. With some modifications, custom Lightning components can work in the Lightning App Builder. For more information on making Lightning components App Builder–friendly, see the Lightning Components Developer Guide.
Third-Party Components on AppExchange
The AppExchange provides a marketplace for Lightning components. You can find packages containing components already configured and ready to use in the Lightning App Builder.

The Lightning App Builder User Interface

The Lightning App Builder’s user interface makes creating Lightning Pages easy. Here’s a breakdown of the parts of the tool.

Lightning App Builder UI

Header (1)
The header shows you the label of your Lightning Page. You can also return to Setup without saving or to view more help for the Lightning App Builder.
Toolbar (2)
Use the buttons in the toolbar to cut (Cut), copy (Copy), and paste (Paste) page content; and to undo (Undo), redo (Redo), save, or activate your Lightning Page. You can also view your page in different formats, refresh the canvas, or adjust the canvas size to fit your view.
Lightning Components Pane (3)

The components pane contains all standard and custom Lightning components that are supported for your Lightning Page. Click and drag a component to add it to the page.

Tip

Tip

If you have a lot of custom components, enter text in the search field to easily find the one you need. You can access third-party custom components on the AppExchange using the button at the bottom of the pane.

Lightning Page Canvas (4)
The canvas area is where you build your page. Drag components to reorder them on the page.
Properties Pane (5)
Depending on what you select on the page, the properties pane shows either the overall page properties or the properties of the component that you’ve selected. Click Page in the breadcrumb to access the page properties when viewing a component.

Lightning Page Types

You can create different types of Lightning Pages with the Lightning App Builder.
App Page
Use an app page to create a home page for a third-party app that you can add directly into the Salesforce1 and Lightning Experience navigation menus. Your users then have an app home page where they can quickly access the most important objects and items.
Home Page
Create Home pages with features relevant to specific types of users, and assign the customized pages to different user profiles. Custom Home pages are supported in Lightning Experience only.
Record Page
With a record page, you can create a customized version of an object’s record page, tailoring it to your users’ needs. Custom record pages are supported in Lightning Experience only.

We’ll create all three. Let’s start with the Home page.

Share Time Estimate