Visual Force Page - Salesforce..

Get to Know the about the visual Force Page..

What is Visual Force Page ?

-Visualforce is a markup language developed by Salesforce.com that contains Components and Controllers.

-Visualforce Pages have some unique components that make it easy to create a feature-rich user interface for Force.com.

-Standard web technologies such as HTML, CSS, JavaScript, and JQuery are used by Visualforce Page.

-For the frontend design, it uses XML-like syntax, and for the backend, it uses apex to implement business logic.

Where to use the Visual Force Page

1. To override the standard buttons such as New, Save….etc.

2. To create VF tabs or to override custom tabs.

3. To embed components in a detailed page layout.

4. To create dashboard components on custom help pages.

Visualforce Components

Small and reusable piece of functionality for implementing high Visualforce page is referred to as Visualforce components. Salesforce.com mainly provides two types of components, i.e.,

1)Standard and

2)Custom components.

Standard Component

Salesforce.com provide more than 50 standard user interface components which are started with <apex: TagName></apex: TagName>. By using these standard components, we can create the perfect look and feel of Salesforce without taking additional support from HTML and CSS.

Custom Component

Custom components are the user defined components and tags that starts with <c: TagName></c: TagName>

Visualforce Controller

A set of instructions that defines what happens next after interacting with the components and tags specified in the associated Visualforce markup. Salesforce provides mainly three types of controllers, i.e.,

1)Standard controllers,

2) Custom controllers, and

3)Extension controllers.

Standard Controller

The controller which is used for customizing both Standard and Custom objects is referred to as the Standard controller. The standard controller has access to the salesforce database. It automatically adjusts to the type of pages based on where it is called.

Custom Controller

Unlike the Standard controller, the Custom controller is an Apex class that is used for implementing all the login of the VF page without leveraging the standard functionality. The custom controller is mainly used for creating rich UI with complex data sets.

Extension Controllers

Just like the Custom controller, the Extension controller is also an Apex class that is used for adding and extending the functionality of the Standard and Custom controller. The Extension controller is also used for overriding the methods.

Visualforce Tags

Visualforce tags are used to build high quality applications by developers. Visualforce consists of a series of XML markup tags.There are nearly 90 tags available for Visualforce pages.

Different types of Visualforce Tags are

• Input tags.

• Out put tags.

• Select tags.

• Form tags.

• page tags.

• action tags.

• Style tags.

• other.

Creating Visualforce pages in salesforce

Writing a Simple VisualForce page to

1) Click on Gear Icon setup -> Developer Console -> File -> New and Select on Visulaforce Page.

A new Window opens with the Name.Enter the name of the VFpage.

2) Writing a VF page, so the basic tags used in this page are :

---Standard Controller tag is used for a Contact object which is a standard Object.

---Section Header to display the Title and the Subtile of the VF page.

---Form is a section of a Visualforce page that allows users to enter input and then submit it with an <apex:commandButton> or <apex:commandLink>. The body of the form determines the data that is displayed and the way it's processed. It's a best practice to use only one <apex:form> tag in a page or custom component.

---Here Save Cancel and View are the Command Buttons which are standard Contact controller, clicking a Save button in a Visualforce page results in the same behavior as clicking Save on a standard Contact edit page.

---InputField

Input Field is used as an expression that references the Salesforce field to associate with this inputField. For example, if you want to display an input field for an account's name field, use value="{!account.name}".

--PageBlock Sections represents a section of data with in an apex pageBlock . It is like a section in a standard Salesforce page layout. This component consists of one or more columns, each of which spans two cells, one is for a field label and the other one is for its value. So here we have divided in two columns.The first Column is Last Name, Phone and Account Name and second column is of First Name and Email.

3) Click on preview and the page is created and it would be displayed in the next tab.

4) Below is the VF page for the Contact Object displaying the Fields.Once the data is entered in the fields and it is saved, we can see the same on the contact object.

5)When we check the Contact object ,the record is displayed, which we have created with the VF page.

So this is how a VF page is created with the standard object.

Now Salesforce has been updated from Classic to Lightning with more advanced features. So the Use of Visualforce with Lightning Web Components helps to modify the organization’s front end UI and functionality.

But for the most cutting-edge, effective, and responsive functionality, Salesforce advises adopting Lightning Web Components over Visualforce wherever practical.