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.
Web: add-in-express.com
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 http://blog.learningtree.com/tag/ui/.