Add-in Express vs. VSTO: Customizing Backstage View and context menu

Posted on Friday, February 24th, 2012 at 7:24 am by Pieter van der Westhuizen.

One of the first articles I wrote for Add-in Express was about the Office 2010 Backstage View. Microsoft Office 2010 was still new and users of Office where still getting used to Microsoft’s new approach to the “File” menu.

The Add-in Express Backstage view component has since received a new and very impressive visual designer that makes designing the Backstage view in Office 2013 and Office 2010 a piece of cake. A visual designer is particularly useful because the backstage view is not an easy component to customize as it can have a combination of tabs, groups, fast commands and columns, and it can be a daunting task in getting the layout just right using VSTO and XML.

In the first part of this article I’ll show you how to create your own backstage view tab and your own custom context menu when the user right-clicks on a cell in Excel using the Add-in Express visual designer. In the second part we’ll design the same two UI customizations using VSTO and XML.

Creating the Backstage View tab with Add-in Express

If you’ve read any of my previous articles, you’ll have noticed that all the Add-in Express magic happens when you create a new COM Add-in project in Visual Studio. Add-in Express supports Visual Studio 2005 to 2010, including the Visual Studio Express editions, and the latest Visual Studio 2012 (VB.NET, C#, C++.NET).

Thereafter you can make your selection of the minimum supported Office version as well as the supported Office applications.

With the AddinModule designer open you can add a new ADXBackstageView by clicking on its icon on the designer toolbar.

Add-in Express provides a built-in visual designer for all their UI components. All you need to do is select the ADXBackstageView component and the designer will be visible in the bottom half of the design surface.

Designing your Backstage View is then a matter of selecting the Backstage View controls from the designer toolbar. As you add controls, Add-in Express will update the preview window enabling you to design the entire Backstage View tab without having to constantly run your project to see what it will look like in MS Office.

Unlike VSTO, it is not necessary to write code in order to add images to your buttons. You can simply drop a standard ImageList control onto the designer surface and select it as the buttons’ ImageList property and set the appropriate image on the buttons’ Image property.

Creating an Excel context-menu with Add-in Express

It is very easy to add your own menu items to the built-in Microsoft Office context menus with Add-in Express. Add-in Express provides two components for customizing the Office context-menus. For commandbar based context menus in Office 2000 to 2010 you’ll use the ADXContextMenu and to customize the Office 2010 and Office 2013 context menu you’ll use the ADXRibbonContextMenu component. You are also able to use both components in one Add-in Express project.

As with the Backstage View you are provided with a visual designer by adding a new ADXContextMenu to the AddinModule designer. Selecting it displays its visual designer and it will enable you to add your own menu items.

Specifying in which Office application and context-menu your menu items should be added is as simple as specifying two properties on the ADXContextMenu item. The SupportedApp property is used to specify in which Microsoft Office application you need to add your menu items.

The CommandBarName property is used to specify to which context-menu in the supported Office application you want to add your own menu items. The values in this list change when you specify a different value in the SupportedApp property e.g. If you select Excel as the supported application you will only see commandbar name values which is valid for MS Excel.

The ADXRibbonContextMenu component allows you to add custom controls to several of the built-in context menus, for example you can show the same additional menu items when the user right-clicks on a picture or on a selected Excel row. The ADXRibbonContextMenu has a similar visual designer as the ADXContextMenu component. Add a new ADXRibbonMenuContextMenu component to the AddinModule designer surface and specify the Context menu names in its ContextMenuNames property.

In the image below, I’ve specified that my custom menu-items should be added to both the Picture and Row context-menu in Excel.

Creating the Backstage View tab with VSTO

Although VSTO does provide a limited visual designer for the Ribbon UI, it does not provide any designer for the Office Backstage View, which means hand-coding the entire layout using XML.

It also does not provide any Visual Studio Item templates for adding a Backstage view to your VSTP project, rather you must add a new Ribbon (XML) item, which at first might seem a bit strange, but bear with me a little longer…

The Ribbon (XML) item adds two files to your project, one with the ribbon layout in XML (Ribbon.xml) and another (Ribbon.cs) as the backing class for the layout.

The Ribbon.xml file contains sample mark-up for a ribbon tab which we’ll remove as it’s not necessary for this example. We’ll then add the mark-up for the backstage view, the code listing for the file looks like this:

<customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
  <backstage>
    <tab id="tabPublish" label="Publish" insertAfterMso="TabInfo">
      <firstColumn>
        <taskFormGroup id="TaskFormGroup1">
          <category id="saveandsendcategory" label="Save &amp; Send" >
            <task id="sendEmailtask" label="Send Using E-mail" >
              <group id="sendEmailGroup" label="Send Using E-mail">
                <primaryItem/>
                <topItems>
                  <layoutContainer id="emailGroupContainer1"
								layoutChildren="horizontal"
								expand="both">
                    <button id="sendAttachmentButton" label="Send as Attachment"
								style="large" getImage="GetImage"/>
                    <layoutContainer id="attachmentLayoutContainer" 
								layoutChildren="vertical" expand="both">
                      <labelControl id="attachLabel1" 
							label="Attach a copy of this document to an e-mail"/>
                      <labelControl id="attachLabel2" 
							label=" - Everyone receives separate copies of this message"
							expand="both"/>
                      <labelControl id="attachLabel3"
							label=" - Changes and feedback need to be incorporated manually"
							expand="both"/>
                    </layoutContainer>
                  </layoutContainer>
                  <button id="sendFaxButton" label="Send as Internet Fax"
							style="large" getImage="GetImage" />
                </topItems>
              </group>
            </task>
          </category>
          <category id="fileTypescategory" label="File Types">
            <task id="createPDFTask" label="Create PDF">
              <group id="noprinterinstalledgroup"
						label="No PDF Printer Installed?"
						style="warning">
                <topItems>
                  <hyperlink id="website1"
						label="Visit the website to download software"/>
                  <hyperlink id="website2"
						label="Visit another website to check for software"/>
                </topItems>
              </group>
            </task>
          </category>
        </taskFormGroup>
      </firstColumn>
    </tab>
  </backstage>
</customUI>

I must confess, I created the Add-in Express version of the Backstage view first as it made it easier to then simply typing the design from the Add-in Express visual designer into XML. If I did not have Add-in Express, it would probably have taken me ages to get the design just right, as I would have had to constantly run Excel in order to see what the design looks like.

As with the RibbonUI in VSTO, you need to specify a method in code to load your button images as well as copy a piece of code in the Ribbon.cs file to the ThisAddin.cs file:

protected override Microsoft.Office.Core.IRibbonExtensibility
	CreateRibbonExtensibilityObject()
{
    return new Ribbon1();
}

This is used to initialize your UI code from the Ribbon.xml file. If you forget to copy this code into the ThisAddin.cs file, you might run into a scenario where your UI customizations simply do not display in Office.

Creating an Excel Cell context-menu with VSTO

We’ll wrap up by creating a context-menu item for Excel using VSTO. You do this by adding mark-up to the same Ribbon.xml file. To add a menu item to the Excel Cell context-menu, you need to add the following:

<contextMenus>
    <contextMenu idMso="ContextMenuCell">
      <menu id="myCustomContextMenu" label="My Custom Menu">
        <button id="cellContextMenuButon1" label="Recalculate"/>
      </menu>
    </contextMenu>
  </contextMenus>

Be warned that the idMso attribute is case-sensitive, a fact that could be somewhat frustrating if you’re not aware of it.

All in all, I hope you have seen just how much easier and faster adding these UI customizations to Microsoft Office is with Add-in Express. Although VSTO does provide a developer with a method to do this, I simply cannot justify spending so much time on getting my add-ins’ UI ready, rather than focusing on the core functionality.

In this as well as the previous article, I’ve shown you how to customize the Office RibbonUI , Backstage View and context-menu. There are a lot more UI customizations you can do in Office, including Office 2003-2000 command bars, the Quick Access menu, the Solutions Module, Navigation bar shortcuts, task panes and many more. Add-in Express provides visual designers for all of these, so ask yourself the question: “Why am I still using VSTO?”

Thank you for reading. Until next time, keep coding!

Last updated: 6-Feb-2013