Visualforce Developer Guide
jNewer Version Available
Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Building the Detail Page
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>