SharePoint Ribbon customization with Ribbon Designer for SharePoint & Office 365: C#, VB.NET

I’m pretty excited about the product I’m about to show you. It is not every day that you are able to work with a utility or tool that literally makes an activity a thousand times easier. In my previous post Customizing the SharePoint Ribbon, you most probably noticed the amount of work as well as trial and error that went into customizing the SharePoint 2010 Ribbon UI.

Well, I’m about to show you how you can customize SharePoint 2010 Ribbon in less than five minutes. We’ll be using a new product from Add-in Express called the Ribbon Designer for SharePoint and Office 365 (you can downlaod a trial here).

Once it is installed, you can create a new VB.NET or C# SharePoint Ribbon project in Visual Studio 2010.

After selecting the project type and clicking OK, the New SharePoint Ribbon Designer Project Wizard will start. Here you will enter the local site to use for debugging your project and whether to deploy it as a sandboxed or farm solution.

In this example, I’ve chosen to deploy a farm solution as it will give us more options than a sandboxed solution. If you already have an existing SharePoint project, you can also add an ADX SharePoint Ribbon item to it. You can find the item template in Visual Studio under SharePoint -> 2010 -> ADX SharePoint Ribbon.

Designing the ribbon with the visual designer

Once the wizard is completed, a visual design surface will be displayed. If you’ve used other Add-in Express products in the past, the design surface will be very familiar to you. Adding a new SharePoint ribbon tab is as easy as clicking on the ADXSPRibbonTab button on the design surface toolbar.

This will add a new SharePoint RibbonTab component to the designer surface and present you with a visual designer for the SharePoint ribbon tab. This designer will look similar to the Ribbon tab component of Add-in Express for Office and .net. You can add various controls to the tab by using the Ribbon Tab designer’s toolbar buttons. In the illustration below, I’ve added a large button, a label, textbox and a smaller button with a 16×16 icon.

All this has been done through the consistent use of the RAD paradigm of which we have come to know and love Add-in Express for. You would also have noticed that in contrast to my last post not a single line of code or XML was required for what we’ve done so far.

Add-in Express provides you with a host of controls for your SharePoint ribbon tab, including a Color Picker and Insert Table control as illustrated below:

Adding logic

Logic for the controls can either be created on the server-side or client-side. To add logic for the Greet button, select the button and in the Properties window view its events. You’ll notice you have two groups: one for JavaScript Events and one for Server events. Double-click in the OnAction event under Server events to generate an event handler for the button.

Add the following code to the event handler:

C# code sample:

private void greetingButton_OnAction(object sender, ADXSPButtonActionEventArgs e)
{
    // This event is not supported in sandboxed solutions.
    e.Result = nameTextbox.Text;
}

In order to handle the result add a JavaScript event handler for the Ribbon Designers’ OnInitialize event. To do this, switch to the Ribbon designer surface and double-click in the OnInitialize event in the JavaScript Events groups.

This will add a JavaScript event handler to the SPRibbon.js file. Add the following code to the event handler:

C# code example:

SharePointRibbonTheEasyWay.Features.SPRibbon.SPRibbon.prototype.SPRibbonOnInitialize_EventHandler = function (sender, isPostBack) {
    if (isPostBack) {
        var result = this.getPostBackResult();
        if (result != null && result != "") {
            var currentDateTime = new Date();
            SP.UI.Notify.addNotification('Good day ' + result + ". Today is " +
				currentDateTime);
        }
    }
}

The code will get the post back result and display a greeting using the built-in SharePoint notification. Build the solution and navigate to a list page in SharePoint and click on the Greet button. You should now see a similar result as displayed below:

Adding client-side code is just as easy. Select the Show Calendar button and double-click in its OnClick event in the JavaScript Events group. The Add-in Express SharePoint ribbon designer will automatically generate a JavaScript event handler in the SPRibbon.js file. Add the following to the event handler:

C# code sample:

SharePointRibbonTheEasyWay.Features.SPRibbon.SPRibbon.prototype.showCalendarButtonOnClick_EventHandler = function (sender) {
    var options = {
        url: '/Lists/Calendar/calendar.aspx',
        tite: 'ADX Modal Calendar',
        allowMaximize: false,
        showClose: true,
        width: 600,
        height: 400
    };
 
    SP.UI.ModalDialog.showModalDialog(options);
}

The code above will display a calendar view in a modal dialog using the built-in SharePoint Modal API.

Creating context-sensitive SharePoint Ribbon tabs

Creating context-sensitive Ribbon tabs is also a trivial task with Add-in Express’s SharePoint Ribbon designer. All you need to do is add a Contextual Group component to the designer surface by clicking on its toolbar button.

You can then set the new contextual groups’ Caption and highlight colour and set your Ribbon tabs’ Context property to the newly added contextual group controls’ name. Finally all you need to do is add a web part and add the following code to the controls’ CreateChildControls method:

C# code sample:

protected override void CreateChildControls()
{
    base.CreateChildControls();
    AddinExpress.SharePoint.ADXSPRibbon.ShowContextualGroup(this.Page, typeof(SharePointRibbonTheEasyWay.Features.SPRibbon.SPRibbon),"myContextualGroup");
}

When the user adds your web part to the appropriate SharePoint page your contextual ribbon tab will be visible.

All this is done without writing a single line of XML nor the need to read up on how the SharePoint group templates and layout styles work. Fantastic!

Thank you for reading. Until next time, keep coding!

Available downloads:

These sample COM Add-ins were developed using Ribbon Designer for SharePoint and Office 365:

C# sample project

You may also be interested in:

• Download Ribbon Designer trial
• Video: Ribbon Designer for SharePoint and Office 365
• Video: Ribbon Designer for SharePoint and Office 365, end-to-end demo