Get started - create a Visualforce Page now

6:00 AM

Common, lets jump straight into the Visualforce sea!!

You want to create your first VisualForce page? . Before that see this

Setup --> My Personal Information --> Personal Information --> Development Mode . This should be checked,if not set it to true.

Once done, go to your URL bar ( see image ).



Modify the URL . Ex ( https://ap1.salesforce.com/home/home.jsp would be modified to https://ap1.salesforce.com/apex/welcomepage ) and hit ENTER.



When you see this screen, click on the "Create Page" link. And done, your page has been created and you will see an editor window at the bottom of your browser. You will see some code that has been generated by default. These are called tags.

<apex:page> is the very first tag you have to learn. You cannot create a page without this tag.

There are three main attributes for this tag.

  • Standardcontroller
  • Controller
  • Extensions
Standardcontroller is used when you want to use the standard functionality of any object (custom or standard). By standard functionality i mean SAVE, VIEW, DELETE etc. You cannot override the SAVE functionality or anything else, you do not have any control in the backend processes. But you can very well control the UI (user interface), you can display marvellous content which is otherwise not possible with the standard PageLayout.
<apex:page standardcontroller="Account">
   <apex:inputfield value="{!Account.Name}"/>
   <apex:commandbutton value="Update" action="{!Save}"/>
</apex:page>






Type this code in the editor (I know you would copy & paste) and hit SAVE icon. You can see that your new page is now developed. But wait, there doesn't appear a Account Name to edit and Save.

https://xxx.salesforce.com/apex/welcomepage?id=00190000002GA5n . Id should be a valid Account Id.

Dont be afraid that you have to modify the URL all the time, there is lot more to explore.

Controller (often called Custom controller) is used when you want to perform something extraordinary when hitting the "SAVE" button.

Here is a simple example using Custom controller ... Click here!!!

Extensions is used when you want to perform a combination of both ( Standardcontroller and Cutom)

We will dive deep into the Controller and Extensions attributes in the coming posts. But for now expand the basic code provided, add as many tags as possible and post your queries.

Some tags which come to my thought:

<apex:pageblock>

<apex:pageblocksection>

<apex:outputfield>

<apex:outputlabel>

<apex:commandlink>

Note: Use the Component Reference link in the editor window for more information.

Share This Story

Tags: ,

11 comments

  1. Yogi SantaJune 24, 2009 at 2:21 AM

    Just a small suggestion:

    While you are mentioning a piece of code, enclose it the "Code" tag in the blog. It will be easy to copy-paste for those who want to try...

    ReplyDelete
  2. Edwin RaymondJuly 1, 2009 at 12:40 AM

    Thanks for the suggestion.. Hope it looks good now..

    ReplyDelete
  3. UnknownJune 23, 2010 at 10:06 PM

    can u give me more examples being a developer initially we need to know from basis.It will be easy for us to try

    ReplyDelete
  4. Edwin RaymondJune 28, 2010 at 11:09 PM

    Hi sriani.. thanks for your comments.. I will try to post more simple examples.. meanwhile, please check out the other samples too in this blog.. they may be a bit complex to see.. but you can learn more within a short span

    ReplyDelete
  5. AnonymousAugust 26, 2010 at 1:18 PM

    Thanks for the suggestion of checking off the "development mode" in the personal profile section. I would have been scratching my head all day long as to why my apex page kept giving me "invalid url".

    ReplyDelete
  6. AnonymousMarch 28, 2011 at 7:30 PM

    thanx a lot..its been really helpful :)

    ReplyDelete
  7. William WagnerAugust 23, 2011 at 1:50 AM

    Creating such a page might be hard but with your help, I think it'll be easy for me. Thanks for sharing your thoughts.

    dentist seo

    ReplyDelete
  8. KarinSeptember 8, 2011 at 3:36 PM

    Would this be useful for redirecting my users to another page when they hit the "New" button on the Opportunity tab? I noticed it's the only option since S-Controls are no longer being created.

    Many of my users are going to the Opporutnity tab and clicking "New". Because of this, they usually don't have a contact related. I want them to create their opporutnities from the Contact record. It would be great when if they clicked on the "New" button a freaky scary face popped up and ordered them to go to the contact's record (just kidding). Seriously, though - is this a good solution for redirecting or adding a pop-up message?

    ReplyDelete
  9. Edwin RaymondSeptember 12, 2011 at 4:24 PM

    Yes sure, this is possible.. You can either display a message saying that they could create an opportunity only from the contact page or you could allow them to create a contact record and then proceed to creating an opportunity when they click on the "new" button in the opportunity tab.. the latter would involve bit more coding

    ReplyDelete
  10. UnknownSeptember 24, 2012 at 6:17 PM

    Can I create a VisualForce page with Group Edition? Maybe I'm missing something...

    ReplyDelete
  11. AnonymousNovember 2, 2013 at 12:16 PM

    Great work...Please share links for your other posts related to VF and Apex which will help in learning for beginners like me.

    ReplyDelete