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 (http://msdn.microsoft.com/en-us/library/aa338202.aspx#OfficeCustomizingRibbonUIforDevelopers_Customizing) 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:\productivetemplate.zip, 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: http://www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=12b99325-93e8-4ed4-8385-74d0f7661318&displaylang=en

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.



Conclusion:
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.

Building a Document Management System with Sharepoint 2010 - Part 8 - UI Office 2010 (Adding Document-Based Add-ins to the Fluent UI)

We are going to explore how to deliver a custom template for Office 2010 (This can be used for Office 2007 as well).

The whole point of this article, it is to create a unique template where, our secretaries are going to type some text  and send the text to a remote location (ie: a solicitor) minimizing the number of clicks to one. This is just an example, but when you are focus in a DMS, you have to think about different ways of delivering speed, just because that speed will be translated in productivity and money.

So what we want really, it is a simple button. In that way they will avoid: 1) going to the tab File, 2) click on save as, 3) type a name, 4) click on save, 5) open Outlook, 6) create a new email, 7) type the name of the lawyer, 8) send an email to the lawyer, saying that the document is ready in the DMS and 9) close Microsoft Word.

In theory we will save eight steps and more than 120 seconds per document.

As I said this is just an example, and, it is in your hands to develop the backend of this application. In our case we will just display a message box saying, “Document Sent”.

There are many ways of doing this, but we are going to concentrate in Ribbons. Ribbons can be modified by:

a) a MS Word Template
b) Visual Studio 2010 Add-in.

In this chapter we will look to the first part: MS Word Templates.

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 SendDocumentMacro(ByVal control As IRibbonControl)
MsgBox ("The document has been sent!")
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:\productivetemplate.zip, 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:

19) Click on the button to see the message.

Conclusion:
We have developed a complete new template, removing all the default options, in the next chapter we will check how to add different controls and tabs to a normal MS Word instance.