Tag Archives: Visualforce Page

Generic Loading Component For Visualforce Pages

Visualforce Page Component:

    <apex:actionStatus onstart="startLoading();" onstop="stopLoading();" id="loadStatus" />
        .overlay {
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            opacity: 0.3;
            -moz-opacity: 0.3;
            width: 100%;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            background: #000;
            -khtml-opacity: 0.3;
            z-index: 1000;

        .loader {
            background: url('/img/loading32.gif') scroll no-repeat 0 0;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;

    <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>
    <div class="loadingBox overlay"> </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        function startLoading() {
            $('#load_scrl').css('top', $(document).scrollTop() + 200);

        function stopLoading() {

Now add this component in your Visualforce Page:


Use the “Status” attribute with the value “loadStatus” on the command button as follows:

<apex:commandButton action="{!save}" value="Save" status="loadStatus" rerender="myForm"/>

Use in Javascript:

startLoading(); //Start Loading
stopLoading() ; //Stop Loading

Hide Header and Sidebar in Salesforce

Sometimes we need to hide header and sidebar of a Visualforce page or Standard layout. So here are some ways to hide header and sidebar for Salesforce Visualforce page and Standard layout.

Generally in Visualforce Page we use sidebar="false" to hide sidebar. To hide header and chat widget we use header="false" and showChat="false" respectively.

  • Hide Header and Sidebar from Visualforce Page with specifying header="false" and sidebar="false".
<apex:page showHeader="false" sidebar="false">
  • Hide Header and Sidebar from Visualforce Page or Standard Layout by adding isdtp parameter in the URL. The main purpose of isdtp can be used to hide Salesforce header and sidebar on Standard Pages.
    • vw – The Visualforce page will be rendered without header and sidebar, supports aloha theme, allows chatter.
    • lt – leaves off SF formatting, page header, sidebar, tabs and section header.
    • nv – The page will be rendered without the tabs and sidebar, and will accommodate all the buttons in a list view.
    • mn – Retains Old Salesforce Styling, hides page header(tabs) and sidebar.
PageReference pgref = new PageReference('/apex/pagename?recordId&isdtp=vw);
  • Hide Sidebar from Standard layout.
    Go to – Setup || Customize || User Interface – checked the check box “Enable Collapsible Section”. After that you can show or hide sidebar in Standard layout.

Get Salesforce Base URL in Visualforce Page

Apex Class:

public class SampleBaseURL{

    public List<Account> accList {get;set;}
    public SampleBaseURL(){
        accList = [SELECT Id, Name FROM Account LIMIT 100];

Visualforce Page:

<apex:page controller="SampleBaseURL" sidebar="false">
    <apex:repeat value="{!accList}" var="a">
        <a href="{!$Site.BaseUrl}/{!a.Id}" target="_blank">{!a.Name}</a>


Display of Validation Rule Error on Visualforce Page

Here I’ve a custom “Student__c” object. There is a validation rule on “Date_of_Birth__c” field, that Date of Birth cannot be greater than today. And I’m using a visualforce page to insert the data in “Student__c” object. So, I need to show the validation rule error message in visualforce page.

Validation Rule:

Below is my controller which gave the solution for displaying validation error message on visualforce page.


public with sharing class StudentExt {

    public Student__c student{get;set;}
    public StudentExt(ApexPages.StandardController controller) {
        student = (Student__c)controller.getRecord();
    public Pagereference saveStudent() {
        try {
            Upsert student;
            return new Pagereference('/' + student.Id);
        catch(DMLException de) {
            Apexpages.addMessage(new ApexPages.Message(ApexPages.SEVERITY.FATAL, de.getDmlMessage(0)));
            return NULL;
        catch(Exception e) {
            Apexpages.addMessage(new ApexPages.Message(ApexPages.SEVERITY.FATAL, e.getMessage()));
            return NULL;

Visualforce Page

<apex:page standardController="Student__c" extensions="StudentExt" >
    <apex:pageMessages id="errormsg" />
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!saveStudent}" reRender="errormsg"/>
                <apex:commandButton value="Cancel" action="{!Cancel}"/>
            <apex:pageBlockSection columns="2" title="Information">
                <apex:inputField value="{!Student__c.First_Name__c}"/>
                <apex:inputField value="{!Student__c.Last_Name__c}"/>
                <apex:inputField value="{!Student__c.Date_of_Birth__c}"/>
                <apex:inputField value="{!Student__c.Address__c}"/>

Displaying Help Text in Visualforce Page

<apex:page standardController="Campaign" showHeader="true">
            <apex:pageBlockSection title="Information">
                <apex:pageBlockSectionItem HelpText="{!$ObjectType.Campaign.fields.Category__c.inlineHelpText}">
                    <apex:inputField value="{!Campaign.Category__c}" label="{!$ObjectType.Campaign.fields.Category__c.label}" />