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:
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!
aaa
Nice one Good Example
Thanks Sir !!
David thanks for the tutorial. Quick question to everyone, how do you adjust the width of the frame?
i am enable to navigate all the links
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!
Haha, “automagically”…laughed out loud. Love these tutorials!
Great example dear
Final Rule: if this is your first day in SFDC, you have to CODE…. :P
Awesome Awesome Awesomeeeee!!!
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
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.
Really love your tutorials! Thank you! Can’t wait to see the example for the test class for the VF page ;) no pressure :P
Your motivation is like an aeroplane – it get us exactly where we want to be in the least possible time.
Love it, ha ha ha
Many Thanks Liu :)
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.
Ha ha ha, Hema I write these tutorials for free during my free time. Have some mercy on me!
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.
This is more of what I am trying to do. a href=”file:///H:/COMMON/” target=”_blank” Didn’t display properly.
Hey Aron,
Can you save the file as static resource and then use.
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!
‘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? =)
aaa