Webinar Alert : Mastering  Manual and Automation Testing! - Reserve Your Free Seat Now

- Salesforce Blogs -

VisualForce Tags Salesforce | An Ultimate Learning Guide for 2023



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

Visualforce Tags Salesforce

Reach Development

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

Salesforce Training For Administrators & Developers

  • No cost for a Demo Class
  • Industry Expert as your Trainer
  • Available as per your schedule
  • Customer 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

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!

fbicons FaceBook twitterTwitter lingedinLinkedIn pinterest Pinterest emailEmail

     Logo

    Anusha Tyagi

    She is an expert in writing informative blogs and article. She is best known for IT, Technical trends and career path education. Anusha has been producing distinctive and engaging content for the end-users.


Comments

Trending Courses

Cyber Security Course

Cyber Security

  • Introduction to cybersecurity
  • Cryptography and Secure Communication 
  • Cloud Computing Architectural Framework
  • Security Architectures and Models
Cyber Security Course

Upcoming Class

11 days 11 Oct 2024

QA Course

QA

  • Introduction and Software Testing
  • Software Test Life Cycle
  • Automation Testing and API Testing
  • Selenium framework development using Testing
QA Course

Upcoming Class

5 days 05 Oct 2024

Salesforce Course

Salesforce

  • Salesforce Configuration Introduction
  • Security & Automation Process
  • Sales & Service Cloud
  • Apex Programming, SOQL & SOSL
Salesforce Course

Upcoming Class

2 days 02 Oct 2024

Business Analyst Course

Business Analyst

  • BA & Stakeholders Overview
  • BPMN, Requirement Elicitation
  • BA Tools & Design Documents
  • Enterprise Analysis, Agile & Scrum
Business Analyst Course

Upcoming Class

4 days 04 Oct 2024

MS SQL Server Course

MS SQL Server

  • Introduction & Database Query
  • Programming, Indexes & System Functions
  • SSIS Package Development Procedures
  • SSRS Report Design
MS SQL Server Course

Upcoming Class

4 days 04 Oct 2024

Data Science Course

Data Science

  • Data Science Introduction
  • Hadoop and Spark Overview
  • Python & Intro to R Programming
  • Machine Learning
Data Science Course

Upcoming Class

11 days 11 Oct 2024

DevOps Course

DevOps

  • Intro to DevOps
  • GIT and Maven
  • Jenkins & Ansible
  • Docker and Cloud Computing
DevOps Course

Upcoming Class

-0 day 30 Sep 2024

Hadoop Course

Hadoop

  • Architecture, HDFS & MapReduce
  • Unix Shell & Apache Pig Installation
  • HIVE Installation & User-Defined Functions
  • SQOOP & Hbase Installation
Hadoop Course

Upcoming Class

5 days 05 Oct 2024

Python Course

Python

  • Features of Python
  • Python Editors and IDEs
  • Data types and Variables
  • Python File Operation
Python Course

Upcoming Class

19 days 19 Oct 2024

Artificial Intelligence Course

Artificial Intelligence

  • Components of AI
  • Categories of Machine Learning
  • Recurrent Neural Networks
  • Recurrent Neural Networks
Artificial Intelligence Course

Upcoming Class

12 days 12 Oct 2024

Machine Learning Course

Machine Learning

  • Introduction to Machine Learning & Python
  • Machine Learning: Supervised Learning
  • Machine Learning: Unsupervised Learning
Machine Learning Course

Upcoming Class

4 days 04 Oct 2024

 Tableau Course

Tableau

  • Introduction to Tableau Desktop
  • Data Transformation Methods
  • Configuring tableau server
  • Integration with R & Hadoop
 Tableau Course

Upcoming Class

5 days 05 Oct 2024

Search Posts

Reset

Receive Latest Materials and Offers on Salesforce Course

Interviews