Product Reviews

Build Ribbon UIs for SharePoint and Office 365 with Add-in Express

If you want to customize the SharePoint 2010 and Office 365 Ribbon, the Add-in Express Ribbon Designer eases UI development in the cloud.

SharePoint 2010 and Office 365 both revolve around a "Web-inized" version of the infamous Office Ribbon menu. As a result, if you want to integrate your code with SharePoint or Office 365, you'll need to extend the Ribbon. If your only tools are Visual Studio and SharePoint, then you'll be forced to either craft arcane XML or limit yourself to the three options offered by the SharePoint Ribbon wizard.

[Click on image for larger view.]
To make it easier to handle nested controls within the menu's containers, the designer includes a TreeView display of all the controls.

Ribbon Designer from Add-in Express Ltd. can help by providing a Visual Studio visual designer for creating rich Ribbon UI menus. The company's tools are designed to make Office development easier for Visual Studio developers- -and, with this latest offering, Add-in Express seems determined to follow that mandate into the cloud.

With Ribbon Designer, you can create a new Ribbon project or add a Ribbon to an existing project. Either choice creates all the necessary element and feature files, along with an EventReceiver file that's associated with the visual designer. You use the designer's toolbar to add tabs and context groups to the Ribbon. Your menu controls (either provided by Add-in Express, or your own custom controls) are added to those tabs and context groups in the form of one or more RibbonGroups.

Add-in Express provides a wide range of controls for you to use in your menu. Of course, you get a button, but you also get (among other controls) a toggle, a checkbox, a dropdown list, a color picker, a label, and a variety of separator and container controls. After adding a control, you can set properties on it and attach code to its events. You can also import controls from existing Ribbon XML files.

Ribbon Designer includes a TreeView that allows you to navigate through the nested containers in the visual designer. Unfortunately, while the TreeView displays the names for the containers, for controls it only displays the class name (for instance, ADXSRibbonDropDown). In a complicated menu, this makes it more difficult to figure out what you've selected in the TreeView.

Workaround for Sandbox Solutions
Many of the Ribbon controls support both client-side (JavaScript) and server-side events, but some controls (the dropdown list, for instance) only support client-side events. The server-side events aren't supported in sandboxed solutions, so you'll need to leverage the Client Object Model to implement server-side changes.

Installing the package was simple. I downloaded it from the Add-in Express site, but you can also get it through Visual Studio Extension Manager on the Visual Studio Tools menu. The installation package includes a Developer's Guide in PDF format. If you want to try the product out before buying, there's a trial version that limits you to creating Ribbons with one tab holding one control group. The full version is just $99, but if you also want the source code, you can get the Professional version for $100 more.

You can still use XML to create or modify your Ribbon menus. But Ribbon Designer frees you to do what Visual Studio programmers do best: design the UI visually and add the code to make it work

Add-in Express Ltd.

Phone: 375 (291) 944101
Price: $99 for Standard version; $199 for Professional (includes source code)
Quick Facts: A visual designer for creating and modifying Ribbons for SharePoint 2010 and Office 365
Pros: Enables programmers to create Ribbon menus the way they prefer: adding controls to a Visual Designer
Cons: Not functional for sandboxed SharePoint solutions

About the Author

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at

comments powered by Disqus


  • Visual Studio 2019 v16.7 Ships with Better Git Integration

    Better GitHub integration and other improvements highlight the new Visual Studio 2019 Version 16.7 and first preview of v16.8.

  • Visual Studio Codespaces Private Preview Woos C++ Developers

    Microsoft announced a private preview of Visual Studio Codespaces, which eases the setup and use of cloud-powered development environments that can be used from anywhere for remote development and other scenarios, targeting C++ console app and library developers.

  • Data Prep for Machine Learning: Normalization

    Dr. James McCaffrey of Microsoft Research uses a full code sample and screenshots to show how to programmatically normalize numeric data for use in a machine learning system such as a deep neural network classifier or clustering algorithm.

  • Microsoft Intros Azure Well-Architected Framework Best Practices

    Taking a page from the Amazon Web Services (AWS) book on cloud computing platforms, Microsoft has introduced its own Azure Well-Architected Framework, providing a set of architecture best practices to help users build and deliver great solutions and improve the quality of cloud workloads.

  • Creating a Progressive Web App with Blazor WebAssembly

    Not surprisingly, it's dead easy to create an app in Blazor that runs outside of the browser window and (potentially) in an offline mode. Before you get carried away, though, there are some key design decisions to make.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events