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:

Adding and Removing Styles on a Component During Runtime

You can add or remove a CSS style on a component or element during runtime. You can use the $A.util.addClass(cmpTarget, 'class') method to append CSS classes and $A.util.removeClass(cmpTarget, 'class') method to remove CSS classes from a component or element.

And you can use component.find('myCmp').get('v.class') method to retrieve the class name on a component, where myCmp is the aura:id attribute value.

Here is an example to adding and removing Styles on a Component during runtime.

Component:

<aura:component>    
    <div aura:id="hwDiv">Hello World!</div><br />
    <lightning:button onclick="{!c.addCSS}" label="Add Style" />
    <lightning:button onclick="{!c.removeCSS}" label="Remove Style" />
</aura:component>

JS Controller:

({
    addCSS: function(cmp, event) {
        var cmpDiv = cmp.find('hwDiv');
        $A.util.addClass(cmpDiv, 'changeStyle');
    },
    
    removeCSS: function(cmp, event) {
        var cmpDiv = cmp.find('hwDiv');
        $A.util.removeClass(cmpDiv, 'changeStyle');
    }  
})

CSS Stylesheet:

.THIS.changeStyle {
    background-color:blue;
    color:red;
}

Output:

Get Salesforce Community Page URL Parameters in Lightning Component

Community URL:
https://testcommunity.my.salesforce.com/communityname/ProfilePage?id=00Q0I00000xUjMH&name=biswajeet

Lightning JS Controller:

({
    getParamValue: function(component, event, helper) {

        //Get Id Parameter Value From Community URL
        var idParamValue = helper.getURLParameterValue().id;
        console.log('Id-' + idParamValue);

        //Get Name Parameter Value From Community URL
        var nameParamValue = helper.getURLParameterValue().name;
        console.log('Name-' + nameParamValue);
    }
})

Lightning JS Helper:

({
    getURLParameterValue: function() {

        var querystring = location.search.substr(1);
        var paramValue = {};
        querystring.split("&").forEach(function(part) {
            var param = part.split("=");
            paramValue[param[0]] = decodeURIComponent(param[1]);
        });

        console.log('paramValue-' + paramValue);
        return paramValue;
    }
})