Monday, 21 February 2011

Building a Document Management System with Sharepoint 2010 - Part 9 - UI Office 2010 (Adding Ribbon to the Fluent UI)

We are going to explore how to write a Ribbon-Tab in MS Word. What I am going to do is basically clone an excelent article wrote by Ken Getz, MCW Technologies, LLC in 2006 ( and extend it, bringing even more resources. This article has been for a long time the only source for developers of how to customize Ribbons in MS Word.

I am not going to change the design of the tab because it contains all the basic controls. It looks messy but I think, that is exactly what we need.

1) Open Microsoft Word 2010
2) Go to the Developer Tab.
3) If you do not see the Developer tab, you must identify yourself as a developer. To do this in your application, click the Microsoft Office Button, click Application Options, click Customize Ribbon, and then select Show Developer Tab in the Ribbon. This is a global setting that identifies you as a developer in all Office applications that implement the Fluent UI.
4) Click on the Visual Basic button.

5) Click on ThisDocument.
6) Copy and paste this code (VBA function) into the box:

Sub justamacro(ByVal control As IRibbonControl)

MsgBox ("I have done something!")
End Sub

7) Close this window.

8) Now we have to save this file as a document template, to do that just go to File->Save As and type c:\productivetemplate.docm (if you use Excel or PowerPoint you can do exactly the same thing but saving the document with .xlsm, and .pptm.

9) Exit from Microsoft Word.
10) Now! We are moving to the “funny stuff” . Go to C:\ , create a folder called customUI , create a new xml file inside called customUI.XML, then copy and paste this code, save the file and close it.

11) Go to your c:\productivetemplate.docm and rename it with c:\, drag and drop your folder CustomUI and open the zip file.

12) Drag the _rels folder to the desktop. A folder named _rels containing the .rels file appears on the desktop.

13) Open the new folder, and then open the .rels file in a text editor.

14) Between the final element and the closing element, add a line that creates a relationship between the document file and the customization file. Ensure that you specify the folder and file names correctly (the Id attribute supplies a unique relationship ID for the customUI—its value is arbitrary).

15) Save the .rels file.

16) Drag the .rels file from the desktop to the _rels folder in the compressed file, replacing the existing .rels file.

17) Remove the .zip extension from the container file and rename it with c:\productivetemplate.docm.

18) Now! Open the file… you should see something like this:

There are some icons we can customize, so if for example we want to display a happy face we only need to do this: imageMso="HappyFace" . This property is inside the control. To have a full list of images we will need to go to this website and download the plugin:

These are some of the images you can get:

As soon as you install the plugin you can go to the developers Tab and you will see this new dialog where you click in teh image and brings back the code.

We have learnt how to create Ribbons for Office 2007/2010 in a easy way, next time we will start the hard way, Visual Studio 2010, where the posibilities are completly endless. The integration between Sharepoint, Office 2010 and your systems will be eseential. That will be the time where you will notice the huge gap between MOSS and the new Sharepoint 2010.