Building a Document Management System with Sharepoint 2010 - Part 10 - Outlook 2010 UI

We have been exploring how to develop Ribbons for Microsoft Word, Excel, Powerpoint and Visio. I have tried to avoid any contact with Outlook 2010 because this piece of softaware has been built in a different way in the new Office 2010.

Basically, Outlook 2010 is a mixture of Outlook 2003 with Outlook 2007. That means it keeps almost the same core but with extra functionality. The best way to see this it is by looking at the User Interface.

In the Outlook User Interface you can combine command bars and Ribbons, so you can still using your old addings, and if you want you can incorporate more.

I am going to concentrate in Ribbons and Context Menus User Interface development for Outlook 2010

Microsoft has provided plenty of resources for these tasks, they are very well documented and ready to use, but this post is more specialise in a Document Management System, so we are going to start talking about that instead of how to develop ordinary ribbons and context menus, if you want to learn how to develop a basic Ribbon, please check my older post: http://netsourcecode.blogspot.com/2011_02_01_archive.html

As you remember we are integrating Sharepoint 2010 with Office 2010. We have the case we have some lawyers want to save their emails to a client/matter structure in Sharepoint 2010. They also want to be able to insert attachments from Sharepoint and save them.

For all these tasks we have to provide them a nice and simple User Interface where they will only type the client and number and click Return.

This is what we are going to develop:
- A button in the main Home ribbon so if the select an email or few of them it will launch a form to ask you where you want to save the email.
- A button in the "New email-Ribon" to insert attachments from Sharepoint.
- A context menu in the "Open Email" to be able to save the attachments.
- A context menu in the email selection to be able to save a bunch of emails in one go.

The main problem with this is to insert a button in built-in tabs and context menus. We have to be sure we can accommodate the buttons properly.

In this case we are going to start identifying the first level of tabs, for Outlook 2010 the name of the built-in tabs will be:
- TabMail
- TabFolder
- TabView
- TabDeveloper

We are going to concentrate in building ONLY ONE button in the TabMail Ribbon. This button will open the form. We will start building the XML file from the scratch so you can see what is going on.

This is the Original Home Ribbon (TabMail):

This is the new Ribbon after inserting the CustomUI XML Code:

The XML code we have used for this purpose is the following:

<customUI xmlns='http://schemas.microsoft.com/office/2006/01/customui' >

  <ribbon>

    <tabs>

      <tab idMso="TabMail">

        <group id="SaveEmailFromOutlook" label="Save email to DMS">

          <button id="CMDSaveEmailToDMS" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMS"/>

        </group>

      </tab>    

    </tabs>

  </ribbon>

</customUI>

