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 !
This works great on Editform, NewForm and DispForm. Is there any code that would work on a list view since the controls are not added until the list is displayed?
Haven’t tried it yet.