Tag Archives: Visualforce Page

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">
</apex:page>
  • 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);
https://ap1.salesforce.com/001?fcf=00B90000008Ajal?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>
    </apex:repeat>
</apex:page>

Output:

Lightning Icons in Visualforce Page

Salesforce provides 5 different kind of Icons (Standart, Custom, Utility, Doctype, Action) which can be used in Lightning component and Visualforce page. Find SLDS Icons here.

Example:
Instead of uploading the Lightning Design System as a static resource, we can include apex:slds inside the head tag of Visualforce page to use Lightning Design System stylesheets in the page.

Visualforce Page:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" >
    
    <head>
        <apex:slds/> 
    </head>
    
    <body class="slds-scope">
        <div class="slds-m-around--xx-large">
            <article class="slds-card">
                <div class="slds-card__body">
                    <table class="slds-table slds-table_bordered">
                        <thead>
                            <tr class="slds-text-heading--label">
                                <th scope="col">NAME</th>
                                <th scope="col">CATEGORIES</th>
                                <th scope="col">ICON</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td scope="row">Account</td>
                                <td scope="row">Standard</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-standard-account" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon--small">
                                            <use xmlns:xlink="http://www.w3.org/2000/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Account</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Custom1</td>
                                <td scope="row">Custom</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-custom-custom1" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon--small">
                                            <use xmlns:xlink="http://www.w3.org/2000/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/custom-sprite/svg/symbols.svg#custom1">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Custom1</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Email</td>
                                <td scope="row">Utility</td>
                                <td scope="row">
                                    
                                    <span class="slds-icon_container slds-icon-utility-email" >
                                        <svg aria-hidden="true" class="slds-icon slds-icon-text-default">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#email">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Email</span>
                                    </span>
                                    
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">Priority</td>
                                <td scope="row">Action</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-action-priority" >
                                        <svg aria-hidden="true" class="slds-icon  slds-icon--x-small">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#priority">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">Priority</span>
                                    </span>
                                    
                                </td>
                            </tr>
                            <tr>
                                <td scope="row">CSV</td>
                                <td scope="row">Doctype</td>
                                <td scope="row">
                                    <span class="slds-icon_container slds-icon-doctype-csv" >
                                        <svg aria-hidden="true" class="slds-icon ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                                 xlink:href="/apexpages/slds/latest/assets/icons/doctype-sprite/svg/symbols.svg#csv">
                                            </use>
                                        </svg>
                                        <span class="slds-assistive-text">CSV</span>
                                    </span>
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
        </div>
    </body>
</apex:page>

Output:

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.

Controller:

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:pageBlockButtons>
            
            <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}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Displaying Help Text in Visualforce Page

<apex:page standardController="Campaign" showHeader="true">
    <apex:form>
        <apex:pageBlock>
            <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}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>