Hide inactive buttons and tabs on the ribbon in sharePoint 2010 via jquery

June 7th, 2011 | Posted by Marijn in jquery / javascript | sharepoint 2010

First time when I was working with SharePoint 2010, I was amazed about the new look and feel. In a negative sense, that is!

Everyone was feeling so happy and joyful about it, and I just couldn’t get it.
We went from a clean look in SharePoint 2007, where all my options are hidden underneath 4 buttons (new / upload / actions / settings which makes it very easy to use. It even looks very minimal and clean.

Enter SharePoint 2010: a big ribbon filled with huge buttons all over the place, divided into tabs who have non-meaningful names. And when I am not an administrator, a lot of these buttons are now disabled, but still visible!

In my opinion, a setback in the user-friendly UI that SharePoint had. I had classes of people who were migrating to the new version who stood frightened in the look of all that button-madness. Users who were learning SharePoint 2010 were struggling, and when I showed them a 2007 site they were wondering why Microsoft has gone this way.I even got into trouble for pointing that out to the organisation.

Ok, enough personal ranting. (I am still a happy SharePoint consultant, and I am still convinced that it is a great platform for organisations to do all sorts of business collaboration, publishing, content management and so on).

So, when I found Tobias Lekman ‘s blog and his post about hiding inactive buttons on the ribbon, I was happy that he thought about the end-users and simplicity of use.

He uses JQuery to hide inactive tabs and buttons.

A copy of his code:

<style type="text/css">
  A.ms-cui-disabled {
        DISPLAY: none !important
  }
</style>

<!-- IMPORT JQUERY -->
<script src="/REFERENCE TO YOUR JQUERY SCRIPT/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
function checkRibbon() {
    // Loop the tab groups
    $("div.ms-cui-tabContainer ul li.ms-cui-group").each(function () {
    var obj = $(this);
    // How many links in total in this group?
    var allLinks = $("a", obj).length;
    // How many are disabled?
    var disabledLinks = $("a.ms-cui-disabled", obj).length;
    // If all links are gone, hide the ribbon group
    if (allLinks == disabledLinks) {
            obj.hide();
    }
    else {
    // Some are active, show the group
      obj.show();
      // Remove container for inactive ctrls so that all controls are top aligned
      $("a.ms-cui-disabled", obj).each(function () {
          if ($(this).parent().attr("class") == "ms-cui-row") {
                $(this).parent().hide();
          }
    });
}
});
}

// Track current selected ribbon tab
var ribbonSelected;
function checkRibbonState() {
        // Has the ribbon tab changed or has the ribbon never been set up?
        var id = $("li.ms-cui-tt-s").attr("id");
        if (ribbonSelected != id)
        {
                ribbonSelected = id;
                checkRibbon();
        }
}
// Start the watcher for ribbon select. 
function beginCheckRibbon() {
// Increase parameter from 10 up if you have performance issues
        var checkRibbonStateInterval = setInterval("checkRibbonState()", 10); 
}

// Start the watcher when the page has finished loading
$(document).ready(function () {
        setTimeout("beginCheckRibbon()", 5000);
});
</script>

As always, do not forget the jquery library reference !

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

2 Responses



Leave a Reply

%d bloggers like this: