Example: How to create a basic Visualforce page

Preface – This post is part of the Visualforce series.

Let me teach you how to write your first Visualforce page!
…make sure you’ve studied these pre-requisites before continuing!

Here’s the general Visualforce syntax:

<apex:tagName uniqueProperty="value" uniqueProperty="{!controllerData}">
  Content here inherits the tag properties
</apex:tagName>

You’ll often see the syntax abbreviated when we don’t need any content inside the tags:

<apex:tagName uniqueProperty="value" uniqueProperty="{!controllerData}" />

The key to Visualforce is knowing which tags to use and how to take advantage of their properties!

Our basic Visualforce page will use a standard controller. Standard controllers automagically exist for all SObjects, and they provide commonly used variables and methods.

Here’s our final, working page:

Here’s 100% of the code:

<apex:page standardController="Contact">
  <!-- Page Header -->
  <apex:sectionHeader title="Contact Edit" subtitle="New SFDC99 Member" />
  <apex:image value="http://bit.ly/17iLknp" styleClass="logo" />
  <!-- Begin Form -->
  <apex:form >
    <apex:pageBlock title="Rules of SFDC99" mode="edit">
      <!-- SFDC99 Rules -->
      <apex:outputPanel styleClass="rules">
        The 1st rule of SFDC99 is: You do not talk about SFDC99.<br />
        The 2nd rule of SFDC99 is: You do not talk about SFDC99.<br />
        The 3rd rule of SFDC99 is: No one ever gives up.<br /><br />
        <iframe width="320" height="180" src="https://www.youtube.com/embed/lsSC2vx7zFQ" />
      </apex:outputPanel>
      <!-- Fields -->
      <apex:pageBlockSection columns="3" showHeader="true" title="Membership Status">
        <apex:inputField value="{!contact.Status__c}" required="true" />
        <apex:inputField value="{!contact.FirstName}" required="true" />
        <apex:inputField value="{!contact.LastName}"  required="true" />
        <apex:inputField value="{!contact.Likes_Ice_Cream__c}" />
        <apex:inputField value="{!contact.Email}"     required="true" />
        <apex:pageBlockSectionItem>
          <apex:outputLabel>Referrer</apex:outputLabel>
          <apex:inputField value="{!contact.Best_Friend__c}" />
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
      <!-- Button Section -->
      <apex:pageBlockButtons location="bottom">
        <apex:commandButton value="Add SFDC99 Member" action="{!save}" />
        <apex:commandLink value="Back to SFDC99" target="https://www.sfdc99.com" />
      </apex:pageBlockButtons>
    </apex:pageBlock>
  </apex:form>
  <!-- CSS -->
  <style>
    .logo {
      float: right;
      width: 60px;
      margin: -65px 20px 0 0;
    }
    .rules {
      color: red;
      font-size: 18px;
      font-family: Courier;      
      margin: 10px 0 10px 30px;
      float: left;
      width: 100%;
    }
  </style>
</apex:page>

Try to match the code with its corresponding section in the page – not as hard as you’d think!

Want to see and interact with this page in my org?
Login to SFDC99 and open the page!

To show you how powerful this simple page is, here’s a list of things it does that would otherwise be impossible using point-and-click Salesforce:

1. It has more than two columns!
2. The page title is customized.
3. An image appears on the top right of the page.
4. The form title is customized.
5. The form includes a description section.
6. Text on the page is a custom color and size.
7. A working Youtube video is embedded on the page.
8. Did I mention there are more than two columns on the page?
9. A field name is customized just for this page (but not in the database).
10. The standard save button has customized text.
11. A custom link appears by the save button.
12. Buttons only appear on the bottom of the page (they usually also appear on top).

All this awesome functionality with only 50 lines of code!

Don’t worry if you’re still confused at this point – we’ll cover it in detail next!

Next post: An extended look: How to write a basic Visualforce page!