Visualforce Sample - Getting Started

This page contains some very basic Visualforce examples for new developers. Before creating the following pages, navigate to the Contacts tab, choose a contact (say Tim Barr), and select the ID. For example, if the URL of the contact is <code>https://<instance>.salesforce.com/0035000000N1Gwj</code> then his ID is 0035000000N1Gwj.

You can then pass this in as a parameter to each Visualforce page you create below. For example:

 https://na3.salesforce.com/apex/mypage?id=0035000000N1Gwj

Basic Visualforce Page

Create a new Visualforce page (click your name | Setup | Develop | Pages | New), say "firstpage", to understand what the detail tag does:

<apex:page standardController="Contact">

  <apex:sectionHeader title="{!contact.firstname}" subtitle="{!contact.account.name}"/>

</apex:page>

Note the expression language, which should be familiar to anyone who has written formulae. The standard controller Contact has made a method getContact() available to this page. The expression {!contact.firstname} retrieves the firstname property from the Contact returned by getContact().

Basic Page Using Detail

This second page shows the use of the detail tag:

<apex:page standardController="Contact">

  <apex:detail />

</apex:page>  

Page with Outputfield

Demonstrating the metadata-driven output (see the labels for example), and the standard look and feel that can be created using the standard components, this page uses the outputfield components to show more information about a contact:

<apex:page standardController="Contact">

  <apex:sectionHeader title="{!contact.firstname}" subtitle="{!contact.account.name}"/>

  <apex:pageBlock title="Contact">
    <apex:pageBlockSection title="Details">
       <apex:outputfield value="{!contact.firstname}"/>
       <apex:outputfield value="{!contact.lastname}"/>
       <apex:outputfield value="{!contact.salutation}"/>
       <apex:outputfield value="{!contact.birthdate}"/>                     
    </apex:pageBlockSection>
  </apex:pageBlock>

</apex:page>

Page With Inputfield

The metadata is even more obvious when switching to inputfield. The following example also uses the save() method that is made available by the standard controller.

<apex:page standardController="Contact">

  <apex:sectionHeader title="{!contact.firstname}" subtitle="{!contact.account.name}"/>

  <apex:form >
  <apex:pageBlock title="Contact">
    <apex:pageBlockSection title="Editing">
       <apex:inputfield value="{!contact.firstname}"/>
       <apex:inputfield value="{!contact.lastname}"/>
       <apex:inputfield value="{!contact.salutation}"/>
       <apex:inputfield value="{!contact.birthdate}"/>                     
       <apex:commandButton value="Save" action="{!save}"/>
    </apex:pageBlockSection>
  </apex:pageBlock>
  </apex:form>

</apex:page>

Here's what the final page looks like:

InputFields.jpg