Export (0) Print
Expand All
Expand Minimize

Customizing the Layout of Columns in the Office 2010 Backstage View

Office 2010

Office Visual How To

Summary:   Learn how to create the three kinds of column layouts in the Microsoft Office 2010 Backstage View. (12 printed pages)

Last modified: September 12, 2012

Applies to: Excel 2010 | Office 2010 | Open XML | PowerPoint 2010 | VBA | Word 2010

Published:   April 2010

Provided by:   Michael Case, iSoftStone

Overview

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.

Code It

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

  1. Start Microsoft Excel 2010.

  2. Click the File tab.

  3. Click Save As.

  4. In the Save as type list, select Excel macro-enabled workbook (*.xlsm).

  5. Click Save to finish. Save the document as C:\Temp\BackstageViewFormatControls.xlsm.

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

  1. Start the Custom UI Editor.

  2. On the File menu, click Open.

  3. Select the C:\Temp\BackstageViewFormatControls.xlsm file that was created in the previous procedure and then click Open.

  4. On the Insert menu, click Office 2010 Custom UI Part. This creates a CustomUI14.xml file in the document.

  5. Select the customUI14.xml file and copy the following XML into the file.

    <?xml version="1.0" encoding="utf-8"?>
    <!-- customUI is the root tag of all Fluent UI customizations. -->
    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
      <!—The Backstage defines the custom structure of the Backstage UI -->
      <backstage>
        <!-- Tab defines the name to display in the Backstage
             view tab and the controls to display on the page when 
             the tab is selected. -->
        <!-- 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="arthurTitle" label="Corporate VP" />
                  <labelControl id="arthurRole" label="Final Approver" />
                  <labelControl id="arthurDueDate" label="10/20/2009" />
                </layoutContainer>
                <layoutContainer id="carolLayout" layoutChildren="horizontal">
                  <imageControl id="carolImage" image="Carol" />
                  <labelControl id="carolName" label="Carol Johansen" />
                  <labelControl id="carolTitle" label="Division GM" />
                  <labelControl id="carolRole" label="Division Signoff" />
                  <labelControl id="carolDueDate" label="10/16/2009" />
                </layoutContainer>
                <layoutContainer id="charlesLayout" layoutChildren="horizontal">
                  <imageControl id="charlesImage" image="Charles" />
                  <labelControl id="charlesName" label="Charles Bisco" />
                  <labelControl id="charlesTitle" label="Engineering GM" />
                  <labelControl id="charlesRole" label="Engineering Signoff" />
                  <labelControl id="charlesDueDate" label="10/14/2009" />
                </layoutContainer>
              </topItems>
            </group>
          </firstColumn>
        </tab>
        <!-- This tab shows 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>
        <!-- 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>
      </backstage>
    </customUI>
    
  6. On the File menu, click Save.

  7. Close the Custom UI Editor.

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

  1. Start Microsoft Excel 2010.

  2. Click the File tab.

  3. Click Open.

  4. Open the BackstageViewFormatControls.xlsm workbook.

  5. Select the Developer tab.

  6. Click Visual Basic.

  7. On the Insert menu, click Module.

  8. Select Module1 and copy the following VBA code into the file.

    '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
    
    
  9. On the File menu, click Save.

  10. Close the Visual Basic for Applications Editor and return to the workbook.

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.

Figure 1. Custom Backstage View Single Column Layout Page

Custom Backstage View Single Column Layout Page

Figure 2. Custom Backstage View Two-Column Layout Page

Custom Backstage View Two Column Layout Page

Figure 3. Custom Backstage View taskFormGroup Layout Page

Custom Backstage View taskFormGroup Layout Page

 

Read It

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>

See It

Watch the video

Watch video

Length: 00:06:28

Click to grab code

Grab the Code

Explore It
Show:
© 2014 Microsoft