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 ExperienceI 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.

[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.

  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.

Lightning-App-Builder-1

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.

Compact-Layouts-LEX

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

Admin Hero Lightning Components and Record Pages Trailmix
Click the image to get started with this 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!

17 thoughts on “ Getting Started with Lightning Components and Record Pages ”

  1. Brent, thank you so much! We are looking to transition early next year so this is super helpful. Our org is huge with over 30k+ users (8k+ client facing). So you can imagine this will not be easy. We have been waiting for various LEX changes that are all basically in by Winter’18 release so we have no more excuse to hold off. Keep these coming please. Thank you so much I truly appreciate it.

    V

    Like

  2. Brent – I think you may have been confused by the subtle difference between the related list component and the Related lists component..

    You say that “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. ” This component adds all the object’s related lists (as defined int he Page Layout Editor)

    The Related List (no “s”) component allows you to select one related list to display anywhere you want to on the page

    You appear to have swapped the descriptions around…

    Like

      1. …and I see that when Winter’18 comes out, the opportunity for confusion will be further reduced. The “Related List” component is being renamed to “Related List – Single”

        Like

  3. Brent – awesome write up and incredibly helpful! Curious if you have found a way to Clone a Lightning Record Page (specifically an Opportunity Record Page)?

    Like

    1. Sandy – I don’t know of an admin-friendly way in the UI to do this. I think you will need to use Metadata API to create a copy of an existing Lightning Record Page.

      A free tool like Force.com IDE can help you export metadata of type “FlexiPage” then locally you would create and rename copies of the original page. After saving the new metadata back to Salesforce then you can open those pages in App Builder and assign them. You will find the list of all Lightning Pages in Setup at https://.my.salesforce.com/_ui/flexipage/ui/FlexiPageFilterListPage

      Hope that helps!

      Doug

      Like

  4. My work around for “cloning” a Lightning Record Page – > use a Change Set to send the Lightning Record Page you want to use as your “base” to your Dev Org, tweak, send back to Production via Change Set with new Name….

    Like

    1. So, there are two different views that you’ll manage with LEX: the Standard page Layout Editor (like what you have in Classic to manage the field arrangement and sections), and the Lightning Page Builder. Both work in conjunction. The Classic page layout can still be viewed by profile. If the Lightning page needs to differ by profile, then you would create a page per profile and use the Assignment button to assign the Lightning page to the correct profiles.

      Like

  5. We’re working with lightning now and it’s great. I just used related records to create tabs for what was a very long account layout. Now it’s broken up and much easier than scrolling. However, we have one piece that resides in a visual force page and I don’t see how I can add a VF page to a related record. Is there a solution?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.