Start tracking your progress
Trailhead Home
Trailhead Home

Create a Lightning Console App

You’ve done so much in this project, and with this last step we take things to a whole new level. We’ll take full advantage of Lightning Experience features by creating a Lightning version of our Dreamhouse app.

As we mentioned in an earlier step, we can upgrade our existing Classic App, which creates a copy of our Lightning App with standard navigation. But we want to create a special type of Lightning App, called a Lightning Console App. We do that from the App Manager.

Lightning Console Apps lets users edit and reference multiple records at once. When a user chooses a record from a related list, it opens as a tab in the console. When a user opens a related record, it opens as a subtab. Console apps remember tabs, so that when a user navigates away from the page, they don’t lose time reopening tabs when they come back.

Console apps in Lightning Experience share much of the same console functionality in Salesforce Classic, such as the three-column layout and pinned tabs, but updated with:

  • Lightning Experience styling.
  • Access to tools and utilities with the utility Items.
  • Tabs exclusive to Lightning Experience, such as Calendar and Notes.
  • Component-powered pages and tabs.

So let’s get at it and create our Lightning Console App.

Create New App with App Manager

  1. Click Gear icon used to access Setup and select Setup.
  2. Enter App Manager in Quick Find and select App Manager.
  3. Click New Lightning App.

There are five steps to complete the New Lightning App wizard.

Step 1: App Details and Branding

  • App Name: Dreamhouse Console
  • Description: Console app for Lightning Dreamhouse Users
  • Image: Upload the app logo you downloaded in the first unit.
  • Primary Color Hex Value: #C41E1E
  • Click Next.

Step 2: App Options

  • Navigation Style: Console navigation
  • Click Next.

Step 3: Utility Items

The utility items gives your users quick access to common productivity tools, like Notes and Recent Items. It appears in the console as a fixed footer, where users can access open utilities in docked panels. Utilities harness the power of Lightning components. You can add a utility item to any Lightning App, including standard and console apps. You select which Lightning components you want to add to a utility item and specify their properties. You can specify how big the utility panel is and what label and icon you want to display in the utility Items.

  1. Click Add Utility Item and select Chatter Publisher and configure the properties.
    • Label: Post to Chatter
    • Icon:
      1. Click Delete icon to remove the default icon.
      2. Click Choose Icon.
      3. Click feed.
    • Panel Width: 340
    • Panel Height: 480
    • Type: Global
  2. Click Add Utility Item and select Recent Items and configure the properties.
    • Label: Recent Items
    • Icon:
      1. Click Delete icon to remove the default icon.
      2. Click Choose Icon.
      3. Click layers.
    • Panel Width: 340
    • Panel Height: 340
    • Objects:
      1. Click Select…
      2. Selected: Broker, Dashboard, Group, Property
      3. Click OK.
    • Number of Records to Display:5
  3. Click Add Utility Item and select Notes.
  4. Click Next.

Step 4: Navigation Items

Now you can select the items to be included in the Console App. Items that are tied to Lightning Experience features like Notes and Calendar are only available when you’re creating or editing a Lightning App. So we’re able to add additional elements to this app that we couldn’t add earlier to our Classic App.

  1. Update Selected Items column to include:
    • Home
    • Chatter
    • Groups
    • Calendar
    • Properties
    • Brokers
    • Accounts
    • Dashboards
    • Reports
  2. Click Next.

Step 5: Navigation Rules

  • Click Next.

Step 6: User Profiles

  1. Update Selected Profiles column to include:
    • Dreamhouse User
    • System Administrator
  2. Click Save & Finish.

Well done! You’ve created your first Lightning Console App. So let’s check it out. 

  1. Click The App Launcher icon, which looks like a Waffle to access the App Launcher.
  2. Click Dreamhouse Console.

Now let’s open some records.

  1. On the Home tab, under Recent Records, click 48 Brattle St.
  2. Click Home, and again, under Recent Records, click Edge Communications.

Customize and Assign Property Record Page

Our Dreamhouse Console App is great, but let’s see how we can customize the experience even more. Remember the Path that we created in the last step? We add that to our property record page using Lightning App Builder. 

With Lightning App Builder, admins can create a record page from scratch or make a copy of an existing record page. You can give your users a customized view for each object’s records by adding, editing, or removing components to change the page’s layout, and you can customize your users’ experience even more granularly by creating custom record pages and assigning them by app, record type, and user profile. You can even control when a component appears on a record page by adding filter conditions and logic to its properties.

We make changes to the property page using standard Lightning components. We then assign this customized Property Record page to the Lightning Console App we just created. 

  1. From the Dreamhouse Console App, go back to the 48 Brattle St tab.
  2. Click through the Related, Details, Activity, and Chatter tabs on this page.

Now let's customize this page.

  1. Click Gear icon used to access Setup and select Edit Page.

    The Property Record Page with Path, Report Chart, Details, and Add Tab all highlighted in red.

  2. Drag the standard Path component to just below the Highlights Panel, so it spans the entire page.
  3. In the section below the Path component you just added, click the Details tab to select it.
  4. In the Tabs component properties, click Add Tab.
  5. Click your new tab, and select Custom, then enter Analytics and click Done.
  6. In the Tabs component display, click your new Analytics tab to select it and then drag the standard Report Chart component onto it.
  7. In the Report Chart properties, select the Property Listings report.
  8. Click Save and then Activate.
  9. Click App Default and then Assign as App Default.
  10. Select Dreamhouse Console to assign it to that app.
  11. Click Next and then Save.

Now that you have a customized your Property record page, let’s see how it looks.

In the header, click Back to go back to the record page for 48 Brattle St. Notice the page layout is updated to include your Path component (A), and the new Analytics tab (B) with the Property Listings chart (C).

The Dreamhouse console app, with numbered callouts on the Path component (A), the Analytics tab (B), and the Property Listings chart (C)

Lastly, let’s test the page assignment to make sure that it only appears in the Dreamhouse Console app.

  1. Click The App Launcher icon, which looks like a waffle to access the App Launcher.
  2. Click Dreamhouse Classic.
  3. In the Recent Records, click 48 Brattle St.

Notice that the Path component doesn’t display on this page, and there is also no Analytics tab.

Great Job!

With only using clicks you went through the major phases of bringing a Classic App into Lightning Experience. You enabled an existing app and user for Lightning Experience, created a new Lightning App complete with features like utility Items and report charts, and assigned a customized record page experience to a specific Lightning App. 

Hopefully this gives you a taste for what’s possible in Lightning Experience. Now it’s time for you to bring Lightning Experience to your users!