The Lightning Experience enables Salesforce Admins to redesign the user experience and business processes within their org. The Lightning App Builder is one of the best features in Lightning because it gives Admins the power to configure the Salesforce UI using clicks, not code. Designing your Lightning Pages to fit your business users’ needs dramatically enhances their productivity. You can also get your creativity flowing as you design your pages. Let’s get to know the Lightning App Builder and see what all of this is about.
Internet Creations hosted a webinar titled “Become a Master Builder with Lightning App Builder” presented by yours truly, Benjamin Bratcher, Salesforce Consultant, and Lightning Champion. You can watch the webinar On-Demand here. If you would prefer to read through the content, please continue with the blog. The key things you will learn below are Lightning App Builder basics, customizing the UI for desktop and mobile, extending the possibilities with the AppExchange, Lightning App Builder best practices, and the new Summer ‘20 features, Dynamic Forms & Actions.
The UI in the Lightning Experience consists of Lightning Pages, which are made up of regions containing Lightning Components. The Lightning App Builder is used to create these Lightning Pages. It is worth noting that Lightning Pages are called FlexiPages in the Metadata API, which you might come across if you do any development or use CI/CD tools.
You have two options to access the Lightning App Builder.
Before we review the steps needed to build a Lightning Page, let’s discuss some design principles to consider to create the best user experience possible.
Make sure to prioritize the most important information for the user by placing it in organizational components such as a tab or accordion (sections organized vertically). You can also prioritize information by placing it in the main region so that it is front and center. Furthermore, choose your templates based on the components you want to prioritize and the use cases for your pages. For example, if I want to prioritize the Chatter component, it would make sense to choose a template with a sidebar.
Customize every page for your business rather than using the default pages. Every business uses objects differently, so make sure to customize the UI to your needs. Keeping this in mind will create a much better user experience because it is customized to the way they use Salesforce.
Design your Lightning Pages efficiently to minimize load time (for more on measuring performance, click here) and increase users’ productivity. You can do this by being strategic about what components to place on default tabs or accordions or directly on the canvas. For example, you don’t need the full related list to load every time a record is open, so why not place it behind a non-default tab so that it only loads when the user really needs to view it. This concept is called lazy loading. Only the components that are visible will load initially.
Another way to design efficiently is to surface information only when needed. You can do this using component visibility or if you are using Dynamic Forms using field or section visibility. For example, if you are using Internet Creations’ Case Flags app, it would make sense to only show the Case Flags component whenever a flag is actually set on the case record. Just add component visibility to the component so that it only shows up when a flag is set.
As of Winter ‘20, Salesforce has completely redesigned the mobile experience and given Admins a lot more flexibility. The mobile app now uses Lightning Pages, so don’t forget to design your Lightning Pages for mobile. In fact, you should design for mobile with “micro-moments” in mind. Consider how your users might use desktop and mobile differently. Mobile use cases often consist of smaller and quicker tasks, so make sure to configure the page to be conducive to the mobile experience. Also, make sure the components you use are optimized for mobile. Otherwise, you can use components visibility to filter by form factor to show components only for certain devices.
The first step in building a Lightning Page is to select the type of Lightning page you want to create. The four options are App Page, Home Page, Record Page, and Embedded Service Page.
Select App Page to build a one-page app for Lightning Experience and mobile, often for internal or third-party apps that want a landing page. An App Page is great for custom Lightning Components that work together, but aren’t specific to one object or the home page.
A Home Page provides information to users at a glance when they click on the home tab. Think of it as a landing page to give your users updates on their performance (e.g. Performance or Dashboard components) and on the items they need to take action on (e.g. Items to Approve, Today’s Tasks, Today’s Events).
A record page represents the user interface for records of a chosen object in the Lightning Experience and mobile. You can customize the record page to fit your users’ needs.
The Embedded Service Page only associates with the “Service Appointment” object, so this option will only show up if you have Field Service Lightning enabled.
At this point, you select a label for your Lightning Page. You want to make sure to choose a label that allows you or other Salesforce Admins to easily identify what the page is used for. As a naming convention for record pages, I like to use: “Object Page Type (Additional Information)”. For example, if I am creating a record page for the case object that I plan to assign to the RCP Console app, I would name my page “Case Record Page (RCP Console)”.
For App Pages or Home Pages, I like to use the naming convention of “Page Type (App Name/Profile)”. For example, for an App Page that allows you to explore different properties, you might label it “App Page (Property Explorer)” and for a Home Page for the System Administrator profile, you might label it “Home Page (System Administrator)”.
If you are creating a Record Page, this is where you would select the object that you are creating the page for.
Page templates provide a base-level of organization for the Lightning Page. Generally, page templates are broken down into different regions. Most templates consist of a combination of a Header, Subheader, Sidebar, Main Region, and/or Multiple Regions.
If you select “Choose Page Template”, you are provided with several different configurations that you can choose from that allow you to start from scratch with a blank framework. If you select “Clone Salesforce Default Page”, you keep the components from the default page. When you click on a template, you get a preview on the right side to show you what it would look like.
Picking the right template is important because it acts as the framework that you then build from. Consider the components that you want to highlight in your design and choose a template that is conducive to this. For example, if you want to highlight the Activity or Chatter components, choose a template that includes a Sidebar. Keep in mind that you are able to change templates on existing Lightning Pages once you have chosen one, so there is some flexibility there and you aren’t bound to one.
If the standard templates don’t meet your requirements, you have the option to create a custom Lightning Page Template if you have a developer with knowledge of Aura at your disposal. For example, a client at Internet Creations wanted a template that was a 50/50 split with both sides scrolling, so one of our developers built it for them. For more information on building custom templates, see “Create a Custom Lightning Page Template Component” in the Lightning Aura Components Developer Guide.
Lightning Components make up the content on the Lightning Pages. You simply drag the components onto the canvas in the Lightning App Builder to start building your Lightning Page. Standard components are Lightning Components that were built by Salesforce, whereas custom components are either created by a developer or part of a managed or unmanaged package from the AppExchange.
Certain standard components are only available on certain page types. I won’t cover all standard components, but wanted to highlight some of the components that I find most important. For a full list of standard Lightning Components, check out the “Standard Lightning Page Components” article in Salesforce Help. For examples of how to configure some of the standard components, please watch the Building Lightning Pages demo from my webinar.
I like to group the standard components into different categories to have a better understanding of what they are used for. The components in the organization category can be used to organize other components to create a page that is easier to use. Components in the productivity category can be used to give users helpful tips and actions that they can take. Collaboration components show your collaboration both internally or externally. Functionality groups components together that have a specific type of functionality. Objects categorizes components that are specific to information on objects, whether that’s the details or related information. Lastly, the Analytics/Automation/UI category is a catch-all for all components that are specific to those. Note: this list is not exhaustive and only includes select standard components.
Organization | Accordion Tabs |
Productivity | Actions and Recommendations Einstein Next Best Action Path Recent Items Recommendations |
Collaboration | Activities Chatter Topics |
Functionality | Highlights Panel List View Company Hierarchy Event Insights Potential Duplicates Rich Text |
Objects | Record Detail Related Lists Related List – Quick Links Related List – Single Related Record Knowledge Quip |
Analytics/Automation/UI | Einstein Analytics Dashboard Dashboard Report Charts Flow Visualforce |
If the standard components don’t provide the functionality you are looking for, you can either ask a developer to create a custom component for you or find components on the AppExchange. Creating a custom component requires a developer with knowledge of either the Aura or Lightning Web Components (LWC) framework. Furthermore, My Domain must be enabled. With custom Lighting Components, you can greatly extend the possibilities by creating functionality that is specific to your use case.
Custom components can also come from a managed or unmanaged package from the AppExchange provided by Salesforce or Salesforce Partners. Often, these apps allow you to scale more quickly since you don’t have to develop the component yourself and you can utilize the expertise of Salesforce Partners, which can often be more cost-effective. There are both free and paid options available on the AppExchange.
Certain Lightning components work better in certain template regions. Of course, it is completely up to you how you want to design your page, but these are some best practices that I have developed when it comes to deciding in what region to place components. Please keep in mind that the design principle of prioritizing important information should always be considered first.
Component visibility allows you to determine when a component should be visible to the user. This feature is useful because it allows you to display components only when the information is relevant to the user. You control component visibility by adding filter conditions and logic to its properties in the Lightning App Builder. Just click on a component and the properties pane will display its properties including Component Visibility.
There are three filter types that you can choose from. These include Record Field, Device, and Advanced. The Record Field option allows you to choose a field on the object you are creating a record page for, then select an operator and a value. The Device option filters by form factor of desktop or phone, so that the component only appears for a certain device. The Advanced option allows for additional filter options either by record field or related record field (spanning up to 5 fields), permissions, user, or device. Once you have added all filters, make sure to configure the filter logic too. You can set it to show the component when “All filters are true”, “Any filters are true”, or a custom filter logic is met.
As previously discussed, you can set component visibility so that the component only shows up if you are on a certain device. On top of that, you can change the display in Lightning App Builder between different form factors such as desktop and phone. Changing the form factor allows you to design the Lightning Page for different form factors and ensure that it works well on any device. It is worth noting that certain components are only visible on certain devices, so make sure to use components optimized for mobile if you are designing for mobile. If the difference between desktop and phone becomes too complex, it might be worth creating separate Lightning Pages for both form factors since you can activate pages for specific form factors.
Note: The form factors Tablet (Landscape) and Tablet (Portrait) are only available on App Pages.
When you are ready to activate your Lightning Page, click on the “Activation” in the top right. You have three options when it comes to activating your page. You can assign the Lightning Page as the Org Default, App Default, or for a specific App, Record Type, and Profile combination. It is important to note that the more specific levels of activation assignments override the broader assignments. For example, an assignment for App Default overrides the Org Default.
You can click the “Check your assignments” link to more easily see what Lightning Pages are assigned.
Whenever you have selected your type of assignment, you also must select your form factor. You can activate the page for Desktop and phone, Desktop, or Phone.
Dynamic Forms (Non-GA Preview) and Dynamic Actions (Beta) are new features being released in Summer ‘20 that allow you to split the details of a record into separate sections and control and filter the actions from the Lightning App Builder. These features will eventually allow users to move away from a dependency on the page layout allowing them to control the fields and actions from the Lightning App Builder.
In order to activate Dynamic Forms, navigate to Setup and search for “Record Page Settings”. Once there, toggle the switch to turn on Dynamic Forms.
Once this setting has been activated, a new tab will appear in the Lightning Components Pane of the Lightning App Builder. The “Fields” tab (1) allows you to drag and drop a “Field Section” onto the canvas and place individual fields into that section. This way you can build out your record detail from scratch.
The other option is to click on the “Record Detail” component and click “Upgrade Now” to walk through the wizard (2). In the setup wizard, you choose the page layout you want to turn into dynamic forms and Salesforce does all the work for you by dividing each of your sections on the page layout into Dynamic Form field sections and optionally placing them into an accordion component.
Regardless of how you create the field sections, you can move them anywhere you want on the canvas. This new feature is highly anticipated and ranked as the #1 idea on the IdeaExchange. The possibilities are endless in terms of how you might want to customize your Lightning Page using Dynamic Forms.
The options become even more exciting when you take different functionality with Dynamic Forms into accounts. It is possible to set the UI Behavior of individual fields. The options available are None, Read Only, or Required. Just click on the field and customize the UI Behavior on the Properties Pane. You also have the option to set field visibility, which is similar to component visibility, only for the individual field. The visibility can be set based on record fields, user fields, or permissions.
The user experience of field visibility is excellent. You just change the criteria to meet the field visibility filters and the field instantly appears. If the criteria does not match the filters, then it disappears. None of this requires the page to reload. I can think of countless implementations of this functionality. For example, you might have a checkbox that displays other fields if it is checked. That way, the additional fields only appear when they are relevant to the user.
Field Sections can be customized by adding a label and choosing whether to display the section with one or two columns. You can also set component visibility on field sections. This experience is the same as the component visibility functionality we mentioned earlier in the post.
Dynamic Actions allow you to add individual actions to the Highlights Panel component and add in action filters. You can enable Dynamic Actions by going to the Highlights Panel component and check “Enable Dynamic Actions”. Once you do this, the actions that were configured on the page layout disappear. You must then add actions individually. The Action Visibility setting is fantastic because you can filter either by record field, device, user field, or permission, which allows you to be more flexible with your actions. For example, in the screenshot below, I set the Submit for Approval action to only be visible if the Approval Status is either Not Submitted or Rejected.
The roadmap is subject to change and Salesforce recommends only making purchasing decisions based on features that are generally available (GA). As of the Summer ‘20 release, Dynamic Forms (Non-Preview GA) and Actions (Beta) are only available on desktop for custom objects. Salesforce is anticipating these features to be GA for desktop and custom objects in Winter ‘21 (safe-harbor). In Spring ‘21, Salesforce plans to add the functionality to standard object support. In Summer ‘21, mobile support will be added.