What excites me most about Lightning Experience is the flexibility of the user interface. With its module design, and the ability to assign pages at a granular level, users will notice an improved navigational experience, and quick access to critical data elements (assuming you know how to modify the user experience in Lightning).
But, unlike Classic, there are more layers to manage in Lightning. With flexibility comes a layer of complexity. Perhaps this is because the transition from Classic to Lightning is still underway and both systems are not yet fully unified in Setup, or perhaps it’s just the inherent tradeoff to modularization of the UI. Either way, it’s important to learn and play with all elements of Lightning so that when issues arise, you know where to look.
In Customizing Salesforce’s Lightning Experience, I took a high-level look at how to customize the look of feel in Lightning. A lot had changed in Lightning since publishing that post in 2016 (and I’ve implemented several Lightning orgs since then too!), so this post will take a fresh new look at the elements that control the UI.
Lightning Experience is flexible because of its modular design. Elements of a page can be manipulated in their arrangement because they are now available as components. Lightning Components are part of the Lightning user interface which represents “…self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app.” (Source)
Salesforce provides many components out of the box which can be used to create your very own custom user interface. This table outlines the currently available standard components.
[table id=7 /]
This simple set of components allows for an extreme amount of creativity. In addition to the standard components, admin’s can further customize the interface by installing free and paid components from the AppExchange, or by building custom components with the help of a developer. Note that, to install components from the AppExchange, My Domain needs to be enabled for the org.
Now that we have an idea of what our available building blocks are let’s see take a look at the foundation they rest on: Lightning Record Pages.
Lightning Record Pages
These unique record pages are similar to the traditional page layouts in Salesforce Classic, except that Lightning Record Pages sit at a level above Classic’s traditional page layout editor. (I’ll explain this a bit later.) These unique pages provide a framework and template for the Lightning Components. When combined, Lightning Components and Lightning Record Pages drive 90% of the user interface.
“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. However, these items, instead of being Visualforce components, are Lightning components, which allow much more flexibility.” (Source)
These pages can be used to create an App Page (which is like a one-page dashboard/homepage hybrid – fully customized by you), Record Detail Pages, and Home Pages. The focus of this post is a typical record page, but all of the other pages get created similarly.
At this time, there are eight templates to choose from! So, if you want a 3 column layout for your Opportunity page, guess what – you can do that! Or, if you prefer to create a more traditional design to mimic Classic, you can (but I’m not sure why you would)!
Lightning Record Pages are assigned to users by Application, Profile, and or Record Type which means that you can further tailor the page to a particular group of users. Exciting, right?!
Here are the steps to creating Lightning Record Pages.
- Navigate to Setup and using the Quick Find search box, type in Lightning App Builder. Note, you can also navigate to the Object in Lightning, and click Lightning Record Pages.
- Click NEW to create a new page.
- Select Record Page to create a custom Opportunity layout. Click Next.
- Give the page a name (I usually do LEX_Opportunity or something similar) and choose the object this layout will be for.
- Select the desired template for this layout and click Finish.
Once the setup wizard is complete, you’ll be redirected to the Lightning App Builder where you can customize the template using Lightning Components!
Lightning App Builder
The App Builder is a drag and drop interface that allows Administrators to create using a templated canvas and Lightning Components. There are 4 key elements to the Lightning App Builder page.
Toolbar – the toolbar, which spans across the top of the page, provides the abilities to undo or redo an action, copy or paste a setting, preview, and refresh the page, and save and assign the page to users.
Components – the left navigation shows the list of available components (both standard and custom) which can be used on the Lightning Record Page. Use the search box at the top to enter a keyword and find the right component for the job.
Component Canvas – the center of the page is where you drag the components to. Every element you see in the screenshot above is an example of what the UI will look like with the various components on the page. Remove all the components in this screenshot, and you’re left with a blank template.
Component Properties – this area is used to refine or define various components. For example, if you’re using the Related List (singular) component, the Component Properties panel is used to define which related record to look up to. Or, if you add tabs to the page, use this properties panel to define the order the tabs display in, and even the tab names that should display on the page.
Highlights Panel, Record Detail, and Related Lists
While the Lightning App Builder and Lightning Components drive most of the layout, there are still some elements of the Lightning Record Page that are customized elsewhere. Those items include the fields displayed in the highlights panel, the field arrangement of the record detail, and the order of the related lists if you’re using the Related Lists (plural) Lightning Component.
The key fields that display at the top of any record with the Highlights Panel component, are driven off of the object’s Compact Layout. If you’re an Administrator in an org using Salesforce Classic, you may be familiar only with Compact Layouts if you’ve deployed Salesforce1. Compact layouts display information for users in the following areas:
- Highlights Panel on Record Detail pages in Lightning Experience.
- Key Fields in Salesforce1.
- Fields displayed when a record is created through Chatter Publisher.
- An object’s preview cards.
Ensuring that the Compact Layout is accurate, and provides the most helpful information is vitally important because they drive a lot of functionality across the org – both in Salesforce Classic and Lightning Experience.
Fields and field arrangement in Lightning Experiences is still managed through the traditional page layout editor that we’re all familiar with. When adding the Record Detail Lightning Component to the Lightning Record Page, Salesforce is displaying the fields, with their appropriate groupings, exactly as they show on the traditional page layout.My wish is that we’ll have the ability to create Record Detail Groups where fields can be grouped
My wish is that we’ll have the capacity to create Record Detail Groups where fields can be arranged and made into their component. This would provide the maximum level of page customization because fields could then be split up around the page, and even grouped into Tabs on the layout.
Field level security is not affected and will not be impacted based on your assignment of the Lightning Record Page.
Related lists are slightly different in that they represent the hybrid style customization I long for with fields. There are two Lightning Components available for this area of Salesforce: Related List, and Related Lists. Notice the subtle difference?
The Related List component displays the related list as it is configured in the page layout editor. Much like the Record Detail component, it’s a single block which mimics the setup in Salesforce Classic.
The Related Lists component, however, allows you to add a single related list to the Lightning Record Page, and select which related list to display. So, Admins now have the ability to place related lists in specific groupings that make sense for the org. I’ve leveraged this component for a client to group related lists into separate tabs on the Lightning Record Page for better contextual navigation.
So, with all of this configuration goodness, what type of record pages will you design? What are your favorite Lightning Components and Record Page templates? Drop a comment below!
Admin Hero Trailmix
If you want to get hands-on with the concepts outlined in this blog post, check out the Admin Hero – LEX Components & Record Pages custom Trailmix where you’ll learn more about these and other related concepts!