Lightning App Builder and page layouts
Learn how page layouts, compact layouts, Lightning record pages and apps fit together, then build a custom record page and app with visibility rules, all without code.
In this tutorial you will change how Salesforce looks and behaves for your users, without writing code. You will build a custom Lightning app, edit a page layout, build a Lightning record page for Account, and show or hide parts of it with visibility rules.
Prerequisites: a free Developer Edition org (see *Get a free Developer Edition org and start Trailhead*) and an idea of objects and fields (see *Data model: objects, fields and relationships*). You work as the System Administrator, so every menu below is available to you.
Three things that control what a user sees
Beginners often mix these up. Salesforce keeps the data, the form and the page separate:
Fields hold data. Page layouts decide which fields, buttons and related lists appear on a record. Lightning pages (built in Lightning App Builder) decide how the whole screen is arranged: components, tabs, columns and rules about who sees what.
Which tool does what
| Tool | Controls | Where you find it |
|---|---|---|
| Page layout | Fields, sections, buttons, related lists on a record | Setup > Object Manager > (object) > Page Layouts |
| Compact layout | The few key fields in the highlights panel at the top and in the mobile app | Object Manager > (object) > Compact Layouts |
| Lightning record page | The arrangement of components on a record screen | Setup > Lightning App Builder, or Object Manager > (object) > Lightning Record Pages |
| Lightning app | The navigation bar, the tabs and the branding for a group of users | Setup > App Manager |
A page layout is the older, simpler tool and still matters: its buttons, related lists and field order feed into the Lightning record page. Lightning App Builder is where you decide the final look.
Part 1: Edit a page layout
We will make the Account screen easier for a sales team: put Industry and Annual Revenue near the top and make Industry required on the form.
Edit the Account page layout
- 1Click the gear icon at the top right and choose Setup.
- 2Click the Object Manager tab, then click Account.
- 3In the left menu click Page Layouts, then click Account Layout. The page layout editor opens.
- 4At the top of the editor you see a palette (Fields, Buttons, Custom Links, Actions, Expanded Lookups, Related Lists). Below it is the layout itself, split into sections such as Account Information.
- 5Drag Industry and Annual Revenue from the Fields palette into the Account Information section, near the top. If a field is already on the layout, it is greyed out in the palette; drag it within the layout instead.
- 6Double-click the Industry field (or click the small wrench icon on it). Tick Required and click OK.
- 7Click Save. Open any Account record and click Edit to see the change.
Layout required is not data required
The Required setting on a page layout only applies when users use this layout. It does not stop an API call, an import or Apex code from saving a record with that field empty. If a field must never be blank, use a validation rule or mark the field itself as required in its definition (Object Manager > Account > Fields & Relationships).
Page layouts and security. A layout can show a field that a user has no permission to see. Field-level security wins: if a user cannot read the field, it stays hidden even if it is on the layout. See *Security model: profiles, permission sets and sharing*.
Different layouts for different users. On the Page Layouts screen, click Page Layout Assignment to choose which layout each profile gets (and, if you use record types, which record type gets which layout). A support team and a sales team can then see different fields on the same object.
Part 2: Build a Lightning record page
Page layouts only arrange fields. A Lightning record page lets you add tabs, charts, related lists and more. You will build a new Account page.
Create the page
- 1In Setup, type Lightning App Builder in Quick Find and open it. Click New.
- 2Choose Record Page and click Next. (The other types are App Page for a page that is not tied to a record and Home Page for the home screen.)
- 3Label it Account Sales Page, choose Account as the object, click Next.
- 4Pick a template. Header and Right Sidebar is a good start. Click Done.
- 5The editor has three areas: the component list on the left, the canvas in the middle, and the properties panel on the right. Click a component on the canvas to edit its properties.
- 6In the left list, search Tabs. Drag a Tabs component into the main (wide) region of the canvas.
- 7In the Tabs properties, keep the first tab as Details and add a second tab labelled Related. Drag the Record Detail component (or Details) into the Details tab and the Related List - Single component into the Related tab. In the properties of the related list choose Contacts.
- 8In the right sidebar drag in Recent Items or Report Chart if you like. Each component has its own properties.
- 9Click Save.
Use the Highlights Panel component at the top of every record page. It shows the object icon, the record name and the fields from the compact layout, plus the action buttons. Edit those fields in Object Manager > Account > Compact Layouts.
Part 3: Activate the page
A saved page does nothing until you activate it. Activation says who gets the page.
- 1Click Activation in the top right of the App Builder (after saving).
- 2Choose how to assign it. Assign as Org Default gives it to everyone. App Default gives it to users of one Lightning app. App, Record Type, and Profile gives it only to the combinations you choose.
- 3Click Save. Open an Account record from the App Launcher to see the new page.
The Account record opens with the highlights panel on top, two tabs named Details and Related in the middle, and your sidebar components on the right. Clicking Related shows the Contacts list.If something is wrong, open a record page and click the gear icon at the top right, then Edit Page. That jumps straight into App Builder for the page that user is seeing.
Part 4: Show or hide with visibility rules
Component visibility lets one page work for many situations. For example, show a warning banner only for large accounts.
- 1In the App Builder, open Account Sales Page and drag a Rich Text component to the top of the main region. Type:
High-value account: involve the account manager. - 2With the Rich Text selected, find Set Component Visibility in the properties panel and click Add Filter.
- 3Choose the filter type Record Field, field Account.Annual Revenue, operator Greater Than, value 10000000. (The number is only an example.)
- 4Save. Open an Account with revenue above that value to see the banner, and one below it to see it vanish.
You can filter on record fields, the logged-in user (for example their profile or a permission), the device (desktop or phone) and more. Combine filters with AND or OR. A hidden component is simply not drawn; the data is still protected by security, not by visibility.
Hiding is not protecting
Visibility rules are a display feature, not security. Never use them to hide data that a user must not see. Use field-level security and sharing for that.
Dynamic Forms, briefly
With a classic page layout, one layout is shared by the whole page. Dynamic Forms moves the fields out of the layout and onto the Lightning page itself, in field sections you can place anywhere and show conditionally (for example, show a Reason for Loss field only when Stage is Closed Lost). Dynamic Forms works for custom objects and a growing list of standard objects, so check the current Salesforce Help for your object. In App Builder, select the Record Detail component and look for the Upgrade Now button in its properties panel; the exact wording can change between releases.
Part 5: Build a Lightning app
A Lightning app is a named set of tabs and a navigation bar. Sales and Support teams usually get different apps.
- 1In Setup, Quick Find App Manager and click New Lightning App.
- 2Enter the name Brew Sales and click Next. Keep the default Standard navigation and click Next through the options until Navigation Items.
- 3Move Home, Accounts, Contacts and Opportunities into the Selected Items list. The order is the order in the navigation bar.
- 4On User Profiles, add System Administrator (and any other profile that should use the app), then click Save & Finish.
- 5Click the App Launcher (nine dots) at the top left, search Brew Sales and open it.
The Utility Bar (a strip at the bottom of the app) can hold components such as Notes or Recent Items. Add it in App Manager > (your app) > Edit > Utility Items.
I am a Salesforce admin. Our sales team uses the Account page. Here are their complaints: [paste complaints, for example: too many fields, cannot see open opportunities quickly]. Suggest a design for the Lightning record page: which standard components to use, how to group fields, what to put in tabs, and any visibility rules. Explain which parts need a page layout change and which need Lightning App Builder.What to expect: A good answer lists specific standard components (Highlights Panel, Tabs, Related Lists, Path, Report Chart) and separates page layout work from App Builder work. Verify names in your own org.
Try it: Design a Support page
In your Developer org, create a Lightning record page for Case called Support Case Page. Use the Header and Right Sidebar template. Add a Tabs component with Details and Related tabs, and a banner (Rich Text) that is visible only when Priority equals High. Activate it as the App Default for a new app called Brew Support.
Key takeaways
- Fields hold data, page layouts arrange fields and buttons, Lightning pages arrange the whole screen, and apps group tabs.
- Lightning App Builder makes App, Home and Record pages from components, and a page does nothing until you activate it.
- Required on a page layout is a UI rule only; use validation rules or field settings to enforce data quality.
- Component visibility and Dynamic Forms show or hide parts of a page by record field, user or device, but they are not a security feature.
- Compact layouts control the highlights panel; page layout assignment chooses layouts by profile and record type.
Check yourself
Finishing the quiz marks the lesson as done.
1. A user cannot see the Annual Revenue field even though it is on the page layout. What is the most likely reason?
2. You saved a new Lightning record page but users still see the old one. What did you forget?
3. Which tool controls the fields shown in the highlights panel at the top of a record?
4. You set a field as Required on the page layout. Which save is still allowed to leave it empty?
5. What does component visibility do?
Saved on this device. Create a free account to keep it on every device.
Practise this with Sam
A real mock interview, out loud, with an honest scorecard. Free to start.