Lightning App Builder (2022)

Learning Objectives

After completing this unit, you’ll be able to:

  • Create a customized object record page for Lightning Experience and the Salesforce mobile app.
  • Add visibility rules to a record page component.
  • Activate the custom record page for your users.

Those Lightning Experience Record Pages? You Can Customize Them, Too!

Use the Lightning App Builder to add, remove, or reorder components on a record page to give users a customized view for each object’s records. Even cooler, you can customize a record page and assign it to specific Lightning apps to give your users access to a record page customized especially for the context of the app they’re working in.

Lightning App Builder (1)

Just like the Home page, you can create a custom record page in different ways: Create it from scratch using a template, clone one of your other custom record pages, or edit an existing page. However, unlike the Home page, custom record pages are not only supported in Lightning Experience on desktop but also in the Salesforce mobile app. We’re going to create a record page using a template, then check out how it looks on a desktop and on a phone.

Create a Custom Lightning Record Page

Let’s build a custom opportunity record page.

We’ll tweak the standard record page layout just a bit, so you can get a feel for how things go together. After you’re comfortable with that, you can go to town and customize your record pages any way you like. Let’s get started.

  1. From Setup, enter App Builder in the Quick Find box, then select Lightning App Builder.
  2. Click New.
  3. Select Record Page and start stepping through the wizard.
  4. Name your page New Opportunity Page, and select Opportunity.
    Start typing an object’s name in the Object field to filter the list and find what you’re looking for more quickly.
  5. Choose the Header, Subheader, Right Sidebar template, and click Finish.
    In the components pane, you see all the standard components available for opportunity record pages and any custom components that you’ve installed in your org.
  6. From the settings menu ( Lightning App Builder (2)), select Always show icons.
    The icons that appear in the palette show what form factors each component supports. For example, if you add the Chatter Feed component to your page, it displays when you view the page on both a desktop and in the Salesforce mobile app. The same is not true for Chatter Publisher, which is supported on desktop only. We’ll see this behavior in action when we test our finished page.
  7. Drag the Highlights Panel component into the top region of the page. Click See How It Works in the component properties pane to find out where the highlights panel content comes from.
  8. Add the Path component to the region below the highlights panel.
  9. Add a Chatter component to the lower right region.
  10. Add a Tabs component to the lower left region.Lightning App Builder (3)The Tabs component comes with some default tabs already in place. Let’s add more.
  11. In the Tabs component details pane, click Add Tab.
    By default, another Details tab is added. But because we already have one, let’s change this new one to something else.
  12. Click the second Details tab.
  13. From the Tab Label dropdown menu, select Custom, and give the tab a new label: Recent Items.Lightning App Builder (4)
  14. Click Done.
  15. Create an Activity tab.
  16. Drag the Recent Items tab to the top of the Tabs list in the properties pane.
    The Recent Items tab is now in the first position in the tabs component. You can click around between the tabs, but nothing changes because the tabs don’t have any components in them. They’re empty. Let’s fix that.
  17. Select the Details tab.
  18. Drag a Record Detail component right below the Details tab, into the green highlighted area.Lightning App Builder (5)
  19. Add a Related Lists component to the Related tab, an Activities component to the Activity tab, and the Recent Items component to the Recent Items tab.
  20. Select the tabs component on the canvas, and in the properties pane, change the order of the tabs to: Details, Activity, Recent Items, then Related.
    You can’t drag the tabs inside the component to move them around. You can only adjust them in the properties pane.
  21. Click Save, then Not Yet.
(Video) Creating Dynamic Experience with Lightning App Builder

Make Your Record Page Dynamic

Did you know that you can control when a component appears on a Lightning record page? You can, by adding component visibility filter conditions and logic to its properties.

Component visibility properties appear when you select a component on a record, app, or Home page in the Lightning App Builder. This behavior applies to standard components, custom components, and components from AppExchange. No need to do anything to your custom components. It’s all handled by the Lightning App Builder. If you don’t define a filter, the component displays on the Lightning page as usual. When you define one or more filters and set the filter logic for a component, the component is hidden until the filter logic criteria are met.

