A Comprehensive Guide to Visualforce Pages in Salesforce
Introduction Visualforce is a powerful framework in Salesforce that enables developers to create custom user interfaces using a combination of HTML, Apex, and JavaScript. Whether you are a beginner or an experienced developer, mastering Visualforce can significantly enhance your ability to customize Salesforce applications. In this blog, we’ll explore the basics, key components, and best practices for working with Visualforce pages.
Understanding Visualforce: Visualforce is a markup language similar to HTML but specifically designed for Salesforce. It allows developers to build custom pages that can be used within Salesforce applications. These pages can be embedded in standard layouts, used as standalone applications, or integrated with Lightning components.
Key Features of Visualforce:
- Tag-Based Markup Language: Uses <apex> tags similar to HTML elements.
- Integration with Apex: Allows dynamic data handling using Apex controllers.
- Standard & Custom Controllers: Supports built-in Salesforce controllers or custom-built Apex controllers.
- Reusable Components: Enables developers to create custom components for better reusability.
- Security & Permissions: Follows Salesforce security model, ensuring data protection.
How a Visualforce Page Works
A Visualforce page consists of two primary components:
- Visualforce Markup – Similar to HTML, this defines the page’s structure using Visualforce tags.
- Controller – An Apex class that defines the actions triggered by user interactions.
Execution Lifecycle of a Visualforce Page
Each Visualforce page undergoes compilation by the Page Compiler before being executed via the Page Renderer within the Salesforce Application Server.
Creating a Basic Visualforce Page To create a simple Visualforce page, navigate to Setup > Visualforce Pages > New and enter the following code:
<apex:page>
<h1>Welcome to Visualforce!</h1>
<p>This is a simple Visualforce page.</p>
</apex:page>
Save and preview the page by appending its name to the Salesforce domain (e.g., https://yourdomain.salesforce.com/apex/PageName).
Visualforce Components
- Visualforce Markup
- Contains Visualforce tags for UI design.
- Tags are not case-sensitive and require closing tags.
- Prefixed with apex: (e.g., <apex:page>).
- Visualforce Controller
- Handles the business logic using Apex, SOQL, SOSL, and DML statements.
- A page can reference one or more controllers.
Understanding Visualforce Controllers
A controller defines the business logic and acts as a mediator between the UI (View) and Database (Model). Every Visualforce page references a controller to invoke its actions.
Common Visualforce Page Tags
- Page Tag (<apex:page>): Root tag of every Visualforce page.
- Setup Attribute: Determines if the Visualforce page appears in the setup menu (true or false).
- Sidebar Attribute: Controls sidebar visibility (true or false).
- ShowHeader Attribute: Controls Salesforce header visibility (true or false).
- TabStyle Attribute: Sets the tab style for a specific object.
- StandardController Attribute: Defines the standard controller to be used (e.g., standardcontroller=”Account”).
- Controller Attribute: References a custom Apex class.
- Extensions Attribute: Used alongside standard/custom controllers for additional functionality.
Example of a Visualforce page using a custom controller:
<apex:page controller=”MyCustomController”>
<h1>Account Details</h1>
<p>Account Name: {!account.Name}</p>
</apex:page>
And the corresponding Apex controller:
public class MyCustomController {
public Account account { get; set; }
public MyCustomController() {
account = [SELECT Name FROM Account LIMIT 1];
}
}
Best Practices for Visualforce Development
- Use Standard Controllers When Possible: They are optimized for Salesforce and require minimal coding.
- Avoid SOQL Queries in Loops: This prevents governor limit issues.
- Leverage Custom Components: Improves code reusability and modularity.
- Follow Salesforce Security Guidelines: Use proper field-level security checks.
- Test Thoroughly: Always test pages for performance, security, and usability.
Rendered vs. ReRender vs. RenderAs
- Rendered Attribute
- Boolean flag (true or false).
- Controls if an object/page/component should be displayed.
- RenderAs Attribute
- Used in the <apex:page> tag.
- Converts the Visualforce page to a PDF when renderAs=”pdf” is used.
- ReRender Attribute
- Used for specific objects or command buttons.
- Refreshes selected objects instead of the entire page.
Example Usage:
<apex:page renderAs=”pdf”>
…
</apex:page>
<apex:commandButton rerender =”component1, component2″>
Conclusion Visualforce remains a valuable tool for building customized Salesforce experiences. By understanding its key concepts and best practices, developers can enhance Salesforce’s functionality to meet unique business needs. Whether using standard controllers or creating advanced components, mastering Visualforce can elevate your Salesforce development skills.
Do you use Visualforce in your Salesforce projects? Share your experiences in the comments below!