In Chapter 6, Application Domain Layer, we looked at a Lightning Component which can be placed on the Lightning Record Page layout. This approach only applies to LEX, and also provides some additional benefits such as being able to listen to events LEX 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 looked like when placed on the LEX standard UI:

Let's now look at an example on how to customize the standard UI that applies both to Salesforce Classic and LEX. By embedding a Visualforce page in detail Page Layout as shown in the following screenshot for the Race object. Page Layouts are leveraged in both Salesforce Classic and LEX.

The following Visualforce page uses the $User.UIThemeDisplayed global variable to style the page accordingly. It reuses the Extension Controller from the previous chapter:

<apex:page standardController="Race__c"extensions="RaceSummaryController" action="{!loadSummary}">
  <apex:slds/>
  <apex:outputPanel 
     rendered="{!$User.UIThemeDisplayed == 'Theme3'}">
  <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:outputPanel 
     rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
    <div class="slds">
      <table
        class="slds-table slds-table--bordered 
               slds-table--cell-buffer">
        <thead>
         <tr class="slds-text-title--caps">
           <th scope="col">
             <div 
               class="slds-truncate"title="Position">Position</div>
           </th>
           <th scope="col">
             <div class="slds-truncate"title="Driver">Driver</div>
           </th>
          <th scope="col">
            <div class="slds-truncate"title="Team">Team</div>
          </th>
          <th scope="col">
            <div class="slds-truncate"title="Car">Car</div>
          </th>
         </tr>
        </thead>
        <tbody>
          <apex:repeat value="{!Summary}" var="summaryRow">
            <tr>
             <th scope="row"data-label="Position">
               <div 
                 class="slds-truncate">{!summaryRow.Position}</div>
             </th>
             <td data-label="Driver">
               <div class="slds-truncate">{!summaryRow.Driver}</div>
             </td>
             <td data-label="Team">
               <div class="slds-truncate">{!summaryRow.Team}</div>
             </td>
             <td data-label="Car">
               <div class="slds-truncate">{!summaryRow.Car}</div>
             </td>
            </tr>
          </apex:repeat>
        </tbody>
       </table>
     </div>
   </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. The result will look something like the following screenshot in Salesforce Classic:

In Salesforce LEX the page looks like the following screenshot:

Depending on the custom UI technology you use, there are different options to embed the standard UI page layout. Note that when you do this, any embedded Visualforce pages are also included.

For Salesforce Classic, the apex:detail tag can be used on a Visualforce page to render most of the look and feel of the standard UI; note that it is not automatically restyled when the page is shown in LEX. The component is not very granular; for example, you cannot add your own buttons alongside the standard buttons it renders. This means that your page buttons need to be rendered elsewhere on the page, making the UI look inconsistent and confusing. In addition, this component only renders a read-only view of the record layout. In most cases, the hybrid approach described earlier in the chapter provides a better solution to most requirements like this.

For Salesforce LEX, the force:recordEdit and force:recordView components support both record editing and viewing within custom UIs built using Lightning Components. In contrast to the apex:detail component in Visualforce, action buttons are not rendered. The developer is responsible for informing the component when to save the details by firing the recordSave Lightning Event. The component responds with the onSaveSuccess event when the record is saved successfully.

Visualforce is not only a powerful way to create entirely new pages for your application, but also augments the Salesforce user interface in multiple places. As we've seen so far, you can use it to extend the standard UI layouts and Custom Buttons. Here is a list of platform areas that accept Visualforce pages:

Profiles and Permission Sets also reference Visualforce pages; users must be given access to a page before they can use it from these areas.

The following is a list of platform areas that accept Lightning Components:

In Chapter 6, Application Domain Layer, we explored adding the Verify Compliance Lightning Component to Record Pages. In the next chapter, we will build some new Lightning Components to allow us to take a closer look at some of the other areas in the preceding list. You should also refer to the Lightning Developer Guide for full details.