Let’s give it a shot. We’ll construct filters to make a rich text component display when an opportunity’s Amount is greater than or equal to $1 million, and its Stage is Closed Won.

  1. Add a Rich Text component above the Chatter component on the page.
  2. Enter this text in the component: A million dollar opportunity closed! Oh yeah!
  3. In the component properties, make the text bold and centered, 18-point size, and change the font to something that appeals to you.
  4. Keep Display as card selected.
    This setting makes the text inside the component more readable on Lightning pages by adding a white background to it instead of a transparent one. Toggle the setting off and back on to see what we mean.
  5. Click Add Filter.
  6. Set Field to Amount, if it’s not already.
  7. Set Operator to Greater Than or Equal. For Value, enter 1000000.Lightning App Builder (6)
  8. Click Done.
  9. Click Add Filter again, and create another filter for the Stage field equal to Closed Won.
    Controlling whether a component displays based on field values isn’t all you can do with visibility rules. As we mentioned, custom record pages are supported in Lightning Experience both on desktop and in the Salesforce mobile app. Visibility rules can also control whether components appear on a page based on the form factor (or device) you’re viewing the page on. Let’s set up rules for a component to appear only when the page is viewed on a phone.
  10. Add another Rich Text component right below the first one.
  11. Enter this text in the component: This component is for mobile users only.
  12. Customize the text however you like, then click Add Filter.
  13. Under Filter Type, click Device.
  14. Set the Value field to Phone, then click Done.
  15. Save the page, then click Activation.

Roll Out Your Custom Record Page to Your Users

It’s time to spread the awesomeness! Let’s activate the page. It’s super easy.

Lightning App Builder (7)

You have four options for activation.

  • Make the page the org default for the object.
  • Make the page the default object record page for specific Lightning apps.
  • Assign the page to a combination of Lightning apps, record types, and profiles.
  • Assign the page to a form factor, such as a desktop or phone.

Note the last bullet in the list. Not only can you create a page that is customized for the needs of your users, but you can go a step further and customize a page based on how your users access it. You can create uniquely customized record pages that only your mobile users see, containing only what they need while on the road or in the field. At the same time, desktop-only record pages can serve the needs of your users while they’re working on their PCs or laptops.

Let’s assign this page to a specific app, record type, and profile. We’ll also make sure it’s assigned to both the desktop and phone form factors, so we can view it in both places.

(Video) Salesforce - Get Started with the Lightning App Builder
  1. Click the App, Record Type, and Profile tab.
  2. Click Assign to Apps, Record Types, and Profiles.
  3. Assign the page to the Sales app, the Desktop and phone form factor, the Master record type, and the System Administrator profile.
  4. Review the page assignments.
    The New Page column is populated with the name of the page we’re activating: New Opportunity Page.
  5. Click Save.

See? Easy peasy. Your customized record page is now live. Let’s go check it out.

Lightning App Builder (8)

You may be thinking, “This is great, but what if I change my mind? How do I deactivate my custom page?” That’s easy, too. Click Activation, click the App, Record Type, and Profile tab, and click Remove Assignments.

(Video) Work With Custom Lightning Experience - Lightning App Builder

See What You Did There?

You’ve created a page and activated it. Now let’s see it in action. First, we’ll look at it on desktop.

  1. Click Back in the App Builder header.
  2. From the App Launcher ( Lightning App Builder (9)), find and select Sales, then click the Opportunities tab.
  3. Select any open opportunity with an amount below $1,000,000.
    You might have to refresh the opportunity page for the record page changes you just made to appear.

    Here’s what the custom record page looks like, using the sample company, Dickenson Mobile Generators. Because you assigned the record page to the System Administrator profile, you can see it, but no other users in your org can. You can customize your different users’ experiences by creating custom record pages and assigning them by app, record type, and user profile. Give your sales managers a different view of opportunities than your sales reps. Configure nonprofit account pages differently than standard business account pages.
    Lightning App Builder (10)
    Don’t see the rich text components that you added to the page? That’s for two reasons. For one component, it’s because we’re viewing the page on a desktop. We’ll get to that shortly. For the other component, it’s because the opportunity doesn’t meet the criteria that you set. Let’s change that.

  4. From the page level actions in the Highlights panel, select Edit.
  5. Change the opportunity’s amount to be over $1,000,000, change the stage to Closed Won, then click Save.
    Woohoo, look at that! You didn’t even have to refresh the page. When you save your changes and the filter criteria are met, the page automatically updates to show the rich text component and its message.

    Lightning App Builder (11)

    Now let’s look at the page in the Salesforce mobile app.

  6. Open the app on your phone.
  7. If necessary, log in using your Trailhead Playground credentials.
  8. Open the menu, tap the App Launcher, and open the Sales app.
  9. Tap Opportunities, then navigate to the opportunity that you updated to Closed Won.
    What you see at first is what you’d expect: actions, record highlights, Path. But scroll down a bit...Lightning App Builder (12)The tabs in our Tabs component are stacked when viewed on a phone. You can tap them to drill in. But wait! There’s one missing. Where’s the Activity tab? Well, the Activities component isn’t supported on a phone, so it was dropped from the page. And, since that caused the Activity tab to be empty, it was dropped from the page too.

    Toward the bottom is the component that appeared when you updated the opportunity to be over a million dollars. But right below it is something we didn’t see when we looked at the page on desktop: the mobile-only component.

