Getting Started with Lightning Components and Record Pages

Getting Started with Lightning Components and Record PagesWhat 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.

Component NameDescription
App LauncherThe 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.
ChatterUse this component to place a publisher and feed combo on a record page.
Chatter FeedUse 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 PublisherUse 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 ListThe 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 PanelThe 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 ItemsThe 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 DetailThe 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 ListUse 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 RecordUse 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 ChartUse 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 TextUse the Rich Text component to add text and simple HTML markup to your Lightning page.
Skype for BusinessThe 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.
TabsUse 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 PageUse the Visualforce Page component to include a Visualforce page in your Lightning page.
Wave Analytics DashboardUse 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.

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!

Load More Related Articles
Load More In Lightning Experience

12 Comments


  1. Vedrana Madiah

    August 21, 2017 at 9:18 am

    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

    Reply

    • Brent Downey

      August 24, 2017 at 9:03 am

      Awesome! Well, the transition won’t be easy, but hopefully, it will be fun and allow you to help the org rethink how Salesforce is used!

      Reply

  2. Stephen Stanley

    August 21, 2017 at 5:43 pm

    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…

    Reply

    • Brent Downey

      August 24, 2017 at 9:02 am

      Thanks for the heads up, Stephen! This has been fixed.

      Reply

      • Stephen Stanley

        August 24, 2017 at 2:53 pm

        …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”

        Reply

        • Brent Downey

          August 25, 2017 at 7:55 am

          Yeah, I noticed that too! I contemplated including that here, but decided I’d update the post when Winter 18 comes out officially!

          Reply

  3. sandy kennedy

    August 25, 2017 at 3:15 pm

    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)?

    Reply

    • Doug Ayers

      August 26, 2017 at 10:16 pm

      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

      Reply

    • Brent Downey

      August 31, 2017 at 8:10 am

      There’s an idea on the IdeaExchange about this. Here’s the URL – go vote it up! https://success.salesforce.com/ideaView?id=0873A000000E5knQAC

      Reply

  4. sandy kennedy

    August 31, 2017 at 11:29 am

    Thanks to both of you, Doug & Brent! Have Voted Up – would appreciate other’s support as well.

    Reply

  5. sandy kennedy

    August 31, 2017 at 2:16 pm

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Sponsors