Quick Start: Get Started with Live Controller in Lightning Experience

Create Your Visualforce Page for Lightning Experience

1. From Setup > Home, enter Visualforce Pages in the Quick Find box.
2. Click New to create a new page. Let's call our new page AccountPage. Under Label and Name fields, enter AccountPage.

3. To activate the page, click the Edit button on the Page Edit screen, select the checkbox labeled Available for Lightning Experience, Experience Builder sites, and the mobile app.

4. In the Visualforce Markup pane, replace any markup with the following code.
   1<apex:page standardController="Account">
   2    <apex:liveController rerender="myPanel"/>
   3    <apex:outputPanel id="myPanel" layout="block">
   4        <apex:detail subject="{!Account.Id}" title="false"/>
   5    </apex:outputPanel>
   6</apex:page>

5. Click Save.


This Visualforce page displays a panel with an account record. First, we define a standard controller for the Account object. Then, we create the live controller with the attribute rerender set to myPanel. This tells the live controller to listen for and refresh data changes on the outputPanel component with the ID myPanel. On the next line, we create the outputPanel component. The outputPanel component contains an <apex:detail> component. It creates a two-column page layout that displays all fields on a record.

Create a Custom Lightning Page

1. From Setup > Object Manager, select Account from the left hand navigation. 

2. In the Account view, select Lightning Record Pages from the left hand navigation.

   Select New.

3. On the Create a new Lightning page screen, choose Record Page from the left hand navigation.

   Click Next.

4. Enter Live Controller Record Page as the Label.
5. Select Account from the Object dropdown list. Click Next.
6. On the following screen, select the CLONE DEFAULT SALESFORCE PAGE tab.
7. Click Finish.

Add Your Live Controller Visualforce Page to Your Lightning Page

1. In Lightning App Builder, from the list of Lightning components on the left side of the screen, under the Standard heading, drag the Visualforce icon to any spot on the Lightning page. In this example, we put it above the Details tab.
2. On the Lightning page, you can now see your most recently created Visualforce page. If this is not the Visualforce page you want to use on your Lightning page (in our case, AccountPage), select another one from the Visualforce Page Name dropdown on the right hand side.
   
3. Click Save.
4. On the Page Saved modal, click Activate.

5. Click Assign as Org Default to activate it for your users. Click Close.


   If you're prompted to assign a form factor, you can select the default. Click Next.

   Note

   
6. On Review Assignment, click Save.


See Live Controller In Action

1. From the Live Controller Record Page, click Back.

2. From App Launcher, search for Accounts. Click the name of your Account.
3. Click an account name in the Recently Viewed list view. If this list view is empty, select another list view that shows your accounts. The sample text in the example here is Acme Co. Your page should look something like this.
4. Click the Details tab. You can see that the Visualforce page we created earlier is above it.

5. Click the pencil icon to edit the Type. Let’s change Type from Customer - Direct to Prospect.
6. Click Save.
7. When the page saves, you can see the AccountPage Visualforce component with Type updated.