You did it! You’ve taken your first steps into a larger world.

Let’s move on to app pages.

(Video) Build a Custom Record Page Lightning Experience and the Salesforce Mobile App-Lightning App Builder

Resources

  • Create and Configure Lightning Experience Record Pages
  • Add and Customize Tabs on Lightning Pages Using the Lightning App Builder
  • Dynamic Lightning Pages
  • Lightning App Builder Considerations
(Video) Build an App Home Lightning Page - Lightning App Builder

FAQs

What is a Lightning app builder? ›

The Lightning App Builder is a point-and-click tool that makes it easy to create custom pages for the Salesforce mobile app and Lightning Experience, giving your users what they need all in one place. The Lightning App Builder is also a one-stop shop for configuring Lightning apps.

How do I get Lightning app builder? ›

Required Editions. You can access the Lightning App Builder from Setup by entering Lightning App Builder in the Quick Find box and then selecting Lightning App Builder.

What does the Lightning app Builder allow you to make? ›

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.

How do I enable Lightning app builder in Salesforce? ›

  1. To open your app page, from Setup, enter Lightning App Builder in the Quick Find box, select Lightning App Builder, and then click Edit next to the page.
  2. In the Lightning App Builder, click Activation.
  3. Update the activation properties, if desired. ...
  4. Add the page to one or more Lightning apps.

Is Lightning a programming language? ›

In its simplest form, Lightning is an open-source framework used for developing TV applications. Lightning is based on the JavaScript programming language, using high-performance WebGL for rendering and is created by Metrological. Lightning was built to deliver a premium user and Connected TV app experience.

What's a key benefit of Lightning apps for your users? ›

What's a key benefit of Lightning apps for your users? Users can create records and access recent records and lists directly from the navigation bar.

What is app builder in LWC? ›

Last Updated on January 21, 2022. The lightning app builder is a point and click tool to create a single page application for Salesforce1 and Lightning Experience. Simply drag and drop the components into the builder layout to build the application.

How do I make my own Lightning homepage? ›

Create a New Home Page Using Lightning App Builder
  1. From Setup, enter Lightning App in the Quick Find box and select Lightning App Builder.
  2. Click New.
  3. Select Home Page, then Next.
  4. Assign the label Support Home Page , then click Next.
  5. Click the Standard Home Page template.
  6. Click Finish.

Which browser does not support SLDS? ›

Desktop and Laptop Browsers
Microsoft® Internet Explorer®Google Chrome™
Lightning ExperienceNot supportedSupports latest stable browser version
Experience Builder sitesNot supportedSupports latest stable browser version
Special setup considerations?Not supportedNo
Limitations?YesNo

What can you include in a Lightning app? ›

In Lightning Experience, Lightning apps give your users access to sets of objects, tabs, and other items all in one convenient bundle in the navigation bar. Lightning apps let you brand your apps with a custom color and logo. You can even include a utility bar and Lightning page tabs in your Lightning app.

What is Lightning experience in Salesforce? ›

Salesforce Lightning Experience is a modern, capable user interface (UI) that empowers sales representatives and service representatives to sell more faster and support customers more efficiently.

What is Lightning component in Salesforce? ›

The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It's a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

How do I deploy Lightning app in Salesforce? ›

Create a New Page for Your Component
  1. To open your org, use SFDX: Open Default Org from the Command Palette in VS Code.
  2. In Setup, enter Lightning App Builder in the Quick Find box and then select Lightning App Builder.
  3. Click New.
  4. Select App Page and click Next.
  5. Give it the label Bike Card and click Next.

