Understanding VisualForce Concepts

Prakher Chaturvedi
4 min readMay 20, 2020

--

We already have taken various Apex concepts in previous stories. Now let us dive into VisualForce. In this story, we will be understanding what Visualforce is and some tags which will be useful for creating visualforce pages.

What is VisualForce?

Visualforce is a web development framework that enables developers to build sophisticated, custom user interfaces for mobile and desktop apps that can be hosted on the Lightning Platform.
Visualforce enables developers to extend Salesforce’s built-in features, replace them with new functionality, and build completely new apps. Use powerful built-in standard controller features, or write your own custom business logic in Apex.

VisualForce is a tag-based mark-up language. It uses basic tags which are very much similar to HTML.

Some points that can completely describe visualforce.
VisualForce:
-Component-based UI Framework
-tag-based markup language, have tags similar to HTML

When to use:
-to override standard salesforce pages with visualforce page
-create custom flow
-define navigational patterns for optimal, efficient app interaction

Advantage:
MODEL VIEW CONTROLLER development style
can be integrated with HTML,CSS,AJAX, Jquery

So, now we have an understanding of what visualforce is and what it is used for. Next question is how to use it.

First Things First, You need to enable development mode from My settings>Advanced User Settings.

Path to Reach Development mode
Enabling Development Mode

So, now we have enabled our development mode settings and we are able to create visualforce pages. Before starting with the visualforce page, Basic understanding of visual force tags is very important.

VisualForce Tags :

Tags in visualforce can broadly be divided into the below-mentioned categories.

  • Page Tags
  • Input Tags
  • Output Tags
  • Form Tags
  • Action Tags

Page Tags:
These tags are most important as they define the structure of a visualforce page. <Apeg:page> tag acts same as what <Html> tag does in an HTML page. Everything should be written under <Apex: Page> tag.
<apex:page>
-a basic tag used to create a VF page
-some attributes are sidebar,showheader,

<apex:pageMessage>
-presents a custom message on vf page
-has one required attribute named Severity, values are confirm, info, warning, and error
-The strength attribute is used to show icon next to the message. values are 0 to 3
-summary attribute to type message.

<apex:pageBlock>
creates an area within the page where multiple sections can be created
fields, buttons, tables, links can be displayed

<apex:pageBlockSection>
Creates a section inside pageblock
used inside pageblock

<apex:pageBlockSectionItem>
arranges item left right

<apex:pageBlockButtons>
places button at the top and bottom of vf page
buttons are created by <apex:commandButton> and can only be used under <apex:form> tag.

INPUT TAGS:

Input tags are used to take inputs from the user and can only be used between <apex: form> tags.
Some of the input tags are :
<apex:inputText>
<apex:inputTextArea>
<apex:inputCheckBox>
<apex:inputFile>
<apex:inputSecret>
<apex:inputHidden>

In case of input tags there names are self explanatory.

Let us take an example, where we write code for some basic tags and try to understand them.

A basic VF code to understand the usage of tags

As discussed, Everything stays under <apex: page> and you can see below result page of what this code does for better understanding.

Page created by Above Code

I will be taking up standard controllers and standard list controllers before jumping into a trailhead module for visualforce. Visualforce is an essential thing to learn before we get into salesforce lightning components.

How Can You Contribute?

  • Connect with me on Twitter or Linkedin or Instagram.
  • Provide me continuous feedback and suggestions for moving ahead in this journey.
  • Share the series on Twitter and LinkedIn.

Posts In This Series :

Salesforce Development — Learning Apex Programming, VisualForce, Lightning Components
First Step toward Learning Apex Programming
Day 2 in Apex — Writing apex codes
Working with sObjects, SOQL, and SOSL
Understanding Salesforce Triggers and working with them
Apex Test classes and methods
Understanding VisualForce Concepts
Controllers in VisualForce

--

--

Prakher Chaturvedi

Looking for remote opportunities | Salesforce Developer | Lightning Web Components | APEX | 5x Certified | Trailhead Ranger | Content Creator (Medium)