The list of built-in tabs and groups available can be found here :(http://www.microsoft.com/downloads/en/details.aspx?familyid=4329D9E9-4D11-46A5-898D-23E4F331E9AE&displaylang=en)

I have listed the most important tabs in Outlook 2010 so you know exactly where to add your controls. I have extracted all this data from Microsoft Office 2010 resources:

- TabNewMailMessage
- TabInsert
- TabOptions
- TabFormatText
- TabDeveloper
- TabAddIns
- TabSmartArtToolsDesign
- TabSmartArtToolsFormat
- TabChartToolsDesign
- TabChartToolsLayout
- TabChartToolsFormat
- TabPictureToolsFormat
- TabDrawingToolsFormatClassic
- TabWordArtToolsFormat
- TabDiagramToolsFormatClassic
- TabOrganizationChartToolsFormat
- TabTextBoxToolsFormat
- TabTableToolsDesign
- TabTableToolsLayout
- TabEquationToolsDesign
- TabPictureToolsFormatClassic
- TabInkToolsPens
- TabContact
- TabAppointment
- TabDistributionList
- TabJournal
- TabNewMailMessage
- TabReadMessage
- TabTask

We are going to insert another button to save the email. This time will be in the email itself, this is how will look like:

To produce this I have exteded our XML file to this:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">

  <ribbon>

    <tabs>

      <tab idMso="TabMail">

        <group id="SaveEmailFromOutlook" label="Save email to DMS">

          <button id="CMDSaveEmailToDMS" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMS"/>

        </group>

      </tab>

      <tab idMso="TabReadMessage">

        <group id="SaveEmailFromReadEmail" label="Save email to DMS">

          <button id="CMDSaveEmailToDMSreadEmail" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMSreadEmail" />

        </group>

      </tab>

    </tabs>

  </ribbon>

</customUI>

Now what we need to do it is been able to insert files from Sharepoint 2010 into Outloook from a nice form. This is how our new button will look like in the "New E-mail" form:

The whole final XML file will be this one:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" >

  <ribbon>

    <tabs>

      <tab idMso="TabMail">

        <group id="SaveEmailFromOutlook" label="Save email to DMS">

          <button id="CMDSaveEmailToDMS" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMS" />

        </group>

      </tab>

      <tab idMso="TabReadMessage">

        <group id="SaveEmailFromReadEmail" label="Save email to DMS">

          <button id="CMDSaveEmailToDMSreadEmail" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMSreadEmail" />

        </group>

      </tab>

      <tab idMso="TabNewMailMessage">

        <group id="InsertAttachmentFromDMS" label="Insert item from DMS" >

          <button id="CMDInsertAttachmentFromDMS" label="Insert Workspace Item"   imageMso="AppointmentColorDialog"

            size="large" onAction="CMDInsertAttachmentFromDMS" />

        </group>

      </tab>     

    </tabs>

  </ribbon>

</customUI>

As you can see I have declared three events (They will interact with the buttons):
- CMDSaveEmailToDMS
- CMDSaveEmailToDMSreadEmail
- CMDInsertAttachmentFromDMS

In order to save the file into the DMS we will create a context menu, so the user can go to the attachment an "do" a "right click" on the attachment, and a new option called "Save attachment into DMS" will be displayed.

Don't worry about the functionality behind, we will cover all of that in the next chapter, in fact we will go trough the process of creating a new project in Outlook 2010. Right now we are focus in developing the right User Interface for our DMS.

This is how the context menu will look like after inserting our XML code:

This is the XML code after inserting the tag. We have changed the CUSTOMUI xmlns address to a newer one: http://schemas.microsoft.com/office/2009/07/customui

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"&gt

  <ribbon>

    <tabs>

      <tab idMso="TabMail">

        <group id="SaveEmailFromOutlook" label="Save email to DMS">

          <button id="CMDSaveEmailToDMS" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMS" />

        </group>

      </tab>

      <tab idMso="TabReadMessage">

        <group id="SaveEmailFromReadEmail" label="Save email to DMS">

          <button id="CMDSaveEmailToDMSreadEmail" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMSreadEmail" />

        </group>

      </tab>   

    </tabs>

  </ribbon>

  <contextMenus>

    <contextMenu idMso="ContextMenuAttachments">

      <menuSeparator id="Separator1" />

      <button id="CMDSaveAttachmentIntoDMS" label="Save attachment into DMS" insertBeforeMso="HyperlinkInsert" onAction="CMDSaveAttachmentIntoDMS" imageMso="AccessOnlineLists"/>

      <menuSeparator id="Separator2" />     

    </contextMenu>

  </contextMenus>

</customUI>

I am not enter in detail of how to develop context menus, because I assume that after checking the ribbons, context menus is a piece of cake, but I have to accept that the big issue here it is to integrate built-in context menus with your items. For that we will use the "idMso" attributte. We just need to pass the name of the context menu we want to use. In this case the idMso is called ContextMenuAttachments. To find out the name of the built-in context menus, download this add-in  (http://archive.msdn.microsoft.com/contextmenusaddin), install it so everytime you do a right click it will display the name of the menu at the end of the context menu.

Now, I am going to create another two buttons in a context menu. Basically with this option, you will be able to select and email or more do a right click and save it/them into Sharepoint 2010.

The context menu will look like this when you do a multiselect (ContextMenuMultipleItems):

The context menu will look like this when you do a single select(ContextMenuMailItem):

To produce the whole User Interface we have finally developed this CustomUI XML file we will use later on. Please have a look to the context menu part, because it can be applied to any Office 2010 product.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">

  <ribbon>

    <tabs>

      <tab idMso="TabMail">

        <group id="SaveEmailFromOutlook" label="Save email to DMS">

          <button id="CMDSaveEmailToDMS" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMS" />

        </group>

      </tab>

      <tab idMso="TabReadMessage">

        <group id="SaveEmailFromReadEmail" label="Save email to DMS">

          <button id="CMDSaveEmailToDMSreadEmail" label="Save Email" imageMso="AccountMenu"

            size="large" onAction="CMDSaveEmailToDMSreadEmail" />

        </group>

      </tab>

      <tab idMso="TabNewMailMessage">

        <group id="InsertAttachmentFromDMS" label="Insert item from DMS">

          <button id="CMDInsertAttachmentFromDMS" label="Insert Workspace Item" imageMso="AppointmentColorDialog"

            size="large" onAction="CMDInsertAttachmentFromDMS" />

        </group>

      </tab>

    </tabs>

  </ribbon>

  <contextMenus>

    <contextMenu idMso="ContextMenuAttachments">

      <menuSeparator id="Separator1" />

      <button id="CMDSaveAttachmentIntoDMS" label="Save attachment into DMS" insertBeforeMso="HyperlinkInsert" onAction="CMDSaveAttachmentIntoDMS" imageMso="AccessOnlineLists"/>

      <menuSeparator id="Separator2" />     

    </contextMenu>

    <contextMenu idMso="ContextMenuMailItem">

      <menuSeparator id="Separator3" />

      <button id="CMDSaveItem" label="Save email to DMS" insertBeforeMso="HyperlinkInsert" onAction="CMDSaveItem" imageMso="AccountMenu"/>

      <menuSeparator id="Separator4" />

    </contextMenu>

    <contextMenu idMso="ContextMenuMultipleItems">

      <menuSeparator id="Separator5" />

      <button id="CMDSaveItems" label="Save emails to DMS" insertBeforeMso="HyperlinkInsert" onAction="CMDSaveItems" imageMso="AccountMenu"/>

      <menuSeparator id="Separator6" />

    </contextMenu>

  </contextMenus>

</customUI>

Conclusion: We have learnt how to interact with the Outlook 2010 User Interface using the Extensibility.IDExtensibility2 and Office.IRibbonExtensibility class. In this way we can avoid any interaction with the old commandbuttons object from Outlook 2003. By doing this we are developing an addin compatible with 2007 and 2010, but not with 2003. The advantage is translated into perfomance and stability.

The SaveAs2() Issue in MS Word 2010 and the Com Exception error.

If at some point you get an error by calling the SaveAs method in Microsoft Word when you are working with SharePoint 2010 at the same time, just do the following.

1- Deactivate all teh features,

2- Click MSWord on File->SaveAs, and type a Sharepoint Location.

3. After saving it, check in that file.

4. Close Word and open it again. It will work

This is the line of code that it could bring you some headaches:

_DocumentToBeSaved.SaveAs2(

ref _sFileName, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj, ref _oObj);

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.

Building a Document Management System with Sharepoint 2010 - Part 7 - User Interfaces for Office 2010

Sometimes we will have to face one of the biggest problems with the whole Sharepoint 2010 suite; that is basically the Office 2010 integration. These days Microsoft are working really hard to be sure they can get a perfect integration between both products, going to the extreme with the two suites, but what Microsoft can't do for us is the full Office / Sharepoint integration, just because if we are looking for some special requeriments we will need to customize both products.

For this task we will need to have an approach in one "new" technology which was introduced in Office 2007. This is based  in customize Office 2010 Ribbons and Backstage views. Both sets are the most powerful weapon that office 2010 has for developers, as we can do anything we want with them. We can even rebrand our Microsoft Word.

Ribbons:
Microsoft Office Fluent user interface (UI) replaces the current system of layered menus, toolbars, and task panes with a simpler system that is optimized for efficiency and discoverability. The Ribbon, context (right-click) menus, the Quick Access Toolbar, and the Microsoft Office checkbox are all parts of the Office Fluent interface. There are a number of custom and built-in controls, such as buttons, checkboxes, and combo boxes, that you can add to the Ribbon. You add components to the Ribbon with XML markup elements, and set properties on those components by using attributes.

An example of a Ribbon:

An example of a XML markup for this Ribbon will be:

Backstage Views:
In Microsoft Office 2010, the Office button is replaced by a File tab. Clicking the File tab takes you to the Microsoft Office Backstage view. Backstage view helps you discover and use the features that fall outside the authoring features on the Ribbon. Ribbon, Mini toolbar and galleries all help you work in your documents; Backstage view helps you work with your documents.
Backstage view is fully extensible by developers, permitting organizations to customize the user interface (UI) to suit their own needs. And best of all, the Backstage UI is customizable by using the same files, callbacks, and many of the controls used in the Ribbon. This means that developers already familiar with customizing the Ribbon UI can use those same skills to create a Backstage UI targeted at the needs of their organization.


An example of a Backstage View:

An example of a XML markup for this Backstage view will be:

In the next chapter we will go deep inside in the Backstage View development.

Conclusion:
This new tool will provide to Office and Sharepoint an endless scability.