Pieter van der Westhuizen

Customizing Office 2010 Backstage View with Add-in Express

Those of us that have already started using Office 2010, would've notice something unexpected when clicking on the file menu. Instead of the normal menu, you'll notice a whole page occupying your screen. This is known as the backstage view.

Microsoft decided on this new approach to address the fact that due to the increasing number of features and options in the Office Suite of products, users were finding it increasingly difficult to find features.

So, how would this affect us as Office add-in developers? Continuing from my previous post (Add-in Express for Office: new GUI designers and the new guy), I’ll show you how you could use the Office 2010 backstage view in your own add-ins to provide your users with a way to easily discover and use your application's features. As I've mentioned, we're busy building a Customer, inventory and order management system for our long-time client Northwind Traders.  The proposed system must-have users, user roles and various security features as well as a catalogue of products, suppliers, shippers and regions. This type of information would not change on a regular basis, but still needs to be easily accessible to the users. In this post I'll show you a way of accomplishing this by using the Office 2010 Backstage View.

Right, so let's get cracking. In order to use the backstage view you need to add it to your AddinModule Designer by either clicking on the Add ADXBackstageView toolbar button or by selecting it from the context menu. If you're wondering what toolbar button I'm talking about, please read my previous post about this new feature in Add-in Express Beta 2.

Next, select the newly added ADXBackstageView component and click on the ellipse(…) button in the Controls property. The following window will be displayed:

RibbonBackstageView controls collection

Click on the ADXRibbonBackstageTab button. This will add a BackStageTabView with 2 child nodes: First Column and Second Column. Now these two columns are exactly what their names suggest. If you take a look at the build in Office 2010 Backstage view, you would see two columns, below is an example of Word 2010's Backstage view:

Word 2010's Backstage view

Next, we need to decide where our Northwind Tab will be positioned in the “File Menu”. I've decided to place it before the Options item. In order to accomplish this, set the InsertBeforeIdMso property to ApplicationOptionsDialog. You might be wondering how I knew which ID to use? Well, fortunately Microsoft provides a downloadable list of control names. You can download it here.

Select the First Column and add a BackstageTaskFormGroup by clicking on the Add ADXRibbonBackstageTaskFormGroup button on the toolbar. Set the Caption property to Northwind Configuration and the HelperText property to Setup Master data and User preferences, set the AllowedTaskSizes property to Medium and the Ribbons property to OutlookExplorer.  By setting the Ribbons property, we specify in which Office applications out Backstage Tab will be visible. For Northwind, this will only be Outlook as they have decided that it will be their primary application.

The Members treeview should now look something like this:

Members treeview

Select the Northwind Configuration TaskFormGroup and add a new TaskFormGroupCategory by clicking on the ADXRibbonBackstageTaskFormGroupCategory button in the toolbar. Set the Caption property to Master Data. Next, add a BackstageTaskFormGroupTask by clicking on the ADXRibbonBackstageTaskFormGroupTask button and change the Caption to Maintain Master Data  and the Description to Maintain and configure master data.

Right at this point add 3 BackstageGroups to the BackstageTaskFormGroupTask. Do this by clicking on the ADXRibbonBackstageGroup button. Change their properties to the following:

  • Caption: Add/Edit Products
  • HelperText: Update existing or add new products
  • Caption: Add/Edit Suppliers
  • HelperText: Update existing or add new suppliers
  • Caption: Add/Edit Regions
  • HelperText: Update existing or add new regions

Your Members treeview should now look something similar to this:

Members treeview

Expand the Add/Edit Products Item, and select the Primary Item. Add a ADXRibbonBackstageRegularButton to it by clicking the button on the toolbar. Change its caption to Products.  Do the same for the other 2 BackstageGroups, adding buttons for both Suppliers and Regions.

OK, so let's take a look at what your Backstage view will actually look like in Outlook 2010. First build and register your project and then start Outlook 2010. The result should look like this:

NorthWind item

Ok, so you would probably not have the Preferences part yet. Here's a screenshot of what the Preferences TaskFormGroupCategory looks like:


To get the bulleted lists below the User Preferences BackstageGroup, I've added a RegularButton to the Primary Item of the BackstageGroup and 2 AdxBackstageLabelControls to the Top Items. The hyperlink is a BackstageHyperlink that I've added to the Bottom Items. To better illustrate the above layout have a look at the following image:


