Introduction

Since its inception, Salesforce has created a broad platform for creating on-demand applications for its users. Unlike other application development platform, Salesforce lightning platform offers specific tools for defining further details such as:

• The data model
• Business logic, which includes the rules that etail how data can be manipulated for benefit
• Specific layouts that specify how your data should be displayed effectively

While the tools that are used to build data models and business logic for applications are considered to be the powerful solutions that run successfully on salesforce lightning platform servers. Well, the existing tools for defining User interfaces for certain limitations are as:

• Page layouts: It is the point and click tool that allows your application developers to arrange fields, buttons and other related lists on record detail pages. It moreover does not provide much flexibility in how sets of information are displayed to the users. Remember, the fields should always appear above related lists and buttons must always appear above fields, and s-controls and custom links.
• S-controls - It is the tool that allows an application developer to display custom HTML in a detail page or custom tab. This tool serve you with more flexibility than page layouts, but:

  • This tool helps you execute from within a browser, causing a poor performance if displaying or updating values from more than a few records in a specific period of time.

  • It doesn't serve an easy way to provide custom UI elements the same look and feel as standard Salesforce pages.

  • It requires developers to enforce field distinctiveness and various other metadata dependencies on their own.

Salesforce has introduced Visualforce as the next-generation solution for building enlighted custom user interfaces on the Salesforce Lightning platform.

Visualforce is available for both desktop browsers and for the people who use the Salesforce mobile app.

Moreover, for desktop browsers, it is available in both the Lightning Experience and Salesforce Classic. Visualforce pages and custom iframes aren’t supported in Salesforce Lightning Experience on iPad Safari.

Important Things to remember Regarding Visualforce

VisualForce Types:

There are two type of VisualForce Framework such as:

• Component-based UI Framework
• Tag-based markup language, have tags similar to HTML

When to use Visualforce tags salesforce?

There are certain rules to use visualforce tags salesforce, which are mentioned below:

• It is used to override standard salesforce pages along with visualforce page
• Visualforce tags salesforce is used to create custom flow
• Visualforce tags Salesforce is used to define navigational patterns for optimal, effective app interaction

Advantages of Visualforce Tags Salesforce:

You can easily create a MODEL  VIEW CONTROLLER development style with HTML, CSS, AJAX, and Jquery.
We hope, till now you have an understanding of what visualforce is and what it is used for. 

Now, the question arises is How to use Visualforce Tags Salesforce?

The first thing you need to know is that you are required to enable development mode by visiting My setting>Advanced User Settings.

Visualforce Tags Salesforce

Enabling Development Mode

So, now we have enabled our development mode settings and we are able to create visualforce pages, we should have a basic understanding of visual force tags is very necessary.

A single Visualforce page must be wrapped inside a single page component tag. This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated

tag. Visualforce tags can be divided into different types. They are

• Input tags.
• Output tags.
• Select tags.
• Form tags.
• Page tags.
• Action tags.
• Style tags.

apex:actionRegion apex:listViews

apex:actionSupport apex:message

apex:commandButton apex:pageBlockButtons

apex:commandLink apex:pageBlockSection

apex:component apex:pageBlockSectionItem

apex:dataList apex:pageMessages

apex:dataTable apex:panelBar

apex:define apex:panelBarItem

apex:detail apex:panelGrid

apex:form apex:repeat   

apex:image apex:sectionHeader

apex:include apex:selectCheckboxes

apex:includeScript apex:selectList

apex:inlineEditSupport apex:selectOption

apex:inputCheckbox apex:selectOptions

apex:inputField apex:selectRadio

apex:inputFile apex:stylesheet

apex:inputHidden apex:tab

apex:inputSecret apex:tabPanel

apex:inputText apex:toolbar

apex:inputTextarea apex:toolbarGroup

apex:insert apex:variable

apex:form:

A section of a Visualforce page that allows users to enter input and then submit it with an or .

Example

apex:image:

A graphic image, rendered with the HTML > <>> <><><>

apex:include:

A component that inserts a second Visualforce page into the current page.

Example   

Second page Name is include

Salesforce Training For Administrators & Developers

No cost for a Demo ClassIndustry Expert as your TrainerAvailable as per your scheduleCustomer Support Available

apex:includeScript:

By using tag a visualforce page can access  a JavaScript library.

[removed]

jQuery.noConflict();

jQuery(document).ready(function() {    

jQuery("a").click(function() {

alert("Hello world, part 2!");

        });

    });

[removed]

apex:inlineEditSupport: 

