In Salesforce, we find the ability to embed a Visualforce Page in a Standard Page Layout very handy. As we’ve started to do more in Lightning Experience UI, we’ve explored how to do the same in Lightning.

One of our Modules, Fleet Tracking, uses this technique and we want to share how to accomplish this.

In our Labs demo, we have Vehicle and Vehicle Activity custom objects. The objective is for users to click on a vehicle and see the vehicle details, vehicle activities as a related list and vehicle activity locations in Google Maps.

Lighting App Builder

First, here’s how to customize Lightning Experience Page Layout.

1. Click on a vehicle record and land on the standard detail page.

Similar to Salesforce Classic Page Layout Editor, you can update the page layout using the Lightning App Builder.

 

2. Edit Standard Page Layout

 

3. Default Standard Page Layout in Lightning App Builder

You can add the Visualforce page to either a sidebar section or on a new tab. For more real estate, you can create a new tab.

 

4. Create a third tab called “Vehicle Route History”

 

5. Once the tab is created, drag and drop the Visualforce Page component from the Lightning Component sidebar.

 

6. Add a label “Map” to the newly added component

 

7. Save. The finished product

 

Visualforce Page and Controller Extension

The Visualforce page here is record specific and show related items. Similar to Salesforce Classic Page Layout Editor, Visualforce must reference current object as the standard controller.

<apex:page standardStylesheets="false" showHeader="false" 
  standardController="Vehicle__c" extensions="VehicleControllerExtension">

 

Since I needed to get the related items, I used controller extension to accomplish this. In the controller extension code, I limit the Vehicle Activity results by parent ID. In this case Vehicle is the parent.

List<Vehicle_Activity__c> va = 
  [SELECT Name, Location__Latitude__s, Location__Longitude__s
  FROM Vehicle_Activity__c
  WHERE Vehicle__c = :ApexPages.currentPage().getParameters().get('id')];

 

Hope this helps your company’s Salesforce Admins and Developers to rapidly add UI rich functionalities to your App Cloud.