Customizing the Layout of Columns in the Office 2010 Backstage View

The Microsoft Office Backstage view, new to Office 2010, replaces the traditional File menu to provide a centralized space for file management tasks such as opening new or existing files, defining document properties, and sharing information. Like the Microsoft Office Fluent Ribbon, the Backstage view is fully extensible using XML to define the structure, components, and callback procedures to give those components functionality.

In the Backstage view you have three options available for laying out page controls in columns. This article describes how to layout Backstage view page controls by using a single column, two columns, or creating additional sub-navigation in a column by using the taskFormGroup control.

This article uses Trang Luu's Custom UI Editor to simplify adding custom UI XML to the Microsoft Excel 2010 workbook. You must download and install the Custom UI Editor to follow the steps provided in this article.

This article customizes the Backstage view of an Excel 2010 workbook by using a combination of XML and VBA code. The XML defines a custom tab and the controls to display in the Backstage view. The VBA code provides the functionality that is required by the callback procedures defined in the custom UI XML.

This article describes the following steps to show creating a customized Backstage view in an Excel 2010 workbook:

1. Create an Excel workbook

2. Add the custom UI XML

3. Add the VBA callback code

4. View the custom Backstage view page

Create an Excel Workbook

In this article, you add custom UI XML and VBA code to a new Excel 2010 workbook. You must create the Excel 2010 workbook as a macro-enabled workbook (.xlsm) to support the VBA code.

To create the workbook

Add the Custom UI XML

The Custom UI Editor simplifies adding the Custom UI XML to the Excel 2010 workbook created in the previous step.

To add the custom UI XML

Add the VBA Callback Code

The VBA callback procedures add functionality to the custom Backstage view components added through the custom UI XML in the previous step.

To add the VBA callback code

View the Custom Backstage View Page

To view the custom Backstage view pages defined earlier in this section, you display the Backstage view by selecting the File tab. After the Backstage view appears, select one of the custom layout tabs that are located before the built-in Info tab. Select the Single Column Layout tab to view controls in a single column, the Two-Column Layout tab to view controls in two columns, and the taskFormGroup Layout tab to view adding sub-navigation by using the taskFormGroup control.

Heading

Extending the Office 2010Backstage view to include custom pages and controls to support your own needs is a combination of adding custom UI XML to the Office document and adding VBA code to provide the functionality for the callbacks specified in the custom UI XML.

The sample code in this article describes the three options to layout controls on columns in a Backstage view page:

• You can specify a single column by using the firstColumn element. This option is useful when you want to present information horizontally.

• You can specify two columns of information by using both the firstColumn and secondColumn elements. This is the most typical option.

• You can create additional sub-navigation by using the taskFormGroup control. The taskFormGroup control enables you to display groups based on selections made in the taskFormGroup control.

Single Column Layout

Laying out controls in a single column is useful if you want to present information horizontally. A single column layout is created by putting all controls within the firstColumn element when you define the page. The following code fragment shows creating a single column page by only defining the firstColumn element within the tab element.

<!-- This tab illustrates the single column layout. -->
<tab id="singleColumnTab" label="Single Column Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <group id="reviewersGroup" label="Document Reviewers">
      <topItems>
        <layoutContainer id="headerLayout" layoutChildren="horizontal">
          <imageControl id="imageSpacer" image="ImageSpacer"/>
          <labelControl id="name" label="NAME" />
          <labelControl id="title" label="TITLE" />
          <labelControl id="role" label="ROLE" />
          <labelControl id="dueDate" label="APPROVAL DUE DATE" />
        </layoutContainer>
        <layoutContainer id="arthurLayout" layoutChildren="horizontal">
          <imageControl id="arthurImage" image="Arthur" />
          <labelControl id="arthurName" label="Arthur Davis" />
          ...
          <labelControl id="charlesRole" label="Engineering Signoff" />
          <labelControl id="charlesDueDate" label="10/14/2009" />
        </layoutContainer>
      </topItems>
    </group>
  </firstColumn>
</tab>

Two-Column Layout

The typical scenario is to lay out controls into two columns. A two-column layout is created by placing the controls that you want to display on one side of the page within the firstColumn element, and controls that you want to display on the other side of the page in the secondColumn element. The following code example shows a two-column page by defining both the firstColumn and secondColumn elements within the tab element.

The editBox controls that are used to display Specification Details in the first column have their getText callbacks set to GetSpecDetailText. The GetSpecDetailText callback evaluates which editBox is displayed and returns the appropriate text.

