Embedding a custom UI in a standard UI

In Chapter 6, Application Domain Layer, we looked at a Lightning Component that can be placed on the Lightning Record Page layout. This approach only applies to Lightning Experience and also provides some additional benefits, such as being able to listen to events Lightning Experience fires as users in-line edit the record details. This approach currently only applies when viewing the record details. The following screenshot is a reminder of what the Compliance Verification component looks like when placed on the standard UI:

Let's now look at an example that shows how to customize the standard UI that applies both to Salesforce Classic and Lightning Experience by embedding a Visualforce page in a detailed Page Layout, as shown in the following screenshot for the Race object. Page Layouts are leveraged in both Salesforce Classic and Lightning Experience.

The following Visualforce page uses the lightningStylesheets attribute to indicate that the page style should automatically reflect the container it is running in, as shown in the following screenshots. It reuses the Extension Controller from the previous chapter:

<apex:page standardController="Race__c" 
    lightningStylesheets="true" 
    extensions="RaceSummaryController" 
    action="{!loadSummary}">
    <apex:outputPanel>
        <apex:pageBlock>
            <apex:pageBlockTable value="{!Summary}"
                 var="summaryRow">
                <apex:column value="{!summaryRow.Position}">
                    <apex:facet name="header">Position</apex:facet>
                </apex:column>
                <apex:column value="{!summaryRow.Driver}">
                    <apex:facet name="header">Driver</apex:facet>
                </apex:column>
                <apex:column value="{!summaryRow.Team}">
                    <apex:facet name="header">Team</apex:facet>
                </apex:column>
                <apex:column value="{!summaryRow.Car}">
                    <apex:facet name="header">Car</apex:facet>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:outputPanel> 
</apex:page>

As the page uses StandardController, it appears in the layout editor and can be positioned on the layout:

You can then drag and drop it into an existing or new section on the layout. In Lightning Experience, the page looks like the following screenshot:

The result will look something like the following screenshot in Salesforce Classic:

When in Salesforce Classic, this approach only applies to the layouts when users are viewing records. You can, however, provide a means for users to edit the information through such Visualforce pages, even though they are rendered on the view page for the record. There is, however, no way to refresh the main page when you do so. While the width of the Visualforce page will adjust automatically, the height is fixed, so be sure to set accordingly to common data volumes. Unlike Salesforce Classic, users in Salesforce LEX will see embedded Visualforce pages in layouts when creating and editing records as well as viewing them. Ensure that your pages expect these scenarios in LEX; for example, the StandardController.getId method will return null in a record create scenario, and your code should handle this accordingly.

Table of Contents for Embedding a custom UI in a standard UI

Create new playlist

Sign In

Sign Up

Table of Contents for
Embedding a custom UI in a standard UI