Create Add-ins to Customize the Office 2010 Backstage View

Article
07/24/2014

Office Quick Note banner

Getting Started with Office 2010 Fluent UI Customization: Create custom tabs on the Microsoft Office Backstage view user interface.

Applies to: Excel 2010 | Office 2010 | PowerPoint 2010 | Word 2010

In this article
Create the COM Add-in Project
Add Code to Give the Controls Functionality
Add XML to the Project to Create the Tab and Controls
Install the Add-in and Test the Solution
Next Steps

Published: August 2010

Provided by: Frank Rice, Microsoft Corporation

Watch the Video

In this exercise, you create a COM add-in that adds a custom tab, group, and other controls to the user interface (UI). To complete this task, you must do the following:

Create the COM Add-in Project
Add Code to Give the Controls Functionality
Add XML to the Project to Create the Tab and Controls
Install the Add-in and Test the Solution

Create the COM Add-in Project

In this task, you create the shared COM add-in project in Microsoft Visual Studio 2010.

To create the add-in project

Start Visual Studio 2010, click File, point to New, and then click Project.
In the Installed Templates section, click Other Project Types, click Extensibility, and then click Shared Add-in.
In the Name box, type BackstageCOMAddin, and then click OK.
In the Shared Add-In Wizard, click Next, click Create an Add-in using Visual Basic, and then click Next.
In the Select An Application Host screen, clear all the boxes except Microsoft Word, and then click Next.
In the What is the name of your Add-in screen, type BackstageAddin, and then click Next.
In the Choose Add-in Options screen, select I would like my Add-in to load when the host application loads, click Next, and then click Finish.
In this step, you add assembly references to the project. In Solution Explorer, expand the References section, and then delete the Microsoft.Office.Core node.
Next, right-click BackstageCOMAddin, and then click Add Reference.
In the Add Reference dialog box, click the .NET tab, click Microsoft.Office.Interop.Word, and then click OK.
Right-click BackstageCOMAddin, and then click Add Reference.
Click the COM tab, click Microsoft Office 14 Object Library, and then click OK.

Add Code to Give the Controls Functionality

In this task, you add Visual Basic code to the project that gives functionality to the button that you add in the next task.

To add Visual Basic code to the project

In Solution Explorer, right-click Connect.vb, and then click View Code.

At the top of the screen, add the following statements.

Imports Office = Microsoft.Office.Core
Imports Word = Microsoft.Office.Interop.Word

In the Connect class, replace the Implements statement with the following.
```
Implements Extensibility.IDTExtensibility2, Office.IRibbonExtensibility
```
After the Implements statement, replace the applicationObject declaration with the following declaration.
```
Private applicationObject As Word.Application
```
Next, you add the XML file that will contain the XML you add in the next task. In Solution Explorer, right-click BackstageCOMAddin, point to Add, and then click New Item.
In Installed Templates, click Common Items, click XML file, name the file customUI.xml, and then click Add.
Add the XML file as a resource to the project. Right-click BackstageCOMAddin, and then click Properties.
Click the Resources tab and then drag the customUI.xml file onto the tab surface. Close the properties screen.

Click Connect.vb and at the bottom of the screen, add the following code.

Public Function GetCustomUI(ByVal RibbonID As String) As String Implements Microsoft.Office.Core.IRibbonExtensibility.GetCustomUI
   Return BackStageCOMAddin.My.Resources.customUI
End Function

Sub OnAction(ByVal control As Office.IRibbonControl)
   MessageBox.Show("Today's date is " & Date.Now.ToShortDateString())
End Sub

The GetCustomUI method returns the Backstage view XML to Microsoft Office when Word 2010 starts. The OnAction method is called when you click the button that you add in the next task.

Add XML to the Project to Create the Tab and Controls

In this task, you add XML to the project that adds the tab and controls to the Backstage view.

To add XML to the project

In Solution Explorer, right-click customUI.xml, and then click View Code.

In the code screen, add the following code.

<customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui">
  <backstage>
    <tab id="customTab" label="Sample">
      <firstColumn>
        <group id="customGroup" label="Custom Group">
          <primaryItem>
            <button id="btnButton" label="Today's Date" imageMso="CalendarInsert" onAction="OnAction"/>
          </primaryItem>
          <topItems>
            <layoutContainer id="layoutTwo" layoutChildren="horizontal">
              <comboBox id="cboComboBox" label="Select an item" >
                <item id="item1" label="one"/>
                <item id="item2" label="two"/>
                <item id="item3" label="three"/>
              </comboBox>
              <editBox id="eboxPopulate" label="Text goes here" />
            </layoutContainer>
          </topItems>
        </group>
      </firstColumn>
    </tab>
  </backstage>
</customUI>

This code adds a tab, button, combo box, and text box to the Backstage view. The tab is added at the bottom of the UI pane. The button uses a built-in image as denoted by the imageMso attribute. When the button is clicked, the button executes the OnAction callback procedure. The code also uses a layoutContainer element to specify that the combo box and text box are to be lined up horizontally.

Install the Add-in and Test the Solution

In this task, you test the solution by installing the add-in and testing its functionality.

To test the add-in

In Solution Explorer, right-click BackstageCOMAddin and then click Build.
After the build is complete successfully, right-click BackstageCOMAddinSetup, and then click Build.
When that build is successful, right-click BackstageCOMAddinSetup, and then click Install.
When the BackstageCOMAddinSetup Setup Wizard starts, follow the instructions to install the add-in.
Start Word 2010 and then click the File tab.
Click the Sample tab and then click Today’s Date. A dialog box that has the current date is displayed, similar to that shown in Figure 1.

Figure 1. Today’s date is displayed