It does take some playing around and experimenting to get your own Backstage view just right. Don't be afraid to try different combinations.

Now that we're happy with our layout, how do you get some code behind the UI components? Well, that is pretty easy. On the AddinModule designer, switch to code view and  select you button from the control dropdown list (I'm using VB.Net in this case, C# folks, check my Add-in Express 2010 and Office add-ins: Getting started post on creating the event hook-up code) and choose OnClick from the event dropdown list. You can add your own logic in the event handler – I've just added a Messagebox.Show to illustrate and herewith an example of the code used:

Private Sub AdxBackstageRegularButton3_OnClick(ByVal sender As Object,
	ByVal control As AddinExpress.MSO.IRibbonControl)
		Handles AdxBackstageRegularButton3.OnClick
	MessageBox.Show("Your Logic Goes Here")
End Sub

And that's that. For illustration purposes here is what the final version of my Members treeview looks like:

Members treeview - final look

I hope you enjoyed figuring out the BackStageView with me, there is a lot more to it than what I've just showed you, so go wild and explore.

Until next time, keep coding!


  • https://secure.gravatar.com/avatar/79387633972873cbc4c1844451c813fc?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Mulugheta says:

    Hi Add-in-Express Team

    We have add-in-express built version 6.5.3057 Premium. I am trying to implement adxBackStageHyperlink control in my add-in. If i am not mistaken in this control, there is no target url property expose by add-in-Express. Do you have any idea about this?

    Best Regards!

  • https://secure.gravatar.com/avatar/e1a4c2b21a5186e0b27c1c601f418b76?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Pieter van der Westhuizen says:

    Hi Mulugheta,

    The adxBackStageHyperlink control does not have a target url property similar to the ASP.Net Hyperlink controls’ NavigateUrl property.
    If you want to open a webpage when the user clicks on the hyperlink add the following code to its OnClick event:


    Hope this helps! Thanks for your comment.

  • https://secure.gravatar.com/avatar/79387633972873cbc4c1844451c813fc?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Mulugheta says:

    Hi Pieter

    Thank you for your response. You are right but i was expecting target property in desinger which is easy to implement. If you try to Custom UI Editor For Microsoft Office just by setting target attribute in your CustomUI.xml, you can open a page.

    It would be nice, if you implemt this in the coming new version.

    Thank you.

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Mulugheta,

    Thank you for your suggestion, we will add the Target property to the ADXBackstageHyperlink component. Please note, the ‘onAction’ and ‘getTarget’ attributes in the Ribbon schema are mutually exclusive so you will not get the OnClick event if specify the Target property.

  • https://secure.gravatar.com/avatar/40445b33e64941ceaa91762cc8bda725?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G alexander says:

    Going through this sample I found that setting AllowedTaskSizes property to Medium
    or any other value doesn’t take effect. It’s always small.
    Any ideas how to figure it out?
    (Add-in Express for Microsoft Office and .net, Professional, 7.5.4072)

  • https://secure.gravatar.com/avatar/e1a4c2b21a5186e0b27c1c601f418b76?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Pieter van der Westhuizen says:

    Hi Alexander,

    The AllowTaskSizes property affects the BackstageTaskFormGroupTask object. You’ll need to add a BackstageTaskFormGroupTask object to the BackstageTaskFormGroupCategory first. Changing the AllowedTaskSizes property on the BackstageTaskFormGroup will then change the BackstageTaskFormGroupTask’s height.

    Hope this helps!

  • https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32 Anonymous says:

    Seems like the treeview harkens back to the MS Office 2003 layout, which I prefer, rather than dealing with all the largess of the ribbon, icons and pages of 2007 and beyond. I wish Microsoft would offer this treeview to us automatically, because it’s straight-forward and gets us to the point without all the largess, for lack of a better word. The ribbon gives me a headache, even when minimized, and adding quick access icons were limited in 2007 as opposed to 2003, when I could add as many as I wanted to. I’m on the verge of learning 2010 now, and hopefully will have more success at customizing this godawful ribbon into something I can live with.

Post a comment

Have any questions? Ask us right now!