This component provides inline editing support to and various container components. In order to support inline editing, this component must also be within an tag.

Example

hideOnEdit="editButton" event="ondblclick" 

changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>

 

apex:inputCheckbox: 

An HTML input element of type checkbox. Use this component to get user input for a controller method. This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated

tabstyle="opportunity">

apex:inputField:

An HTML input element for a value that corresponds to a field on a Salesforce object. The component respects the attributes of the associated field, including whether the field is required or unique, and the user interface widget to display to get input from the user. For example, if the specified component is a date field, a calendar input widget is displayed. When used in an , tags always display with their corresponding output label.

Example

apex:inputFile:

A component that creates an input field to upload a file.

Example

Read: What Is Interesting About Salesforce Internships?

/*** Controller ***/

public class documentExt {

publicdocumentExt(ApexPages.StandardController controller) {

        Document d = (Document) controller.getRecord();

d.folderid = UserInfo.getUserId(); //this puts it in My Personal Documents

    }                 

}   

apex:inputHidden:

is used when you need values but do not want to display on the VF page but can be accessed/set/reset through JavaScript or apex. It is basically used to temporarily store value.

Example

apex:inputSecret:

An HTML input element of type password. Use this component to get user input value that is masked as the user types.

Example

apex:inputText:

An HTML input element of type text. It supports only text, number values, which the user passed from the controller.

Example

apex:inputTextarea:

A text area input element. Use this component for a value that

more characters require a text area. Example

Current description: {!contract.description}

Change description to:

apex:insert:

A template component that declares a named area that must be defined by component in another Visualforce page. Use this component with the and components to share data between multiple pages.

apex:listViews: 

The list view picklist for an object, including its associated list of r records for the currently selected view. In standard Salesforce applications this component d   is displayed on the main tab for a particular object.

Example

Learn Salesforce in the Easiest Way

Learn from the videos Learn anytime anywhere Pocket-friendly mode of learning Complimentary eBook available

apex:messages:

All messages that were generated for all components on the current p   page. If an or component is not included in a page,  m  o   most warning and error messages are only shown in the debug log.

Enter an alphabetic character for the "Close Date," then click Save to see what happens.

messages appear in the pageMessages component." severity="warning" strength="3" />

apex:outputField:

A read-only display of a label and value for a field on a Salesforce object. An component respects the attributes of the associated field, including how it should be displayed to the user. For example, if the specified component is a currency field, the appropriate currency symbol is displayed. Likewise, if the component is a lookup field or URL, the value of the field is displayed as a link.

Example

apex:outputLabel:

A label for an input or output field. Use this component to provide a label for a controller method that does not correspond to a field on a Salesforce object.

Read: How to Learn Salesforce? Upskill in Just 15 Ways!

Example

apex:outputLink:

Itislink of a URL. Itis like HTML equivalent, the body of an  is the text or image that displays as the link. To add query string parameters to a link, use nested components.

Example

www.salesforce.com

apex:panelBar:

A page area that includes one or more tags that can expand when a user clicks the associated header. When an is expanded, the header and the content of the item are displayed while the content of all other items is hidden. When another is expanded, the content of the original item is hidden again. An can include up to 1,000 tags.

Example

data1

data2

data3

apex:panelBarItem:

A section of an that can expand or retract when a user clicks the section header. When expanded, the header and the content of the is displayed. When retracted, only the header of the

displays.

apex:panelGrid:

Renders an HTML table element in which each component found in the body of the is placed into a corresponding cell in the first row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell.

Example

apex:panelGroup:

A container for multiple child components so that they can be displayed in a single panelGrid cell. An must be a child component of

an.

apex:param: 

“A parameter for the parent component. The component can only be a child of the following components: , , , , , , ’’. Example

, , , , , , ’’.

Example

public with sharing class test1 {

public string value { get; set;}

public void testdirect(){

system.debug(value);

    }

public void testinput(){

value = apexpages.currentPage().getParameters().get('inpval');

system.debug(value);

    }

}

Visualforce

[removed]

functiontestinputJS(){

varstr = document.getElementById('testinput').value;

if(str.length>4){

str= str.substring(0,4);

}

passToController(str);

  }

[removed]

apex:relatedList: 

A list of Salesforce records that are related to a parent record with a lookup or master-detail relationship. Example

    You're looking at some related lists for {!account.name}:

Titles can be overriden with facets

apex:repeat:

An iteration component that allows you to output the contents of a collection according to a structure that you specify. The collection can include up to 1,000 items.

Example

