Monday, November 5, 2012

Hide Top Level Menu and Ribbon Programmatically in SharePoint 2010


Introduction
In this article we will see how to hide a top level menu and ribbon programmatically in SharePoint 2010.
Steps: Let's assume that we have a site page with top-level navigation menus and Ribbon Controls.
Go to a site pages and add new page.
Add-New-Page-in-SharePoint.jpg
Once the page is created, if we click the page we are able to see the page with the top-level navigation menu with ribbon controls.
Top-level-navigation-menu-with-ribbon-control-in-SharePoint.jpg
Before we edit the site page, we need to save the following code in Shared Documents.
Code
<style type="text/css">
  #s4-leftpanel-content{        display:none;}   #s4-ribbonrow
{        display:none;}   #s4-titlerow{        display:none;}   #s4-workspace  {         overflow-yhidden !important;  }</style> 
We need to save this code in the shared documents as a text file as shown in the following:
document-as-text- file-in-SharePoint.jpg
Now we can start the edit pages.
Go to à Site Actions à Edit Page.
Edit-page-in-SharePoint.jpg
Edit-page-in-SharePoint(Image4)
Once we are in Edit Page Mode, just select the two columns layout this demo.
Text-Layout-option-in-sharePoint.jpg
Just click the second column and add a content editor web part:
contend-editor-in-SharePoint.jpg
editing-tool-in-SharePoint(Image7).jpg
Once it's added, click the Edit web part and select the above share document in the content link.
editing-tool-in-SharePoint.jpg
Content-editor-in-SharePoint.jpg
That's all our page will load with the following UI Changes:

page-in-SharePoint.jpg
We will see the content editor in our page that's not required to view in page content. We will again edit the content editor web part and set the "Chrome Type" to "None".
Content-editor-Option-in-SharePoint.jpg
Finally the page looks like the following image:
page-looks-in-Sharepoint.jpg
The preceding steps need to be followed for site pages, but if added for a web part page, we will see how easy it is to hide the Ribbon and navigation controls.
Site-page-in-SharePoint.jpg
Just create a web part page template, select the options which we want and create the page.
page-template-in-SharePoint.jpg
In the web part page, we have various options to inject our HTML code.  We can add "HTML Form Web Part" or using the "Content Editor Web part". We will see both options.
Select content "HTML Form Web Part". In the Edit web part mode just copy the above code in the Source Editor and save it.
HTML-Form-Web-Part-in-Sharepoint.jpg
HTML1-Form-Web-Part-in-Sharepoint.jpg
We will set the chrome type to "None" to hide in the UI.
Select-Hide-from-crome-type-in-sharepoint.jpg
We will see the output as shown in the following image, just added the default announcements list for demo.
announcements-in-sharepoint.jpg
Let's see how we can get the same result using the "Content Editor" web part. Go to the web part page edit mode, delete HTML form editor and add the using "Content Editor" web part.
delete-HTML-Form-editor-in-sharepoint.jpg

delete1-HTML-Form-editor-in-sharepoint.jpg
In the web part page, just click the "Click here to add new content" link and select HTML and Edit HTML Source option from the ribbon.

Edit HTML Source-In-sharepoint.jpg
Now we can add our code, save the changes and refresh the page and we will get the final output.

output-In-sharepoint.jpg
Summary
We have seen various options to hide a top level menu and ribbon programmatically in SharePoint 2010. If we add the same code in a Master Page using the SharePoint 2010 Designer, we will hide controls in the entire pages.

No comments:

Post a Comment