What is app builder? ›

An app builder is an online software tool that allows everyone to create and publish apps for mobile devices without code development. It's a turnkey solution to make mobile apps for people who don't have technical knowledge, by using a simple visual editor.

How many types of Lightning pages are there? ›

Lightning Page Type

The four options are App Page, Home Page, Record Page, and Embedded Service Page.

What code is Salesforce written in? ›

Apex: Salesforce's proprietary programming language with Java-like syntax. Visualforce: A markup language that lets you create custom Salesforce pages with code that looks a lot like HTML, and optionally can use a powerful combination of Apex and JavaScript.

How do I code an app? ›

How to Code an App for Android
  1. Get the Android app development tools you'll need. To begin, set up your development environment so that your PC is prepared to meet your Android development objectives. ...
  2. Choose between Java and Kotlin for app coding. ...
  3. Familiarize yourself with the files. ...
  4. Create your own Android app.
1 Feb 2022

How do I create a custom app in Salesforce? ›

Steps To Setup The App
  1. Click on Setup button next to app name in top right corner.
  2. In the bar which is on the left side, go to Build → select Create → select Apps from the drop down menu.
  3. Click on New as shown in the below screenshot.
  4. Choose Custom App.
  5. Enter the App Label. ...
  6. Choose a profile picture for your app.
21 Feb 2022

How do I edit an app in Salesforce Lightning? ›

on a Lightning app's row, and select Edit. Here are some things you can do from the App Settings tab. Change your app's name, primary color, and logo. Override the org theme with your app's brand image and nav bar color.

How is Lightning experience different from Salesforce Classic? ›

What is the difference between Salesforce Classic and Lightning? Salesforce Lightning has a new and improved interface whereas Classic sticks to the tried-and-trusted Salesforce formula. Lightning also comes with improved features such as an activity timeline and workplace page layouts.

How do you use LWC in Lightning app Builder? ›

How To Add LWC To Record Page
  1. Go to the record page you want to add the LWC to. If you want to add an LWC component to the account record page navigate to an account record. ...
  2. Edit the Metadata for the LWC component. To make a Lightning web component available for record pages we need to edit the associated metadata file.
18 Apr 2022

What are decorators in LWC? ›

Decorators dynamically alter the functionality of a property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components. @api: It is used to expose a variable or functions publically and make properties reactive.

How do I view my lightning app? ›

You can view all the apps in your org from the App Manager. In Lightning Experience Setup, enter App in the Quick Find box, then select App Manager.

What is the difference between app page and home page in Salesforce? ›

The Home Page is kind of like the standard Salesforce Home page for all Apps, except it doesn't actually have to be included in all Apps, (so the definition is blurry). An App Page is just a single, static page, (lacking a record detail) that you can customize and put anywhere.

What is lightning app page in Salesforce? ›

A Lightning page is a custom layout that lets you design pages for use in the Salesforce mobile app or Lightning Experience. Lightning pages occupy a middle ground between page layouts and Visualforce pages. Like a page layout, Lightning pages allow you to add custom items to a page.

What is the best browser for Salesforce lightning? ›

Although we recommend using the latest browsers, older versions of Chrome, Firefox, and Internet Explorer should work with Salesforce Maps. However, running Salesforce Maps on significantly older versions of these browsers may cause unpredictable performance.

What is the best browser to use with Salesforce? ›

We recommend the latest versions of Chrome, Firefox, Internet Explorer and some other browsers for using Salesforce.

Can we use SLDS outside Salesforce? ›

No. The Salesforce Lightning Design System is a pure CSS framework that you can use with any front-end development framework you'd like, including Salesforce-specific technologies such as Visualforce and Lightning, as well as third-party frameworks like React or Angular.

What is app builder? ›

An app builder is an online software tool that allows everyone to create and publish apps for mobile devices without code development. It's a turnkey solution to make mobile apps for people who don't have technical knowledge, by using a simple visual editor.

What is app builder in LWC? ›

Last Updated on January 21, 2022. The lightning app builder is a point and click tool to create a single page application for Salesforce1 and Lightning Experience. Simply drag and drop the components into the builder layout to build the application.

What is Lightning experience in Salesforce? ›

Salesforce Lightning Experience is a modern, capable user interface (UI) that empowers sales representatives and service representatives to sell more faster and support customers more efficiently.

