Salesforce coding lessons for the 99%
Finally, Apex tutorials for point-and-click admins! Written by a self-taught Google engineer.
  • Beginner Tutorials
    • Apex
    • Certifications
    • Career Info
    • Technical Architect
    • Visualforce
    • Videos
  • Apex Academy
  • Success Stories
  • About Me
  • Misc
    • Mailbag
    • Challenges
    • Links
    • Login to my Org
Follow @dvdkliuor SUBSCRIBE!

Example: How to create a basic Visualforce page

February 20, 2015

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!

23 Comments
aaa
September 8, 2021 @ 10:30 am

aaa

Reply
shiva
June 26, 2020 @ 8:47 am

Nice one Good Example

Reply
Anonymous
March 27, 2019 @ 5:33 am

Thanks Sir !!

Reply
Madhuri
May 23, 2017 @ 9:56 am

David thanks for the tutorial. Quick question to everyone, how do you adjust the width of the frame?

Reply
deeepa
June 30, 2016 @ 8:42 pm

i am enable to navigate all the links

Reply
    David Liu
    July 1, 2016 @ 5:07 pm

    Haven’t written them! And honestly likely won’t anytime in the foreseeable future.

    My buddy Matt wrote a great course on beginner Visualforce on Pluralsight however!

    Reply
Katie P.
October 20, 2015 @ 3:09 pm

Haha, “automagically”…laughed out loud. Love these tutorials!

Reply
mintu
July 9, 2015 @ 11:10 am

Great example dear

Reply
hp
June 23, 2015 @ 11:33 pm

Final Rule: if this is your first day in SFDC, you have to CODE…. :P

Awesome Awesome Awesomeeeee!!!

Reply
Maha
June 3, 2015 @ 12:29 pm

HI David,

I am not able to navigate or link on the link An extended look: How to write a basic Visualforce page!.Could you please help me

Reply
Hari
April 13, 2015 @ 9:27 pm

Hi David, Thank you very much for your help. i am not able to go through the toipc “An extended look: How to write a basic Visualforce page!”. Could you please help me.

Reply
Joyce Coquico Scigo (@j_co_sci)
March 4, 2015 @ 9:21 am

Really love your tutorials! Thank you! Can’t wait to see the example for the test class for the VF page ;) no pressure :P

Reply
Ajinkya Raut
February 27, 2015 @ 2:06 am

Your motivation is like an aeroplane – it get us exactly where we want to be in the least possible time.

Reply
    David Liu
    February 28, 2015 @ 4:34 pm

    Love it, ha ha ha

    Reply
      Sumit Sharma
      July 30, 2015 @ 6:05 pm

      Many Thanks Liu :)

      Reply
Hema
February 26, 2015 @ 8:31 pm

Hi David, It has been a week since you posted your last post on Visualforce, Can you please post atleast 1 post in 2/3 days. Everyday I am checking twice in the morning and evening for your new posts.

Reply
    David Liu
    February 28, 2015 @ 4:28 pm

    Ha ha ha, Hema I write these tutorials for free during my free time. Have some mercy on me!

    Reply
Aron Schor
February 20, 2015 @ 7:04 am

David, this is slightly off topic but I am making an app with links to internal resources.

If I type this in a browser, it loads. file:///H:/COMMON/

This doesn’t load. Common

I spent some time Googling what to do and one comment says it might not be possible.
http://www.kirupa.com/forum/showthread.php?348936-Link-to-Folder-on-Hard-Drive

Can you clarify? Thanks.

Reply
    Aron Schor
    February 20, 2015 @ 7:06 am

    This is more of what I am trying to do. a href=”file:///H:/COMMON/” target=”_blank” Didn’t display properly.

    Reply
      Ravi
      March 17, 2015 @ 3:16 am

      Hey Aron,
      Can you save the file as static resource and then use.

      Reply
    David Liu
    February 20, 2015 @ 11:18 pm

    Hhhmmm is it possible to put the resources somewhere online publicly? Then you can just link to it!

    Otherwise I don’t have much experience here!

    Reply
Mayank Srivastava
February 20, 2015 @ 6:16 am

‘Here’s a list of things it does that would otherwise be impossible using point-and-click Salesforce.’ These are the kind of things that make your tutorials so spectacular !
David, would it be wise to simultaneously start learning Visualforce while I’m still actively learning Apex and Java or should I ‘calm down’ and take it one step at a time? =)

Reply
    Anonymous
    September 8, 2021 @ 10:30 am

    aaa

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


*

*

Theme: Simple Style by Fimply