• Article
|
• Edit
|
• History

Visualforce Sample - Getting Started

As part of the Mastering Visualforce - Move Beyond S-Controls webinar, a very basic (and more complex) demonstration was given. This is the code for that basic demonstration. Be sure to checkout the recorded webinar where this and additional valuable concepts were presented.

The Visualforce Pages were all fairly simple. They do require the ID of a contact though. 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 page. For example:

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

Basic Page

Create this page, 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: