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:

public class customAccountController {
      private final Account account;

      public customAccountController() {
            account = [Select Id, Name, Rating, CustomerPriority__c, Description, Phone,
            BillingStreet, BillingCity, BillingState, BillingPostalCode from Account 
            where id = :ApexPages.currentPage().getParameters().get('id')];
      }

      public Account getAccount() {
            return account;
      }

      public PageReference save() {
            update account;
            return null;
      }
}

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:

<apex:page showHeader="false" controller="customAccountController" title="My Account" >
    <apex:composition template="iuivf" />

    <div class="panel" id="acctDetail" selected="true" style="padding: 10px; 
      margin-top:-44px" title="Account Information" >

       <h2>{!Account.Name}</h2>

       <fieldset style="margin: 0 0 20px 0;">

          <div class="row">
             <label>Phone:</label>
             <input type="text" value="{!Account.Phone}" />
          </div>

          <div class="row">
             <label>Rating:</label>
             <input type="text" value="{!Account.Rating}" />
          </div>

       </fieldset>

    </div>

</apex:page>
Previous
Next