Building the Detail Page

The Salesforce app supersedes Salesforce Mobile Classic. The Salesforce Classic Mobile app will retire on all supported platforms and devices on December 1, 2017. Customers should transition their users to the Salesforce for Android or iOS or deploy custom mobile apps to address their existing and future mobile needs.

Important

The last step in building our mapping application is creating a detail page for the accounts in the list view. First, we'll create a controller that retrieves the account information:

1public class customAccountController {
2      private final Account account;
3
4      public customAccountController() {
5            account = [Select Id, Name, Rating, CustomerPriority__c, Description, Phone,
6            BillingStreet, BillingCity, BillingState, BillingPostalCode from Account 
7            where id = :ApexPages.currentPage().getParameters().get('id')];
8      }
9
10      public Account getAccount() {
11            return account;
12      }
13
14      public PageReference save() {
15            update account;
16            return null;
17      }
18}

Next, we'll create a Visualforce page that displays the phone number and rating of the account the user selected from the list view. We'll use the <fieldset> and <row> classes from the iUI framework to apply iPhone-like styling to the page.

The following code defines the account detail page of our mapping application:

1<apex:page showHeader="false" controller="customAccountController" title="My Account" >
2    <apex:composition template="iuivf" />
3
4    <div class="panel" id="acctDetail" selected="true" style="padding: 10px; 
5      margin-top:-44px" title="Account Information" >
6
7       <h2>{!Account.Name}</h2>
8
9       <fieldset style="margin: 0 0 20px 0;">
10
11          <div class="row">
12             <label>Phone:</label>
13             <input type="text" value="{!Account.Phone}" />
14          </div>
15
16          <div class="row">
17             <label>Rating:</label>
18             <input type="text" value="{!Account.Rating}" />
19          </div>
20
21       </fieldset>
22
23    </div>
24
25</apex:page>

Visualforce Developer Guide

Building the Detail Page