Mytutorialrack

Menu
Youtube Linkedin-in Facebook Twitter

This blog post covers the Visualforce tags in great detail. This blog post can also be referred as Visualforce tutorial for beginners.

What is Visualforce?

It is the component-based user interface framework for the Force.com platform.
Visualforce consist of tag-based markup language, similar to HTML. For example, In HTML we have tags like <body> tag and <p> tag for paragraph, Similarly in visualforce we also have tags.
To check out complete Visualforce course  click here: https://courses.mytutorialrack.com/p/visualforce-tutorial-for-beginners

When you should use visualforce?

Visualforce consists of a tag-based markup language which gives Salesforce developers a more powerful way of building applications and customizing the Salesforce user interface.

 What can you do with Visualforce?

  • You can override the standard salesforce pages with custom Visualforce page.
  • You can also create your own custom flow control through an application.
  • Define navigation patterns and data-specific rules for optimal, efficient application interaction.

 

Advantages of visualforce

  • Visualforce follows Model View Controller (MVC) development style.
  • Visualforce Editor Panel is present for every visualforce page below the page.
  • Visualforce contains large number of built-in components.
  • Visualforce cab also be integrated with HTML, CSS, Ajax, jQuery.
  • Visualforce is flexible and customizable with web technologies.

 

Visualforce tags can be divided into following categories:

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

We will start with visualforce page tags. Below is the list of tags available under page tag category.

  • <apex:page>
  • <apex:pageMessage>
  • <apex:pageBlock>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlocktable>
  • <apex:pageBlockButtons>

 
<apex:page> :-
This is a basic tag that creates a visualforce page. <apex:page> tag can only be used once in a page  and all the other  visualforce Tags have to be enclosed in this <apex:page> tag.
<apex:pageBlockButtons?
Whenever a button is created using <apex:commandbutton>, a button is positioned where the tag is written.  But most of the times, we may want to display the buttons on the top and bottom of the page. In order to display the button in top and bottom of the page, you need to enclose the button inside of this tag.

<apex:page >
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton value="Save"/>
<apex:commandButton value="Close"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="first Section" id="firstBlock"  >
<apex:pageBlockSectionItem >MyTutorial Rack </apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >Visualforce tutorial for beginners</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

<apex:pageMessage> :
This tag is used to display custom messages on the page using the Salesforce pattern for errors, warnings and other types of messages based on the severity.
There is one required attribute for this tag named Severity.
Severity: This attribute is used to provide the severity of the message. Values supported are: ‘confirm’, ‘info’, ‘warning’, ‘error’.
Strength: This attribute is used for strength of the message. This attribute controls the visibility and size of the icon displayed next to the message. Use 0 for no image, or 1-3 (highest strength, largest icon).

<apex:page >
<apex:pageBlock >
<apex:pageMessage summary="This pageMessage will always display. Validation error
messages appear in the pageMessages component." severity="info" strength="3" />
</apex:pageBlock>
</apex:page>

 
Input tags
Input tags are used to capture user input for any standard or custom object field, and respects any metadata which is set on the field definition, such as whether the field is required or unique, or whether the current user has permission to view or edit it.
Below are some of the input tags available:

  • <apex:inputsecret>
  • <apex:inputcheckbox>
  • <apex:inputFile>
  • <apex:inputHidden>
  • <apex:inputField>
  • <apex:inputTextArea>

 
Input tags
<apex:inputText> :
An HTML input element of type text. This tag is used to capture input text from the user.
<apex:inputSecret>:
An HTML input element of type password. Use this tag to capture a value which is masked as the user types.
<apex:inputTextarea> :
A text area input element. Use this tag to capture a value that requires a text area.
<apex:inputCheckbox> :An HTML input element of type checkbox.

<apex:page >
<apex:form >
<h1>Please fill the below details :</h1> <br/><br/>
Enter  Name: <apex:inputText id="name" /> <br/><br/>
Enter Age:  <apex:inputText id="age" />  <br/><br/>
Enter Username : <apex:inputText id="username"/><br/><br/>
Enter password: <apex:inputSecret id="password" /> <br/><br/>
Cover letter: <apex:inputTextarea id="cletter" /> <br/><br/>
Are you US citizen: <apex:inputCheckbox />  <br/><br/>
<apex:commandButton value="Save" />
</apex:form>
</apex:page>

Share:

Recent Posts