Lightning Pages: Taking the Dev out of UI/UX

Customizing the Salesforce UI has traditionally been a job for developers.  It has also been a point of frustration for admins because of the limited out of the box features for displaying information.  The Salesforce releases in the past year have blown that paradigm away by introducing copious Lightning features and functionality that require no code to implement.  The Platform has taken tremendous strides to empower non developers.  There are so man options now that I wanted to take the time to review a few of my favorite features available that allow for easy UI/UX customizations.  By using one or more of these standard Components in your Lightning Pages, plus some admin ingenuity, you will be able to wow your end users and improve your personal brand as a Salesforce expert.

As I was drafting and evaluating the content for this post, I decided there was too much to cover in a single post so this will be the first of a few.

Component Visibility

is the single best feature available in Lightning Pages that help build dynamic pages to improve the interface and experience.  I strongly recommend spending extra time and research to on component visibility to gain a full understanding of the depth and breadth of how it can be used.

This has been a hot topic for Salesforce bloggers since it was introduced because people are constantly discovering new creative solutions that leverage component visibility.  The true power of this feature is realized when it is combined with other Lightning Page functionality.

Rich Text Components

may not seem like the sexiest feature in Lightning at first glance.  Once paired with component visibility you will be able to fulfill some of the oldest and most common user requests.

The most straightforward use case is to display static information on the screen for a user.  When implementing new features, I like to add contextual details about an object or page that provides a point of reference or definition to end users.  Adding a small detailed note to the top of the page on junction records allows you to educate users on the business and technical purpose of the records in that object.


One benefit that isn’t immediately realized is that it will also help future onboarding efforts.  This allows you to have in-app documentation that will decrease their ramp-up time and increase re-enforcement of training and knowledge transfer.

Pairing with Component Visibility will allow you to get your creative juices flowing.  Take a moment and think about the various UI requests you’ve received from users over the years…

  • “Can you show a message on the page when the quote is waiting for approval?  I want them to clearly see that it hasn’t been approved.”
  • “Can you display a thumbs up image on the page when an opportunity is Won and a sad face when it is lost?”
  • “When an asset is overdue for maintenance, we want to see an alert on the page… maybe a calendar with red X over it.”

Now that I’m writing these requests, it seems like most users want visual stimulation on a record when action is needed or an alert is needed.  This usually leads to a discussion about preventative measures, but that is for another article.

Related Record

is the upgraded solution to cross object formula fields.  Have you ever heard the request  “Can we just show Account fields on this record so it makes it easier for Joe’s team to finish processing” or something to that effect?  This component allows you to do that without replicating data on two objects.


Notice in the second option in image above: “Use this Case.”  Now you’re able to display fields from the current record in their own section.  This is a very powerful use case for the component.  One of the most frequently requested UI features is to hide a subset of fields on the record unless X scenario occurs.  Until now this request could never be met.

The component leverages Actions to function so make sure you are familiar with that functionality before implementing the component.

Related List – Single

allows you to breakup the traditional list of related records into consumable pieces to really build your own flavor into the page.  As your org grows and the data model expands so do the related lists on your objects.  This can potentially clutter the screen and make important data harder to find.  The single related list component allows to be strategic with how your information is displayed.

This component has a really cool additional feature which allows you to display related lists from parent records.   One common use case is while on a Case record.  We are now able to display the Opportunity related list from the Case Account.  Think about this for a minute and the power this provides…


I’m intentionally drawing this out so you think about it for a minute…




This gives customer service agents the ability to see potential deals in the pipeline for the customer they are serving right now.  If there is a big deal in a late stage and close to closing, they’ll know they can help bring the deal home by upping their service game.  This is HUGE for visibility across the company and allows everyone to know they are part of the sales process!

What’s next? Dive in!

Jump into Lightning head first and start getting your hands on these features by checking out the Lightning App Builder trail and specifically the Build a Custom Record Page for Lightning Experience module on Trailhead.   Once you’ve toured Trailhead and learned more about Lightning, check out the Lightning Experience Specialist Superbadge and give it a shot.

Hands-on learning is the best learning IMO and recommend it for everyone.

More Features

As I mentioned earlier, this was the first post of a few reviewing my favorite Lightning UI/UX features.  Next time I’ll dive more into Flow, Actions, and more examples to combine features to pull more value from the Platform.