Salesforce, much on the lines of other Web Markup Languages (WMLs), provides a way to customize and enhance the user interface design, i. e., VisualForce Pages.
VisualForce pages are basic building blocks for application developers. They are exactly the same as the common web pages but include some robust features to access, view, and update your organization’s data.
What are VisualForce Pages?
VisualForce Page is described as a Salesforce Markup language that allows users to create interface components in Salesforce.
Users can create, view, and edit VisualForce Pages in Salesforce in different ways. With Salesforce APIs and external tools, users can also build and modify these pages.
The VisualForce pages consist of Salesforce-based tags to create interactive and engaging web pages. These pages also allow users to integrate them with other web languages such as HTML, CSS, JavaScript, Ajax, and more.
The VisualForce page consists of two parts:
- VisualForce Markup
- VisualForce controller
VisualForce Markup: The VisualForce Markup Language consists of VisualForce tags, HTML, JavaScript, jQuery, CSS, Ajax or any other Web-enabled code embedded in Single tag.
VisualForce Controller: The VisualForce controller is a single element in VisualForce pages that are set to manage data with user interactions.
Where are these VisualForce pages used?
Developers uses these VisualForce pages to:
- Override default functionality like New, Edit.
- Override tab overview pages, for example, the Accounts tab home page
- Specify a custom tab.
- Can be integrated with HTML, CSS, Ajax, jQuery.
- Embed components in detail page layouts.
- Build dashboard components or custom help pages.
- Customize, expand, or integrate the sidebars in the Salesforce console.
- Add menu items, actions, and mobile cards in Salesforce 1.
VisualForce Tags
Salesforce-powered tags in VisualForce pages always begin with “apex” namespace. These tags give you almost all types of Web Markup features that you need and are much more similar to the built-in ajax components.
Each VF page consists of <apex: page> tags, where other rest of the code is defined. You can even add JavaScript for client-side data processing.
But what if you need to access data? Being a product of Salesforce, VF pages don’t need an explicit connection with the salesforce database. For this, you just need a controller.
VisualForce Controllers
The VisualForce Controller describes what data and information the user can access that comprises almost all the standard objects and custom objects and how they are formatted.
Salesforce offers two kinds of controllers – Standard and Custom and they are specified inside the <apex: page tag>. Standard controllers provide you the default Salesforce formatting with all the data validations. Just specify the object and you get all the data in that object with the default look and feel of Salesforce. On the other hand, Custom Controllers enable users to define your own custom formatting, validations, and data manipulation. It is an apex class that permits you to work on any object and manipulate data as you wish to do.
Although standard and custom validation cannot be used together, there are some situations where you might need both. Users can use both controllers together with VisualForce Controller Extensions.
VisualForce Controller Extensions
Just imagine you need to insert a VisualForce page on a record detail page button. Then you need a standard controller to access the record ID, but you also want to filter records based on specific criteria that can only be created with custom controllers. This is where the VisualForce controller extension comes into the picture. The VisualForce Controller extension is an Apex class that lets you manipulate records while accessing standard controller object records.
Let’s take a look at an example of the VisualForce page.
VisualForce Page Example
To create a VisualForcepage, log in to your org and then go to setup -> Developer Console. Then inside developer console, click File -> New -> VisualForce Page.
Below is an example of a small VisualForce page that uses a standard controller to create a contact record –
<apex:page standardController=”Contact”>
<apex:form >
<apex:pageBlock title=”Create Contacts”>
<apex:pageBlockSection >
<apex:inputField value=”{! Contact.FirstName }”/>
<apex:inputField value=”{! Contact.LastName }”/>
<apex:inputField value=”{! Contact.Email }”/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton action=”{! save }” value=”Save” />
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
Conclusion
VisualForce is a component-based user interface framework that allows users to create a customized and effective web interface. The framework is a component of Salesforce’s Force.com that is built to streamline the process of developing and deploying cloud-based applications and websites. Developers define VisualForce pages with VisualForce Markup and VisualForce Controller. The VisualForce Markup handles what elements or components should appear on the page and how should they appear.
