Sunday, November 13, 2011

How to Hide Top Bar, Ribbon, Quick Launch in SharePoint 2010?

Ribbon, Top Bar and Quick Launch comes up with Application Pages by default. If you want to open the page in Dialog Framework then those elements will take more space and confuse the enduser. You can remove these elements by creating new page layout which is time consuming.

There is other ways to hide these controls. One simple way is by passing a Parameter with the URL. [&IsDlg=1]
Under I'll show an example of SharePoint 2010 viewed in iFrame CRM 2010..
function setturl()
{
//Field with URL - Field have to be created first 
if(Xrm.Page.getAttribute("prefix_url").getValue() != null){
/*
//Remove "Documents botton" in default CRM 2010
var crmNavBar = "navDocument";
var tdAreas = "_NA_Info";
document.getElementById(crmNavBar).parentElement.style.display = "none";
document.getElementById(tdAreas).parentElement.parentElement.parentElement.parentElement.colSpan = 2;


//Show a custom "Document tab" - Have to be created first
Xrm.Page.ui.tabs.get("docs").setVisible(true);

*/ 
var accountURL = "Insert you default URL for SharePoint server ink the libarary name - End it with /";
// example SharePoint 365 Online: "https://testcompany.sharepoint.com/DMCRM/account/Forms/AllItems.aspx?RootFolder=%2FDMCRM%2Faccount%2F

//The relative URL. Is the folder in the libary entert in accountURL 
var relativ = encodeURI(Xrm.Page.getAttribute("prefix_url").getValue());
//example: test%20company%2F

//Remove Ribbon, Quick luch top bar  
var removeSPmenu = "&IsDlg=1"

//Re-create URL with SharePoint site content only.   
var newURL = (accountURL + relativ + removeSPmenu);
//alert("The new URL: " + newURL);
//example test alert: The new URL:
https://testcompany.sharepoint.com/DMCRM/account/Forms/AllItems.aspx?RootFolder=%2FDMCRM%2Faccount%2Ftest%20company%2F&IsDlg=1

//iFrame on form called "iframe_docs" get's new URL
Xrm.Page.getControl("IFRAME_docs").setSrc(newURL);
}
}
SharePoint will hide these elements when It gets IsDlg Parameter on URL.

This only work in SharePoint 2010, but then showing SharePoint 2010 via iFrame in CRM 4.0/CRM 2011 this trick is very handy!
But every time we can't pass these parameters. This is when you'll have to edit the CSS code in the Application Page under PlaceHolderMain scetion:
  
<style type="text/css">
#s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}
.s4-ca{margin-left:0px !important; margin-right:0px !important;}
</style>

This will hide the Ribbon, Top Bar and Quick Launch and only show the content.

Note : If you use this code in SharePoint Site Pages with Content Editor Webpart then you can't check in the page since the toolbar goes hidden.

If you still want to use this code on Site Pages then add Content Editor Webpart and paste the above code. When you want to make other changes then open the page in browser with parameters [ ?Contents=1 ] which opens the page in WebPart maintenance mode. Remove the content editor webpart and re-open the page. Make the changes and add content editor webpart at last along the CSS Code. To check in the page use Site Pages Library.

Hope you found this tip usefull! :)