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.