trailhead

Visualize Your Business Processes and Salesforce Data

As admins and developers, we have many click-based tools to help us manage business processes and create analytics. We can then use Lightning App Builder to make these customizations visible to our Lightning Experience users with standard Lightning components. 

For our Dreamhouse app users, we want to define a process for property status using Path. Let’s explore some of the ways we can visualize our records and business processes. We also want to modify a chart to add to the property page to help our users work with the property records.

Let’s get to it!

Navigation, List View Charts, and Kanban View

The navigation bar and list views in Lightning Experience have new features to explore and customize as well:

  1. In the navigation bar, click Properties.
  2. Click The more options icon next to Recently Viewed and select the Top Listings list view.

You can edit records directly from your list view. If you like keyboard shortcuts, try it out using the Arrow Keys + Enter instead of your mouse. 

In Lightning Experience, your users also have new ways to access records and visualize the records in a list view. Let’s take a look.

  1. In the list view header, click The new chart icon.

  2. In the chart area, click the gear icon and select New Chart.
  3. Create a new chart for your list view as follows.
    • Name: Average Assessment by Status
    • Chart Type: Vertical Bar Chart
    • Aggregate Type: Average
    • Aggregate Field: Assessed Value
    • Grouping Field: Status
  4. Click Save.

Our list view is looking great, but let’s try out a new way users can view and interact with records—the Kanban view. 

The Kanban view displays a visual summary for a selection of records. By seeing all your records at once, users can more effectively monitor their work and keep business processes moving forward. Switch to the Kanban view for almost any object from the object’s list view. The Kanban view isn’t available on a few objects, such as knowledge and tasks, and is also not available on the Recently Viewed list view for an object.

To switch to Kanban view:

  1. Click The display selector icon, which looks like a calulator next to a down arrow in the list view header and select to display as Kanban.

  2. Select the following settings:
    • Summarize By: Price
    • Group By: Status
  3. Click Save.

Play with Kanban by dragging records to a different status.

The Kanban board displaying a selection of property records

Calendar

In Lightning Experience, anyone can create a calendar from a standard or custom object by choosing a date field representing data they want to track. The calendar displays data in that field as calendar items. Users can customize most calendars by applying a list view, and they can edit and delete calendars they’ve created.

Let’s create a new calendar for Top Listings.

  1. Click The App Launcher icon, which looks like a waffle to access the App Launcher.

  2. Click Calendar (under All Items).

    Image to create a new calendar

  3. Click The Setup gear icon next to My Calendars and select New Calendar.

  4. Select Property as the object and click Next.
  5. Enter the following into the Create Calendar form:
    • Calendar Name: Top Listings
    • Field for Start: Date Listed
    • Field for End: None
    • Apply a Filter: Top Listings
    • Field Name to Display: Property Name
  6. Click Save.
  7. Click The palette expander icon, whicn looks like a down arrow next to your new Top Listings calendar, and select a new custom color from the palette.

  8. We want to view a month at a time. In the calendar header, click The calendar view icon, which looks like a calendar next to a down arrow and select Month.

Path

Path is a way to visually display steps in a process, highlight key fields, and provide guidance such as handy links, policy information, and tips for users at each step. We can create a path based on any picklist field on the object. 

Create a Path for the Property Object

  1. Click The Setup gear icon and select Setup.

  2. Enter Path Settings in Quick Find and select Path Settings.
  3. Click Enable and then click New Path.
  4. Complete Step 1: Name and Record Type, as follows.
    • Path Name: Property Path
    • API Reference Name: Property_Path
    • Object: Property
    • Record Type: --Master--
    • Picklist: Status
    • Click Next.
  5. Complete Step 2: Select Fields and Provide Guidance for Each Step in the Path, as follows.
    • For the Pre-Market status add the Guidance for Success: Review the resources to help your client get ready to list their home!
    • For each status listed below, click + Add/Update Fields, drag the fields indicated for each status below to the Selected Fields box, then click Save.
      Status
      Fields to add
      Pre-Market
      • Assessed Value
      • Broker
      Listed
      • Baths
      • Beds
      • Date Listed
      • Price
      Under Contract
      • Broker
      • Date Agreement
  6. Click Next.
  7. Complete Step 3: Set the Status and Save, as follows.
    • Select Active.
    • Click Finish.

We’ve created a path to help our agents be more effective during each property stage. Before we add this to our property page, let’s check out report charts in Lightning Experience.

Lightning Experience Report Charts

In our Dreamhouse app, we have a report chart that our users love. So that our Lightning Experience users can continue to view the chart, we need to make some small edits to the report. With the Report Chart standard Lightning component, we can display report charts in Lightning Experience record pages, home pages, app pages, and even the utility Items.

Let’s head back to our Dreamhouse Classic app and check out adding a report chart.

  1. Click The App Launcher icon to access the App Launcher.

  2. Click Dreamhouse Classic to open that app.
  3. Click Reports in the navigation bar.
  4. Click All Reports in the side bar.
  5. Click Property Listings to run that report.
  6. In the chart area, click The Setup gear icon to access the chart properties.

  7. Click The chart type icon to change the chart type to a scatter chart. Click The list view selection arrow next to Edit and select Save.

We’ve created two new elements to add to our property page with standard Lightning components, but we still need to add them in the right place. We’re going to do that in the next and last step, where we’ll create a brand-new Lightning Console App for our Dreamhouse power users.

retargeting