Learn All About Visualforce in Salesforce - The Complete Guide

Introduction

With the help of the web development framework Visualforce, programmers may create complex, unique user interfaces for desktop and mobile apps that can be hosted on the Lightning Platform. You can use Visualforce to create apps that follow the Lightning Experience's design guidelines as well as your own entirely unique user interface.

Developers can add new functionality to existing Salesforce features, replace existing features with new ones, and create entirely new apps using Visualforce. Use the robust standard controller functions that are already included or create your own unique business logic with Apex. You can develop tools for your own business or make programs to sell on the AppExchange.

Anyone who has developed web applications is familiar with visual force app development. By combining components, HTML, and optional stylistic components, developers build Visualforce pages. For a more lively and rich user experience, Visualforce can integrate with any mainstream web technology or JavaScript framework. There is a distinct URL for each page. When a page is accessed, the server renders the page into HTML, handles any data processing necessary for it, and sends the output to the browser for display.

Don't forget to check out: Share Visualforce Pages Between Classic and Lightning Experience | Salesforce Trailhead

Developers can use Visualforce to create a Visualforce page definition. A page definition consists of two primary elements:

• Visualforce Markup
• A Visualforce Controller

Visualforce Markup

Visualforce markup consists of Visualforce tags, HTML, JavaScript, or any other Web-enabled code contained within a single <apex: page> tag. The markup specifies which user interface elements should be present on the page and how they should be displayed.

Visualforce Controllers

A connected Visualforce markup component has a set of instructions called a Visualforce controller that describe what occurs when a user interacts with that component, such as clicking a button or link. Additionally, controllers provide users access to the data that should be presented on a page and have the power to change how components behave.

Developers have two options for adding controller logic: using a standard controller from the Lightning platform or creating a custom controller by creating a class in Apex.

Standard Controller: A standard controller consists of the same functionality and logic that is used for a standard Salesforce page. For example, if you use the standard Accounts controller, clicking a Save button on the Visualforce page results in the same behaviour as clicking Save on a standard Account edit page.

Custom Controller: A custom controller is a class created in Apex that implements all of a page's functionality independently of a standard controller. You can specify new navigational items or actions when using a custom controller, but you must also reimplement any functionality that was previously supplied by a standard controller.

Developers can also use extensions for adding extra functionality to standard or custom controllers. A controller extension is an Apex class that extends or replaces the behaviour of a standard or custom controller. Extensions allow you to use another controller's functionality while adding your own custom logic.

Visualforce Pages Have Various Use Cases

Visualforce pages can be used by developers to:

• Standard buttons, such as the new button for accounts or the Edit button for contacts, can be overridden.
• Override tab overview pages, such as the home page of the Accounts tab.
• Define custom tabs
• Include components in detailed page layouts.
• Create dashboard components or personalized help pages.
• Customize, extend, or integrate the Salesforce console's sidebars (custom console components)
• In the Salesforce mobile app, add navigation menu items and actions.

Check out another amazing blog by Parvez here: RemoteAction Annotation In Apex | Salesforce Apex Developer Guide

Example of VF Page:

<apex:page standardController="Account" recordSetVar="accounts"
tabstyle="account" sidebar="false">
    <apex:pageBlock >
        <apex:form >
          <apex:pageBlockTable value="{!accounts}" var="a" id="list">
            <apex:column value="{!a.name}"/>
            <apex:column value="{!a.AccountNumber}" />
          </apex:pageBlockTable>
        </apex:form>
     </apex:pageBlock>
</apex:page>