<!-- This tab illustrates the two-column layout. -->
<tab id="twoColumnsTab" label="Two Column Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <group id="specDetailsGroup" label="Specification Details" 
           helperText="Keep the following information up to date.">
      <topItems>
          <editBox id="specTitle" label="Title:        "
                   getText="GetSpecDetailText" />
          <editBox id="specDesigner" label="Designer: "
                   getText="GetSpecDetailText" />
          <editBox id="specEngineer" label="Engineer: "
                   getText="GetSpecDetailText" />
          <editBox id="specTeam" label="Team:      "
                   getText="GetSpecDetailText"/>
          <editBox id="specCost" label="Cost:        "
                   getText="GetSpecDetailText"/>
      </topItems>
    </group>
  </firstColumn>
  <secondColumn>
    <taskGroup id="bidProcessTaskGroup" 
               label="Contract Bid Process Checklist" >
      <category id="defineWorkScopeCategory" 
                label="Define work and tasks - Complete tasks in order.">
        <task id="defineScope" label="Define the Scope of Work." 
              imageMso="_1"/>
        <task id="assignTasks" label="Assign the Tasks" 
              imageMso="_2"/>
      </category>
      <category id="calculateCostsCategory" 
                label="Calculate costs - Complete tasks in order.">
        <task id="calcManHours" label="Calculate Total Man-Hours" 
              imageMso="_3"/>
        <task id="calcOverheadCosts" label="Determine Overhead Costs" 
              imageMso="_4"/>
      </category>
    </taskGroup>
  </secondColumn>
</tab>

'Returns the text to display for each specification detail editBox.
Sub GetSpecDetailText(control As IRibbonControl, ByRef returnedVal)
  Select Case control.ID
    Case "specTitle"
      returnedVal = "Flexible Bracket"
    Case "specDesigner"
      returnedVal = "Andrew Fuller"
    Case "specEngineer"
      returnedVal = "Nancy Davolio"
    Case "specTeam"
      returnedVal = "Design"
    Case "specCost"
      returnedVal = "$896,210"
  End Select
End Sub

taskFormGroup Layout

In some cases, you may want to provide additional sub-navigation on a Backstage view page. The taskFormGroup control supports this by displaying groups of controls in a pane to the right side of the first column, depending on selections made in the taskFormGroup control. The taskFormGroup element uses task elements which are defined within category elements to determine which groups of controls should be displayed. Each task can define one or more groups that contain the controls to display. When a task in the taskFormGroup control is selected, the groups that are defined for that task display. Selecting different tasks changes the groups displayed in the pane to , which enables you to display more information in a smaller space.

The following code example shows how to use a taskFormGroup control to provide sub-navigation on a page. The taskFormGroup element defines three category elements that contain a single task. The task defines a group of buttons. When you click the engineeringTasks task, the engineeringGroup group is displayed in the pane to the right side. When you click the manufacturingTasks task, the manufacturingGroup group replaces the engineeringGroup group in the pane to the right side.

<!-- This tab illustrates the taskFormGroup layout. -->
<tab id="taskFormGroupTab" label="taskFormGroup Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <taskFormGroup id="teamTaskFormGroup">
      <category id="engineeringCategory" label="Engineering Tasks">
        <task id="engineeringTasks" 
              label="Manager: William Rodgers" 
              description="Engineering Excellence" 
              imageMso="TableDesign">
          <group id="engineeringGroup" label="Engineering Group">
            <topItems>
              <button id="concept" label="Concept    " 
                      imageMso="_1" />
              <button id="design" label="Design       " 
                      imageMso="_2" />
              <button id="prototype" label="Prototype  " 
                      imageMso="_3" />
              <button id="production" label="Production" 
                      imageMso="_4" />
            </topItems>
          </group >
        </task>
      </category>
      <category id="manufacturingCategory" label="Manufacturing Tasks">
        <task id="manufacturingTasks" 
              label="Manager: Alice Morton" 
              description="Right the First Time" 
              imageMso="ControlsGallery">
          <group id="manufacturingGroup" label="Manufacturing Group">
            <topItems>
              <button id="flowDesign" label="Flow Design    " 
                      imageMso="_1" />
              <button id="tooling" label="Tooling            " 
                      imageMso="_2" />
              <button id="staffing" label="Staffing            " 
                      imageMso="_3" />
              <button id="manufacturing" label="Manufacturing" 
                      imageMso="_4" />
            </topItems>
          </group >
        </task>
      </category>
      <category id="marketingCategory" label="Marketing Tasks">
        <task id="marketingTasks" 
              label="Manager: Jane Burns" 
              description="Bringing Quality to the Customer" 
              imageMso="SignatureShow">
          <group id="marketingGroup" label="Marketing Group">
            <topItems>
              <button id="concepts" label="Concepts              " 
                      imageMso="_1" />
              <button id="storyBoarding" label="Story Boarding     " 
                      imageMso="_2" />
              <button id="finalization" label="Finalization           " 
                      imageMso="_3" />
              <button id="channelSelection" label="Channel Selection" 
                      imageMso="_4" />
              <button id="execution" label="Execution              " 
                      imageMso="_5" />
            </topItems>
          </group >
        </task>
      </category>
    </taskFormGroup >
  </firstColumn>
</tab>

Length: 00:06:28

Grab the Code

• Introduction to the Office 2010 Backstage View for Developers

• Customizing the Office 2010 Backstage View for Developers

• Office 2010 Beta Developer Center

• What is the Microsoft Office Backstage view?

• Trang Luu's Custom UI Editor

• Customizing the 2007 Office Fluent Ribbon for Developers