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:

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:

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:

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:

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:

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:

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!