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:

Custom File Upload In Salesforce Lightning Component

File Upload Component:
Create a new Lightning Component FileUpload.cmp.

<!--FileUpload.cmp-->
<aura:component controller="FileUploadController">
    <!-- 'parentId' Aura Attribute for store the Id for Parent Record where we are attach our file -->  
    <aura:attribute name="parentId" type="Id" default="00128000002KuXUAA0" />
    <!-- 'fileName' attribute for display the selected file name -->  
    <aura:attribute name="fileName" type="String" default="No File Selected.." />
    
    <!-- Lightning Input with file type and on file change call the 'handleFilesChange' controller --> 
    <lightning:input aura:id="fuploader" onchange="{!c.handleFilesChange}" type="file" name="file" label="Upload File" multiple="false"/>
    <div class="slds-text-body_small slds-text-color_error">{!v.fileName} </div>
    <br/>
    <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />
    <lightning:button label="Save" onclick="{!c.handleSave}"
                      variant="brand" class="slds-m-top--medium"/>
</aura:component>


File Upload JavaScript Controller:

Now create below JavaScript FileUploadController.js controller for above FileUpload.cmp component.

({    
    handleSave: function(component, event, helper) {
        if (component.find("fuploader").get("v.files").length > 0) {
            helper.uploadHelper(component, event);
        } else {
            alert('Please Select a Valid File');
        }
    },
    
    handleFilesChange: function(component, event, helper) {
        var fileName = 'No File Selected..';
        if (event.getSource().get("v.files").length > 0) {
            fileName = event.getSource().get("v.files")[0]['name'];
        }
        component.set("v.fileName", fileName);
    },
    
    handleCancel: function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    }
})

File Upload JavaScript Controller Helper:
Now create below JavaScript FileUploadHelper.js helper for above FileUploadController.js component.

({
    MAX_FILE_SIZE: 4500000, //Max file size 4.5 MB 
    CHUNK_SIZE: 750000,      //Chunk Max size 750Kb 
    
    uploadHelper: function(component, event) {
        // get the selected files using aura:id [return array of files]
        var fileInput = component.find("fuploader").get("v.files");
        // get the first file using array index[0]  
        var file = fileInput[0];
        var self = this;
        // check the selected file size, if select file size greter then MAX_FILE_SIZE,
        // then show a alert msg to user,hide the loading spinner and return from function  
        if (file.size > self.MAX_FILE_SIZE) {
            component.set("v.fileName", 'Alert : File size cannot exceed ' + self.MAX_FILE_SIZE + ' bytes.\n' + ' Selected file size: ' + file.size);
            return;
        }
        
        // create a FileReader object 
        var objFileReader = new FileReader();
        // set onload function of FileReader object   
        objFileReader.onload = $A.getCallback(function() {
            var fileContents = objFileReader.result;
            var base64 = 'base64,';
            var dataStart = fileContents.indexOf(base64) + base64.length;
            
            fileContents = fileContents.substring(dataStart);
            // call the uploadProcess method 
            self.uploadProcess(component, file, fileContents);
        });
        
        objFileReader.readAsDataURL(file);
    },
    
    uploadProcess: function(component, file, fileContents) {
        // set a default size or startpostiton as 0 
        var startPosition = 0;
        // calculate the end size or endPostion using Math.min() function which is return the min. value   
        var endPosition = Math.min(fileContents.length, startPosition + this.CHUNK_SIZE);
        
        // start with the initial chunk, and set the attachId(last parameter)is null in begin
        this.uploadInChunk(component, file, fileContents, startPosition, endPosition, '');
    },
    
    
    uploadInChunk: function(component, file, fileContents, startPosition, endPosition, attachId) {
        // call the apex method 'SaveFile'
        var getchunk = fileContents.substring(startPosition, endPosition);
        var action = component.get("c.SaveFile");
        action.setParams({
            parentId: component.get("v.parentId"),
            fileName: file.name,
            base64Data: encodeURIComponent(getchunk),
            contentType: file.type,
            fileId: attachId
        });
        
        // set call back 
        action.setCallback(this, function(response) {
            // store the response / Attachment Id   
            attachId = response.getReturnValue();
            var state = response.getState();
            if (state === "SUCCESS") {
                // update the start position with end postion
                startPosition = endPosition;
                endPosition = Math.min(fileContents.length, startPosition + this.CHUNK_SIZE);
                // check if the start postion is still less then end postion 
                // then call again 'uploadInChunk' method , 
                // else, diaply alert msg and hide the loading spinner
                if (startPosition < endPosition) {
                    this.uploadInChunk(component, file, fileContents, startPosition, endPosition, attachId);
                } else {
                    alert('File has been uploaded successfully');
                }
                // handel the response errors        
            } else if (state === "INCOMPLETE") {
                alert("From server: " + response.getReturnValue());
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        // enqueue the action
        $A.enqueueAction(action);
    }
})

File Upload Apex Controller:
Create below apex controller to use it in FileUpload.cmp component.

public with sharing class FileUploadController {
    
    @AuraEnabled
    public static Id SaveFile(Id parentId, String fileName, String base64Data, String contentType) {
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
        Attachment attach = new Attachment();
        attach.parentId = parentId;
        attach.Body = EncodingUtil.base64Decode(base64Data);
        attach.Name = fileName;
        attach.ContentType = contentType;
        Insert attach;
        return attach.Id;
    }
}

File Upload App:

<!--FileUploadApp.app-->
<aura:application extends="force:slds">
    <c:FileUpload />    
</aura:application>

Output:

Enable Organization Admins to Login as Any User

Go to Administer | Security Controls | Login Access Policies | Select Administrators Can Log in as Any User

With this feature enabled, System Administrators can log in as any user in their organization without asking internal end-users to grant login access.

Note: This feature is available in Enterprise, Performance, Unlimited and Developer Editions. If this feature is not found in your Org, contact Salesforce.com support to enable.