Custom Button in Web Applications Management Ribbon

With the release of the 2007 Microsoft Office system, Microsoft introduced a new user interface structure, known as the ribbon, that replaced the previous application drop-down menus and toolbars. The ribbon came about after much research suggested that certain applications, such as Microsoft Word, contained so many commands that users had trouble finding what they needed. Now, with SharePoint 2010, this feature is also included to leverage a same user experience. You can read more about the ribbon on MSDN.

There are numerous blog posts about customizing the ribbon, take Chris O’Brien’s example for instance, so I won’t go into detail about that.

What I wanted, was to add a button to the Web Applications Management Ribbon, and make that button work with the select web application. The first step is to enable the button, only when a web application is selected. To do this, fill in the EnabledScript property from the CommandUIHandler with a javascript function that will check whether or not to enable the button.

<CommandUIHandlers>
  <CommandUIHandler
    Command="BramNuyts.WebApp.BlobCache.Command.ManageBlobCache"
    CommandAction="javascript: manageBlobCache();"
    EnabledScript="javascript: checkButton();"
  />
</CommandUIHandlers>

This is the javascript code for the checkButton() method:

function checkButton()
{
  var $v_0 = SP.UI.Admin.WebApplicationPageComponent.get_selectedItem();
  if ($v_0 !== null)
  {
    $v_1 = ($v_0.getAttribute('IsCentralAdmin'))
    if ($v_1 === 'true')
    {
      return false;
    }
    else
    {
      return true;
    }
  }
  else
  {
    return false;
  }
  return false;
}

SP.UI.Admin.WebApplicationPageComponent.get_selectedItem() is the key function here. You may find it in the SP.UI.Admin.debug.js in the 14\TEMPLATE\LAYOUTS folder. What it does is return the selected web application object. Another handy check is the IsCentralAdmin attribute. Sometimes you may not want to do something for the central web application. Then you can check for it, and return false.

When you wish to work with the selected web application, you can pass the ID to your application page for instance. You can do this using the dialog framework. A quick code snippet:

function manageBlobCache()
{
  var $v_0 = SP.UI.Admin.WebApplicationPageComponent.get_selectedItem();
  var options = SP.UI.$create_DialogOptions();
  options.url = '/_admin/customPageFolder/customPage.aspx?Id=' + $v_0.getAttribute('Id');
  options.height = 300;
  SP.UI.ModalDialog.showModalDialog(options);
}

In this result I show the passed ID and the retrieved web application name:

application page showing web app id

I’ve implemented this method in a solution you can find on CodePlex: http://sp2010blobcachemgr.codeplex.com/