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 Components

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.

Component Name	Description
App Launcher	The App Launcher displays a user’s available Salesforce apps and the connected apps the administrator has configured. Users navigate between apps using the App Launcher.
Chatter	Use this component to place a publisher and feed combo on a record page.
Chatter Feed	Use the Chatter Feed component to place a feed anywhere on a record page. The feed gives you a way to view posts, comments, and questions. Its attribute, Feed Type, takes one of these values. Bookmarked—shows a feed of all items the current user has bookmarked. What I Follow—shows a feed of all items the current user has followed. To Me—shows a feed of all items where the current user is mentioned. No coding is required to join a feed to a publisher.
Chatter Publisher	Use the Chatter Publisher component to place a feed publisher anywhere on a record page. The publisher gives you a way to post, poll, or ask a question in a feed. Its attribute, Type, always takes the value Global. Use the Chatter Publisher component with the Chatter Feed component to get a full feed experience. No coding is required to join a publisher to a feed.
Filter List	The Filter List component points to a list view and displays the first few records from that view. It supports all public and shared list views that are associated with standard and custom objects, except: Activity ContentVersion (Files) Task User UserProfile
Highlights Panel	The Highlights Panel component displays key record fields along with quick actions. The fields that appear in the highlights panel come from the compact layout assigned to the object. The actions in the highlights panel come from the Salesforce1 and Lightning Experience Actions section of the page layout.
Recent Items	The Recent Items component displays a list of the most recently used items. The default is three, but you can set it to show a maximum of 30. In the Lightning App Builder, you can specify which objects’ records appear in the recent items list.
Record Detail	The Record Detail component displays fields and sections from the page layout associated with the object. When users view the Lightning record page, they may see different fields and sections based on their profile and page layout assignments.
Related List	Use the Related List component to include a single related list for a record in your Lightning page. To include all related lists for a record, use the Related Lists component. You can configure this component to display a related list for the record associated with your page, or you can display information for the parent record. Using a parent record is optional.
Related Record	Use the Related Record component to display the details of a related record, including the details of a parent record in your Lightning page. This component provides your users with built-in record creation, inline edit, and the ability to unlink a record and link a new one. This functionality is possible because the component uses actions.
Report Chart	Use the Report Chart component to include a chart from a report in your Lightning page. If you leave the component’s Label field blank, the component’s label is derived from the report’s label.
Rich Text	Use the Rich Text component to add text and simple HTML markup to your Lightning page.
Skype for Business	The Skype for Business component adds Skype controls to standard and custom record pages that have at least one email field. The controls let you see who’s online, initiate audio and video calls, and chat.
Tabs	Use the Tabs component to add tabs to a region of your Lightning page. Choose from a set of standard tabs or create custom tabs to enhance record pages for your Lightning Experience users. The Tabs component is supported only for Lightning Experience record pages.
Visualforce Page	Use the Visualforce Page component to include a Visualforce page in your Lightning page.
Wave Analytics Dashboard	Use the Wave Dashboard component to include Analytics dashboards in your Lightning page. Contact Salesforce to enable the Wave Dashboard component for the Lightning App Builder.

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.

1. 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.
2. Click NEW to create a new page.
3. Select Record Page to create a custom Opportunity layout. Click Next.
4. Give the page a name (I usually do LEX_Opportunity or something similar) and choose the object this layout will be for.
5. 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.

Highlights Panel

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.

Record Detail

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

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!