You are here:
Customize Lightning Pages for Lightning Console Apps
Use the Lightning App Builder to create custom Lightning pages to ensure that your console users always have the records they need in a layout that works best for them.
Required Editions
| User Permissions Needed | |
|---|---|
| To create and save Lightning pages in the Lightning App Builder: | Customize Application |
To create custom Lightning pages, head over to the Lightning App Builder. When you’re done customizing your Lightning page, assign the page to your console app.
- Size—The page template for your record page determines the size of the component region. For example, the Three Regions page template provides a main region width of 50%, and the side region widths are each 25%. When you drag a component to a side region, its size is 25% of the screen’s width. To view the available page templates, create a page in the Lightning App Builder.
- Presentation—To stack components, drag components onto a page region. To use tabs, first drag the Tabs component onto the page, then drag components into the individual tabs. To group components in collapsible sections, drag the Accordion component onto the page, then add components into each section.
The following templates and components are useful in Lightning console apps.
Record Page Templates
The Three Regions template and the pinned region templates are designed with Lightning console apps in mind. They feature a main region and two sidebars with fixed proportional widths. The main region is 50%, and the side region widths are each 25%. Three-region templates require more screen width to display correctly. Three-region templates can display incorrectly on certain devices or monitors with low resolutions.
Use the console pinned region templates to let your console users view and work with records while navigating between subtabs. You can create record pages using one of the following pinned region templates:
- Pinned Header
- Pinned Header and Left Sidebar
- Pinned Left Sidebar
- Pinned Left and Right Sidebars
- Pinned Right Sidebar (3 regions)
Lightning Components
These components are useful in Lightning console apps.
- Accordion
- This component organizes your components into collapsible sections. You can have up to 25 sections, but we recommend no more than 10. You can put multiple components in each section and customize the heading for each section.
- Actions & Recommendations
- This component lets users select steps from a to-do list that can include Next Best Action recommendations, quick actions, screen flows, and field service mobile flows. For example, when a user opens a flow in a console app, the action launches in a subtab of the associated record. In a standard navigation app, it starts in a popup window. You can add this component to Lightning pages for supported objects.
- Customer Insights
- This component informs console users on which Knowledge articles a customer has looked at. It also shows if the customer has filed a case. As a result, console users don’t suggest articles that a customer has accessed or open duplicate cases, decreasing customer frustration and improving the support process.
- Highlights Panel
- This component displays record highlights along with action buttons. Use this component to ensure that your console users can see critical information at a glance.
- Knowledge
- This component helps console users quickly find relevant Knowledge
articles for their cases and perform basic actions, such as attaching an
article to a case.
This component provides similar functionality to the Knowledge Sidebar used in Salesforce Classic consoles. To use this component, Lightning Knowledge must be enabled in your org.
- Milestones
- This component displays active, completed, and violated case milestones
with a visual tracker. Agents can use the component to drill down into
case milestone details.
This component provides similar functionality to the Case Milestone tracker in Salesforce Classic. To add this component, your org must have entitlements, an entitlement process, and milestones set up. The component supports only Case Milestones and doesn’t support Object Milestones. You can add it only to case pages.
- Path
- This component displays a visualize representation of a business process. Use this component to guide your users through an object’s life cycle. In the Service Console, you can set up a path for cases. In the Sales Console, you can set up a path for opportunities, leads, quotes, contracts, and orders.
- Related List - Single
- This component displays a single related list for a record, including
lists from a parent record.
For example, use this component to display Activity History front-and-center on all case pages, or even display cases for a parent contact.
Tip To increase console efficiency, use this component to add the Files related list to record pages. With the Files related list, console users can drag files directly onto the related list. - Related Record
- This component displays details for related records, including parent
records.
Behind-the-scenes, this component uses actions to provide your console users with built-in record creation and in-line edit. Console users can update records, create records, and link records—all without leaving the page.
For example, you can configure this component to show details about an associated contact on a case, or even the details of a case’s parent case.
This component provides similar functionality to the Lookup component used in Salesforce Classic consoles.
Tip To change the displayed fields for the Related Record component, customize the associated action in Setup. If you don’t see the action or can’t modify it, create a new one.The Service Console app comes with a default page for cases that includes Case Details and Contact Details information. This information is displayed using Related Record components. The quick actions used with these components can’t be modified because they’re provided by default. To customize the fields, first go to Setup and create a new quick action. Then modify the quick action layout. In Lightning App Builder, update the Related Record component to specify your action.
