Salesforce Visualforce is a robust framework for building custom user interfaces (UI) in Salesforce. With Visualforce, developers can create dynamic pages, integrate external content, and tailor the Salesforce experience to meet unique business needs.

This tutorial provides a step-by-step guide to creating a custom Visualforce page that displays a list of accounts.

---

What Is a Salesforce Visualforce Page?

A Visualforce page is a markup language similar to HTML, used for creating custom UIs in Salesforce. Visualforce offers:

• Apex Integration: Dynamically fetch and manipulate Salesforce data.
• Customization: Design layouts that go beyond standard Salesforce components.
• Flexibility: Embed Visualforce pages in Salesforce tabs, dashboards, or record pages.

---

Visualforce Page Use Case

Objective

We’ll create a Visualforce page that:

1. Displays a list of accounts.
2. Includes a search box to filter accounts by name.

---

Step-by-Step Guide

Step 1: Create an Apex Controller

1. What Is an Apex Controller?
   • An Apex controller fetches and manipulates data for the Visualforce page. It acts as the backend logic.
2. Create the Controller:Explanation:
   • Navigate to Setup → Apex Classes → New.
• The AccountController fetches all accounts initially.
• The searchAccounts method filters accounts based on the searchKey.

Add the following code:

public class AccountController {
    public String searchKey { get; set; }
    public List<Account> accounts { get; set; }

    public AccountController() {
        accounts = [SELECT Id, Name, Industry, Phone FROM Account LIMIT 10];
    }

    public void searchAccounts() {
        accounts = [SELECT Id, Name, Industry, Phone FROM Account WHERE Name LIKE :('%' + searchKey + '%')];
    }
}

---

Step 2: Create the Visualforce Page

1. Navigate to Visualforce Pages:
   • Go to Setup → Search for Visualforce Pages → Click New.
2. Add the Page Code:Explanation:
3. • The apex:inputText is bound to the searchKey variable.
   • The apex:commandButton triggers the searchAccounts method.
   • The apex:pageBlockTable displays account data dynamically.

Use the following code:

<apex:page controller="AccountController">
    <apex:form>
        <apex:pageBlock title="Account Search">
            <apex:pageBlockSection>
                <apex:inputText value="{!searchKey}" label="Search Accounts"/>
                <apex:commandButton value="Search" action="{!searchAccounts}" rerender="results"/>
            </apex:pageBlockSection>
            <apex:pageBlockTable value="{!accounts}" var="acc" id="results">
                <apex:column value="{!acc.Name}" headerValue="Account Name"/>
                <apex:column value="{!acc.Industry}" headerValue="Industry"/>
                <apex:column value="{!acc.Phone}" headerValue="Phone"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

---

Step 3: Preview and Test

1. Preview the Page:
   • Save the Visualforce page and click Preview to open it in a new tab.
2. Test the Functionality:
   • Enter a keyword in the search box and click Search.
   • Verify that the account list updates based on the search criteria.

---

Step 4: Add the Visualforce Page to Salesforce UI

1. Embed in a Salesforce Tab:
   • Navigate to Setup → Tabs → Visualforce Tabs → New.
   • Select your Visualforce page and give the tab a name (e.g., Account Search).
2. Add to a Record Page (Optional):
   • Go to Lightning App Builder → Edit a record page.
   • Drag the Visualforce component to the layout and select your page.

---

Best Practices for Visualforce Pages

1. Optimize Performance:
   • Limit query results to avoid hitting governor limits.
   • Use LIMIT and OFFSET for paginated data.
2. Validate Input:
   • Add error handling in Apex controllers to handle invalid or malicious inputs.
3. Leverage CSS:
   • Use custom CSS or Visualforce components to enhance the page’s visual appeal.
4. Test Thoroughly:
   • Validate functionality across different profiles and permissions.

---

Conclusion

Salesforce Visualforce pages provide unparalleled flexibility for creating custom UIs tailored to business requirements. This tutorial demonstrated how to build a functional Visualforce page for searching and displaying account data. By mastering Visualforce and Apex controllers, you can extend Salesforce capabilities to deliver dynamic and efficient solutions for your organization.