How to hide the SharePoint 2013 Ribbon programmatically!

By Danielle Arad - April 15, 2014

This time I want to share with you some tips about how to hide the SharePoint 2010 / 2013 Ribbon programmatically.

 

To hide the Ribbon in SharePoint 2010/2013 there are different techniques such as using CSS, JavaScript code, the SecurityTrimmedControl control or the programmatic approach. As I say, in this article we will see the programmatic option:

  • Open Visual Studio 2013 in your CloudShare environment and create a SharePoint 2013 – Empty Project. Once the project is ready, add a Visual Web Part element to it. Next thing you have to do is add a reference to Microsoft.Web.CommandUI assembly. You can find it in the ISAPI folder under the 15 hive.

image

  • Add two buttons to your Web Part in the Web Part designer in Visual Studio 2013. We will use these buttons later on to show how to hide programmatically the SharePoint Ribbon. From the design view of your Web Part, switch to the code view and a using directive to Microsoft.SharePoint.WebControls.
  • Add the following code to one of the Web Part buttons:
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">try</span><!--CRLF--> <span id="lnum2" style="color: #606060;"> 2:</span> {<!--CRLF--> <span id="lnum3" style="color: #606060;"> 3:</span> SPRibbon sprRibbon = SPRibbon.GetCurrent(<span style="color: #0000ff;">this</span>.Page);<!--CRLF--> <span id="lnum4" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">if</span> (sprCinta != <span style="color: #0000ff;">null</span>)<!--CRLF--> <span id="lnum5" style="color: #606060;"> 5:</span> {<!--CRLF--> <span id="lnum6" style="color: #606060;"> 6:</span> sprRibbon.CommandUIVisible = <span style="color: #0000ff;">false</span>;<!--CRLF--> <span id="lnum7" style="color: #606060;"> 7:</span> <span style="color: #0000ff;">this</span>.lblInformation.Text = <span style="color: #006080;">"The SharePoint Ribbon has been hiden"</span>;<!--CRLF--> <span id="lnum8" style="color: #606060;"> 8:</span> }<!--CRLF--> <span id="lnum9" style="color: #606060;"> 9:</span> }<!--CRLF--> <span id="lnum10" style="color: #606060;"> 10:</span> <span style="color: #0000ff;">catch</span> (Exception ex)<!--CRLF--> <span id="lnum11" style="color: #606060;"> 11:</span> {<!--CRLF--> <span id="lnum12" style="color: #606060;"> 12:</span> lblInformation.Text = ex.Message;<!--CRLF--> <span id="lnum13" style="color: #606060;"> 13:</span> }

As you can see in the code, we are using the SPRibbon class to get the Ribbon in the current page (using the GetCurrent() method) and them we only need to set the CommanUIVisible property to false in order to hide the Ribbon in the current page.

  • For the second button in the Web Part, add the following code:
<span id="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">try</span><!--CRLF--> <span id="lnum2" style="color: #606060;"> 2:</span> {<!--CRLF--> <span id="lnum4" style="color: #606060;"> 3:</span> SPRibbon sprRibbon = SPRibbon.GetCurrent(<span style="color: #0000ff;">this</span>.Page);<!--CRLF--> <span id="lnum5" style="color: #606060;"> 4:</span> <span style="color: #0000ff;">if</span> (sprCinta != <span style="color: #0000ff;">null</span>)<!--CRLF--> <span id="lnum6" style="color: #606060;"> 5:</span> {<!--CRLF--> <span id="lnum7" style="color: #606060;"> 6:</span> sprRibbon.TrimById(<span style="color: #006080;">"Ribbon.WikiPageTab.Manage"</span>);<!--CRLF--> <span id="lnum8" style="color: #606060;"> 7:</span> sprRibbon.TrimById(<span style="color: #006080;">"Ribbon.WikiPageTab.Share"</span>);<!--CRLF--> <span id="lnum9" style="color: #606060;"> 8:</span> sprRibbon.TrimById(<span style="color: #006080;">"Ribbon.WikiPageTab.LibrarySettings"</span>);<!--CRLF--> <span id="lnum10" style="color: #606060;"> 9:</span> <span style="color: #0000ff;">this</span>.lblInformation.Text = <span style="color: #006080;">"SharePoint Ribbon sections have been hidden"</span>;<!--CRLF--> <span id="lnum11" style="color: #606060;"> 10:</span> }<!--CRLF--> <span id="lnum12" style="color: #606060;"> 11:</span> }<!--CRLF--> <span id="lnum13" style="color: #606060;"> 12:</span> <span style="color: #0000ff;">catch</span> (Exception ex)<!--CRLF--> <span id="lnum14" style="color: #606060;"> 13:</span> {<!--CRLF--> <span id="lnum15" style="color: #606060;"> 14:</span> <span style="color: #0000ff;">this</span>.lblInformation.Text = ex.Message;<!--CRLF--> <span id="lnum16" style="color: #606060;"> 15:</span> }

In this case, we are hiding specific sections of the SharePoint Ribbon by using the TrimById() that is available in the SPRibbon class. This methods receives as argument the name of the specific section to be hidden.

  • Build your Web Part and deploy it to your SharePoint 2013 site. Once the Web Part is deployed, navigate to your SharePoint site and the Web Part on an existing page. If you click the first button, you will see how the page’s Ribbon is hidden.

image

  • In the case of the second button in the Web Part, we are going to hide the following sections in the SharePoint Ribbon:
    • Manage.
    • Share.
    • Library Settings.

image

  • Click the second button (“Hide Section in SP Ribbon) and check how these sections are now hidden in the SharePoint Ribbon.

image

And that’s all about to hide the SharePoint Ribbon programmatically. Happy CloudSharing!