What is Lightning component in Salesforce? ›

The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It's a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

Which is the best app builder? ›

GoodBarber is an app builder created in 2011, delivering a tool which allows to create robust and powerful apps, with the best design and user experience out there. With GoodBarber, you can make native iOS apps, native Android apps, and Progressive Web Apps, which are the latest, most advanced mobile technology.

Can I make app without coding? ›

Learning to code isn't necessary for app development. Anyone can build an app without coding. All you need to do is find the right app builder to accommodate your needs. Then it's just a matter of learning to use that platform, adding your features, and customizing the look and feel of the app with your own branding.

Which is the best free app builder? ›

Best App Builders
  1. BuildFire. BuildFire is the leading platform in the most reliable app builders market. ...
  2. Appy Pie. Appy Pie is a popular app builder that allows beginners to build apps to meet their business or personal goals. ...
  3. GoodBarber. ...
  4. Mobincube. ...
  5. Shoutem. ...
  6. Swiftic. ...
  7. AppInstitute. ...
  8. AppMaster.
17 Jun 2022

How do you use LWC in Lightning app Builder? ›

How To Add LWC To Record Page
  1. Go to the record page you want to add the LWC to. If you want to add an LWC component to the account record page navigate to an account record. ...
  2. Edit the Metadata for the LWC component. To make a Lightning web component available for record pages we need to edit the associated metadata file.
18 Apr 2022

How do I create a new app in Salesforce? ›

From Setup, enter Apps in the Quick Find box, then select Apps. Click New. If the Salesforce console is available, select whether you want to define a custom app or a Salesforce console. Give the app a name and description.

What are decorators in LWC? ›

Decorators dynamically alter the functionality of a property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components. @api: It is used to expose a variable or functions publically and make properties reactive.

Is Salesforce Lightning a CRM? ›

What Is Salesforce Lightning? Salesforce Lightning is the next generation of the CRM platform and user experience. With a convenient new design, more productivity tools, AI functionality, Lightning assists in streamlining business processes.

What is the difference between Salesforce and Salesforce Lightning? ›

New Design One of the major differences between the old and the new version of the salesforce is the User Interface. The Salesforce Lightning offers a better UI experience to its users as it includes features like news about key accounts and deals and performance charts, which were unavailable in the Classic version.

What is the advantage of Salesforce Lightning? ›

Why is Lightning used in Salesforce? With the help of Salesforce Lightning components, a company can speed up app development and performance. One can develop custom components that can be utilized by other team members for personalizing the Salesforce mobile application and lightning experience.

Is lightning an MVC framework? ›

The Lightning Components framework follows the Model, View, Controller (MVC) paradigm. The component file provides the view layer, the JS controller and helper files provide the controller part, and the controller interacts with the Salesforce server via Apex.

What is Aura and LWC? ›

Aura-based Lightning components are built using both HTML and JavaScript, but LWC is built directly on the Web stack. A developer who works on LWC is not only using coding skills on a particular framework but in other frameworks like React or Angular, which are based on the Web Stack.

How many types of lightning components are there? ›

There are three different types of Lightning Components you should know about.

Videos

1. Salesforce Trailhead - Get Started with the Lightning App Builder
(Your Codding Buddy)
2. Build a Custom Home Page for Lightning Experience - Lightning App Builder
(Virtual Guide)
3. Lightning App Builder - Add more components - Salesforce - Trailhead
(Bumblebee)
4. Build a Custom Home Page for Lightning Experience | Lightning App Builder | Salesforce
(wonder studies)
5. Build Your First Custom App On Salesforce
(Salesforce Developers)
6. Creating a Salesforce Lightning App in 12 Minutes
(Mike Wheeler Media)

Top Articles

You might also like

Latest Posts

Article information

Author: Gregorio Kreiger

Last Updated: 11/20/2022

Views: 5299

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Gregorio Kreiger

Birthday: 1994-12-18

Address: 89212 Tracey Ramp, Sunside, MT 08453-0951

Phone: +9014805370218

Job: Customer Designer

Hobby: Mountain biking, Orienteering, Hiking, Sewing, Backpacking, Mushroom hunting, Backpacking

Introduction: My name is Gregorio Kreiger, I am a tender, brainy, enthusiastic, combative, agreeable, gentle, gentle person who loves writing and wants to share my knowledge and understanding with you.