Customizing the Backstage view and Ribbon UI in Office 2010

  • Article

One of the presentations I delivered at SPC 2009 was the title of this blog post. Don't worry—I'll be posting the video when it becomes available. And, we've got some MSDN content coming out before RTM that will show you the details around programming the Microsoft Office 2010 Backstage view and the Ribbon UI. Consider this blog post the prelude to all that. I'm going to introduce you to the basics of Backstage programming. For a great intro what Backstage is go here.

Update: Mirko Mandic has newly added a post about Office 2010 UI Extensibility--- great companion reading to my post.

Here's the basic flow of building your customization:

  1. Add XML markup to define the view and what it contains, then make this XML available to the Office application so it knows to load it
  2. Create methods in code to which your controls and other items in Backstage will call back.
  3. Add these method calls to your XML markup so that the Office application knows which methods to call when a control event fires

If these three steps for Backstage programming sound just like what you do in Ribbon customizations in Office 2007 then you are on the right track. In this post, I'll walk through the basics of the Step #1.

So, let's look a very simple example and understand the terms.

Looking at the overall Backstage view you'll notice the word Custom highlighted on the left toward the bottom. This is called a Tab and in this case it is a custom Tab. When a user selects a tab, the two columns you see to its left are then shown. You can only work with two columns after a Tab is selected. What you put in there is up to your needs and what the Backstage XML schema will allow. Again, I won't go into all of that detail in this post as this is meant to be a quick/simple introduction.

You'll also notice that just above the custom Tab is a little button with a happy face.

This is called a Fast Command. You can add your own Fast Commands to the Backstage view. Office applications come with some Fast Commands already built in, like Save or Save As. You can hook up your custom Fast Command to some code procedure that runs code meaningful to your users activity.

Looking back again to the Custom Tab, you see that in the first column there is text, "My Category".

This is a Category, and you can have multiple Category items in a given column. Below that Category is a custom Task called "My Task" and it is accompanied by an image--- a happy face. As with other controls in the Backstage view, you can designate a code procedure that will run when the user selects the Task. To the right of the Category is a Group called "My group".

The key difference between a Category and a Group is what they contain and how they can be organized. Once again, we'll wait on our more thorough documentation to help you through all of the details. What is interesting with "My group" is that it contains a different kind of control—in this case what we call a "Hero Button". This Hero Button displays a different image, in this case the FileSave image. As you can expect, this button can be hooked up to a code procedure.

Now, let's look at the basic XML syntax to make all of this happen.

NOTE: You'll notice that the XML begins with a namespace declaration. Keep in mind that this is pre-release, and namespaces or the rest of the schema may change in the lead up to Beta 2 and RTM. This is common as we continue to refine the product in the remaining milestones.

<customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui">

 <backstage>

  <button id="customButton" label="Button" imageMso="HappyFace"/>

   <tab id="customTab" label="Custom">

    <firstColumn>

     <taskFormGroup id="GroupShare">

      <category id="ButtonCategoryAvailableFileTypes" label="My Category">

       <task id="100001" label="My Task" imageMso="HappyFace">

        <group id="100002" label="My group">

         <primaryItem>

           <menu id="100003" label="Hero" imageMso="FileSave">

            <menuGroup id="100004" itemSize="large">

              <button id="100005" label="Button" description="Some Description" imageMso="HappyFace"/>

            </menuGroup>

         </menu>

       </primaryItem>

     </group>

   </task>

  </category>

 </taskFormGroup>

 </firstColumn>

 </tab>

</backstage>

</customUI>

The outermost tag for Backstage view and Ribbon is <customUI></customUI>. All things fall within there. If you had a Ribbon customization, it would also appear here as a sibling with the Backstage view code. The next tag of relevance is what contains the Backstage view markup: <backstage></backstage>. From there, you can decipher fairly easily how the markup relates to the items I have described already. You see the Fast Command appears as <button/>. You then see the first column and its contents. It contains the <category></category> with its children <task></task> and <group></group> that contains a sub menu item with the Hero Button <menu id="100003" label="Hero" imageMso="FileSave"></menu >.

Don't fret that there is a little more to the syntax such as the <primaryItem></primaryItem> and so forth. We'll continue to explore the possibilities of the Backstage view by showing what the rest of the schema allows. For now, this should get you up-and-running with a basic Backstage.

The last thing you need to do is place it in proper location of the file hierarchy in the Office XML file format. The XML for Ribbon and Backstage view go in a directory called "CustomUI" as you see below.

Next Post: Hooking up the controls and buttons to code procedures

Big thanks to Trang Luu, one of our loyal testers, for helping me with this post. There are so many people like Trang who quietly and magnificently make the product great.

Rock Thought of the Day: U2 In Las Vegas

Alright- I need to talk about U2 in Las Vegas. I was able to go to the show (Thanks to Gray Knowlton), and it was end-to-end a high-quality, moving, entertaining show. The opening act was the Black Eyed Peas. I was really unsure how they would go over with the crowd. I have only heard one BEP song, and I'm more of a hard-core rock-n-roller. But, BEP brought it to the crowd. I was in a huge mass of people jumping up and down. BOOM BOOM POW! Then, U2 comes out starting with Larry's drum solo. They break into "Breathe". The show is dazzling, and it is easy to see how the learnings from the PopMart tour along with the Elevation and Vertigo tours have added up to this rather refined rock show. Hearing "Sunday Bloody Sunday" re-directed to the struggle in Tehran was pretty special. And, the show finished with my favorite song from the new record, "Moment of Surrender" . During the entire show, the crowd was singing along word-for-word, song-for-song. I have never experienced it so fully in previous shows.

One minor critique: While I'm pretty supportive of Bono's efforts to relieve 3rd World debts and to bring more assistance to places where infants are dying at alarming rates, the multi-praise sessions for President Clinton mingled with other politics was a little more prominent and longer than I prefer. But, Bono's heart is in the right place, and it wasn't overbearing. It was almost just right. I have to say, I really dig Desmond Tutu. I'd love to know if he can play the blues. He's clearly got soul.

The only unpleasant part was finding a taxi after the show. We ended up walking 3-4 miles from the stadium and going into a bidding war to secure a cab. It was still worth it though.

Here are three shots from the show: Bono, Bono On Bridge, Larry

Rock On