Public with sharing class test1 { 

Public ListgetShowAccount(){

            ListlstAcc=new List([select id,name,industry from Account where industry!=null]);

returnlstAcc;

        }

    }

Visualforce

Account Name	Industry
{!acc.Name}	{!acc.Industry}

apex:selectList:

A list of options that allows users to select only one value or multiple values at a time, depending on the value of its multi-select attribute.

Example

Read: What is Salesforce Workbench? Salesforce Workbench Tutorial Guide

/* controller*/

public class picklist {

public listoption {set;get;}

public listcityNames {set;get;}

public string selected {set;get;}

public picklist(){

option=new list();

cityNames= new list {'CANADA', 'MEXICO','US'};

cityNames.sort();

selectoption op= new selectoption('none','-none-');

for(string c:cityNames){

selectoption op1= new selectoption(c,c);

option.add(op1); 

        }

    }

}

city Name  :

apex:selectOption:

A possible value for an or component. The component must be a child of one of those components.

Example

apex:selectOptions:

A collection of possible values for an , , or component. An component must be a child of one of those components. It must also be bound to a collection of selectOption objects in a custom Visualforce controller.

Example

/*** Controller: ***/

public class sampleCon {

String[] countries = new String[]{};

publicPageReference test() {

return null;

    }

public ListgetItems() {

        List options = new List();

options.add(new SelectOption('US','US'));

options.add(new SelectOption('CANADA','Canada'));

options.add(new SelectOption('MEXICO','Mexico'));

return options;

    }

public String[] getCountries() {

return countries;

    }

public void setCountries(String[] countries) {

this.countries = countries;

    }

}

You have selected:

a:{!c}

apex:selectRadio:

A set of related radio button input elements, displayed in a table. Unlike checkboxes, only one radio button can ever be selected at a time.

Example

/*** Controller ***/

public class sampleCon {

    String country = null;

publicPageReference test() {

return null;

    }

public ListgetItems() {

        List options = new List(); 

options.add(new SelectOption('US','US')); 

options.add(new SelectOption('CANADA','Canada')); 

options.add(new SelectOption('MEXICO','Mexico')); return options; 

    }

public String getCountry() {

return country;

    }

public void setCountry(String country) { this.country = country; }

}

You have selected:

apex:stylesheet:

A link to a stylesheet that can be used to style components on the Visualforce page. When specified, this component injects the stylesheet reference into the head element of the generated HTML page.

Example

Thisbackgroud color is taken from test.css file in static resource

 

apex:tab:

A single tab in an . The component must be a child of an .

Example

content for tab one

content for tab two

apex:toolbar:

A stylized, horizontal toolbar that can contain any number of child components. By default, all child components are aligned to the left side of the toolbar. Use an component to align one or more child components to the right.

Example

salesforce

apex developer network

Enter Text

apex:variable:

A local variable that can be used as a replacement for a specified expression within the body of the component. Use to reduce repetitive and verbose expressions within a page.

Example

/*--controller--*/

public with sharing class test1 {

public List collection {

get {

if (collection == null) {

collection = new List();

for (Account a : [SELECT ID, Name FROM Account LIMIT 10]) {

collection.add(a.Name);

                }

            }

return collection;

        }

private set;

    }

}

        ({!rowNum}){!row}

!row}

    .bPageBlock .requiredInput .requiredBlock{background-color: #F6FBF6;}  

    .requiredInput .requiredBlock::before { display: block; content: "*"; font-size: 1.5em; font-weight: bold; color: #c00; margin-left: -4px; margin-top: -2px; }  

table

    {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

    }

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

    }

 

Conclusion

Visualforce is a framework in Salesforce which includes a tag-based markup language that is used to write Visualforce pages. You may find visualforce tags in Salesforce orgs that you may come across. As you know that the page-centric is for all backend processing being done with ApexCode on the Server-side whilst lightning is considered to be App-centric along with the components themselves.
This can either have a logical process on the client-side who is using Javascript code. Or else it can be used on the server-side by the people who are using Apex code depending on what the component is designed to do.

Moreover, it's good to know about Visualforce and also efficient to understand where we come from. In case you are new to Salesforce, you should invest your time to learn lightning over Visualforce.

You must be thinking Why? It is because the  lightning component Framework enhances in richness of what Visualforce can do after all, its been around since the year 2006.
However, using the above-mentioned Apex tags, you can easily write logic to your Salesforce pages. Good luck!

Feel free to Share  your thoughts and experience in the below-mentioned comment section!

FaceBook Twitter Google+ LinkedIn Pinterest Email