In this exercise you will learn how to:
In Setup, type visualforce in the Quick Find box.
Click Visualforce Pages.
Click the Edit link for the SimilarProperties page.
Check the Available for Salesforce mobile apps and Lightning Pages checkbox.
Select Properties Tab
Select All Properties in the menu
Select 121 Harborwalk Drive Property
Click the Setup menu and choose Edit Page.
Locate the Visualforce component under Standard Components.
Drag the component onto the page and drop it at the top of the right-hand column.
SimilarProperties should automatically be selected in the Visualforce Page Name pick list on the right-hand side. If it’s not, click the pick list and select it.
In the Label field, type Similar Properties and press Tab.
Modify the Height field to be 250 and press Return.
Click the Activate button if this is the first time you’ve activated the page. Activate the page as the Org Default.
Click the Back button to return to the Property page.
Notice that the Visualforce page has the Classic look and feel and is rather indented within the Card component.
In the Dev Console, select File > Open > Pages, select Similar_Properties and click Open. Familiarize yourself with the code.
Select the contents of the page and replace it with the contents of this page.
Save the page, then reload the Property Record Detail page.
You could also use the conditional rendering approach covered in exercise 2 to make sure the Visualforce page renders with the native look and feel in both Saleforce Classic and the Lightning Experience.