Learn Lightning: Compact Layouts

One of the most exciting things about Lightning is that it helps your users find the information they need easier, with fewer clicks and a better UI. The next topic in our Learn Lightning series is how you can use compact layouts in Lightning to bubble the most important information to the top of the page in Salesforce.

I’ll be honest, mini page layouts and compact layouts were lumped into a category of “Things I’ll get to… eventually” in Salesforce. Mostly because I was trying to keep the mountain of user requests manageable and those felt like the ultra detail and finer points I didn’t have a chance to get to. And since Compact Layouts tied directly to Salesforce1- which a small part of my user base was using- I focused on wins that drove adoption to the broader set of users.

At some point, I remember seeing the highlights panel in Service Cloud, where you could add info to three panes and thought that was the bee’s knees. But that required creating console views for every user- and not every user like the console. So lots of work, little reward.

However, in Lightning, the compact layouts don’t require a console view. And sweet fancy moses do they make the page come alive!

First, let’s look at the org we use to manage podcasts. This is a podcast record in Classic.

It’s ok. Like a glass of lemonade on a warm summer day.

Check out the page view of the same record in Lightning.

Way cleaner. Like a glass of lemonade under a shade tree on a warm summer day.

Now, let’s check out that same record in Lightning with a custom compact layout.

That’s like a pitcher of lemonade under a shade tree on a warm summer day with all of your friends and a sprinkler with two dogs playing in the background!

The point I’m making is that you get information fast. With Lighting your users don’t have to search the page for relevant information- they get it at the top of the page, so they can consume it and continue on with their day.

How To Set Up Compact Layouts in Lightning

Now, let’s go through how to set up compact layouts in Lightning so you can do this yourself. I’m going to create a compact layout for my Guest object in my Wedding app so that I can see the most important info at the top of each Guest record page.

Step 1: From Setup, I go into the object manager and select Guest

Step 2: In my Guest object, I scroll down to find compact layouts. I click New to create a new layout.

Step 3: I give my new compact layout a label, name, and then select which fields I want to display. These are the fields that will appear at the very top of my Guest record page, so I pick the fields that are the most important to me and save it.

Step 4: Now that I’ve created my compact layout, I need to assign it as the default. I select Compact Layout Assignment and edit the assignment so that the primary compact layout is my Guest layout I just created.

Step 5: See it in action. I click on a guest record and – voila! – there is my new compact layout.

Lightning vs. Classic

In Classic, compact layouts were only used for Salesforce1 mobile experience. With Lightning, you can now create compact layouts for any object to bring the most important information at the top of a record page. The rest of the details are below, so users can still scroll down to see all the fields for the object. Compact layouts are one of the easiest ways we can customize our users’ experience in Lightning, almost like mini page layouts. What compact layouts have you created in Lightning? Show me your screenshots @gilliankbruce!

Check out the rest of the Learn Lightning series:

Part 1: Setup
Part 2: Create an App
Part 3: Create & Clone Users
Part 4: Create Groups
Part 5: Create & Edit Objects
Part 6: Create Reports
Part 7: Create & Edit Profiles
Part 8: Create & Edit Permission Sets