SalesForce Gurukula: Introduction to Visualforce

Introduction to Visualforce

Visualforce is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the Force.com platform. You can use Visualforce to build apps with user interfaces that look like the standard interface provided by Force.com, as well as your own completely custom interface.

Visualforce enables developers to extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic inApex. You can build functionality for your own organization, or create apps for sale in the AppExchange.

Visualforce app development is familiar to anyone who has built web apps. Developers create Visualforce pages by composing components, HTML, and optional styling elements. Visualforce can integrate with any standard web technology or JavaScript framework to allow for a more animated and rich user interface. Each page is accessible by a unique URL. When someone accesses a page the server performs any data processing required by the page, renders the page into HTML, and returns the results to the browser for display.

An Example Visualforce Page

Here’s a short example of a working Visualforce page.

01<apex:page standardController="Contact" >

02    <apex:form >

03         

04        <apex:pageBlock title="Edit Contact">

05 

06            <apex:pageBlockSection columns="1">

07                <apex:inputField value="{!Contact.FirstName}"/>

08                <apex:inputField value="{!Contact.LastName}"/>

09                <apex:inputField value="{!Contact.Email}"/>

10                <apex:inputField value="{!Contact.Birthdate}"/>

11            </apex:pageBlockSection>

12 

13            <apex:pageBlockButtons >

14                <apex:commandButton action="{!save}" value="Save"/>

15            </apex:pageBlockButtons>

16 

17        </apex:pageBlock>

18         

19    </apex:form>

20</apex:page>

This page displays a contact data entry form.

In just over a dozen lines of markup, this page does a lot.

It connects to the Visualforce standard controller, a part of the Visualforce framework that provides automatic data access and modification, standard actions, and more.
When accessed without a record ID, the page displays a blank data entry form. When you click Save, a new record is created from the form data.
When accessed with a record ID, the page looks up the data for that contact record and displays it in an editable form. When you click Save, your changes for the contact are saved back to the database.
Each input field is smart about how it presents its value.
- The email field knows what a valid email address looks like, and displays an error if an invalid email is entered.
- The date field displays a date widget when you click into the field to make entering a date easier.
The Save button calls the save action method, one of a number of standard actions provided by the standard controller.