Customizing the Office 2010 Ribbon ILTA U 2012 Courseware Presented by Leah Matthews and Susan Horiuchi PayneGroup, Inc. August 27, 2012 I. II. Office 2010 Ribbon Design - The Good, the Bad, and the Ugly A. The Office 2010 Ribbon is terrific! B. How does Ribbon design go bad? C. Why first impression is important ILTA U Hands On A. Today’s Agenda B. Logging In Username: pcgILTA\ILTAUser2012 Password: iltauser2012 III. Quick Access Toolbar (aka QAT) A. Customizing the QAT without disturbing the user's QAT 1. What can live on the QAT? a. b. c. d. 2. What cannot be placed on the QAT? a. b. 3. PayneGroup, Inc. Command buttons (to launch Microsoft built-in commands) Buttons (to launch macros) Any Microsoft image Separators Custom icons or images Any other commands, such as checkboxes, menus, or other controls that are available on the Ribbon Adding Microsoft images to the QAT ILTA U 2012 - August 27, 2012 IV. Customizing the Ribbon A. What can exist on the Ribbon? 1. V. VI. Any type of Microsoft Ribbon command (Button, Button Group, Checkbox, Combobox, Dropdown box, Edit box, Gallery, Group, Label, Menu, Separator, Split Button, Tab, and Toggle button B. Adding a custom Tab C. Adding a Group to an existing Tab Customizing the Backstage View A. Adding a custom Tab to the Backstage view B. Hiding a built-in Tab in the Backstage view Things to Know Before Customizing the Firm’s QAT A. Use a Global Template Saving the customizations in a global template will give the firm the advantage of making future changes to the QAT, the firm Ribbon, and/or the Backstage view without interrupting the user's personal QAT or Ribbon customizations. 1. Global Template File Location The global template will be saved in the default location: C:\Users\<USERNAME>\AppData\Roaming\Microsoft\Word\Startup The global template containing the firm customizations (stored in the startup folder) will load when Word launches. The startup folder should be designated as a trusted location. NOTE: The default startup location is automatically designated as a trusted location. To designate a different trusted location, from the File tab, click Options. Click the Trust Center tab, and then click the Trust Center Settings button. Click the Trusted Locations tab, and then click the Add new location button. Browse or type the new trusted location path. PayneGroup, Inc. 2 ILTAU 2012 - August 27, 2012 2. File Type The global template containing the firm's QAT customizations should be saved as a macro-enabled template (*.dotm) to allow the inclusion of macros, if any. Even if the firm does not currently have macros to include in the global template, it's a good idea to save the file as macro-enabled in order to allow macros to be added at a later date without necessitating renaming the file. B. Where the User’s Customizations are Stored 1. User’s File Location The user's personal QAT/Ribbon customizations are stored in an officeUI file in the following location: C:\Users\<USERNAME>\AppData\Local\Microsoft\Office NOTE: If the user customized the Word QAT, you will see a Word.officeUI file in the above file location. You will also see similarly named files for Excel and PowerPoint. Outlook has multiple .officeUI files for each QAT that was customized. C. Icons Customizing the icons on the QAT can be done through the main User Interface (UI), but if the icons that the firm wants to use are not available through the UI, customization of the XML will be required. You will do examples of both in Exercise 1. Proceed to Module 1 – Customizing the QAT (page 5) PayneGroup, Inc. 3 ILTAU 2012 - August 27, 2012 VII. Customizing the Ribbon The Ribbon is customized by adding a customUI folder and customUI14.xml file to the document's structure. Customizations for both the Ribbon and the Backstage view are stored within the customUI14.xml file. Figure 1 – Location of the CustomUI XML file within the document structure This file is separate from the customUI file containing the QAT modifications. To modify the Ribbon within an alternate template, this must be done with XML in the CustomUI file. You do not want to modify the user's officeUI file that is stored in the profile. There is a tool that does most of the heavy lifting required to add and modify the CustomUI file without requiring the unzipping and rezipping of the file, as is customary for the QAT. This tool is the CustomUI Editor for Microsoft Office and is available as a free download. You will use this tool in Exercise 2. Proceed to Module 2 – Customizing the Ribbon (page 13) VIII. Customizing Backstage View For this part of the session, we will customize the Backstage view within a PowerPoint template. It might be helpful to display a Tab with the firm's standard PowerPoint templates in the Backstage view, or perhaps hide the Tab containing Microsoft's built-in templates, and replace it with a custom Tab showing only the firm's templates. Proceed to Module 3 – Customizing the Backstage View (page 19) PayneGroup, Inc. 4 ILTAU 2012 - August 27, 2012 Module 1 (informational only) – Customizing the QAT In this exercise, we will add four buttons to the QAT in a global template. Three buttons will run macros that have already been written and are stored in the global template. One button will run a built-in Microsoft print command on which we will modify the icon. Module 1: Lab 1 – Access Exercise Files All exercise files for this session are located in the Dropbox/ILTA2012 folder. To access the exercise files: 1. Open Windows Explorer (right-click Start > Open Windows Explorer). 2. In the Navigation pane, locate the Favorites section at the top. 3. Select Dropbox, and then open the ILTA2012 folder. Module 1: Lab 2 – Open the Global Template 1. Right-click on the Global.dotm file and choose Open. Figure 2 –To edit a template, always right-click then choose Open – doubleclicking creates a new document based on the template NOTE: Always make sure the template is not read-only when editing. 2. In this template, notice there are some commands that have already been placed on the QAT – some are Microsoft commands and some commands launch macros. Module 1: Lab 3 – Add Commands to the QAT 1. PayneGroup, Inc. Click the down-arrow at the end of the Quick Access Toolbar and choose More Commands. 5 ILTAU 2012 - August 27, 2012 2. From the Customize Quick Access Toolbar drop-down list, choose For Global.dotm. You will see the existing commands on the QAT. Figure 3 – Make sure you choose the template that will contain the QAT buttons. If you modify the wrong template, the customizations will be added to your user customizations only. 3. From the Choose commands from drop-down list, choose Macros. (Hint: If you can't read the full names of the macros, resize the width of the dialog box.) Figure 4 – Macros can be added to the QAT 4. Choose GlobalTemplate.CustomMacros.LaunchAward. Click Add. 5. Choose GlobalTemplate.CustomMacros.oLaunchOther. Click Add. 6. Choose GlobalTempalte.CustomMacros.TodaysDate. Click Add. 7. From the Choose commands from drop-down list, choose Popular Commands. Choose Print Preview and Print. Click Add. 8. Select one of the macros you just added and notice that the Modify button is active. The Modify button is not active for built-in commands, such as the Print Preview and Print button. NOTE: The image for a built-in command can also be modified to display an alternate Microsoft image, if desired. It just cannot be done in the main UI. 9. PayneGroup, Inc. Choose the GlobalTemplate.CustomMacros.LaunchAward button that you just added in step 6. Click Modify. 6 ILTAU 2012 - August 27, 2012 10. In the Display Name box, change the name to Launch Award. This will be displayed in the tooltip text when the user hovers their mouse over the button. 11. Select the symbol. NOTE: We will use this same symbol for all of the macros. Although this is a temporary symbol, this step will allow us to easily find and assign new symbols later. Figure 5 - Available Microsoft images to apply to a macro on Word's QAT 12. Click OK. 13. Choose the GlobalTemplate.CustomMacros.oLaunchOther button and click Modify. 14. In the Display Name box, change the name to Launch Other, select the symbol, and then click OK. 15. Choose the GlobalTempalte.CustomMacros.TodaysDate button and click Modify. 16. In the Display Name box, change the name to Today’s Date, select the symbol, and then click OK. 17. Click OK to close the Word Options dialog box. PayneGroup, Inc. 7 ILTAU 2012 - August 27, 2012 Module 1: Lab 4 (informational only) – Adding a Microsoft Image to a Macro on the Word QAT When adding built-in buttons to the QAT, you cannot choose which image is displayed. Only the associated Microsoft image will be available. When adding a macro to the QAT, however, you can choose from a variety of pre-defined Microsoft images. If you want to use an image that is not in the list of available button images (as you learned in the previous lab exercise), you can edit the XML of the customUI file. You can only use Microsoft images on the QAT and not custom graphics. NOTE: Custom graphics can be used on Ribbon buttons, but not on the QAT. Module 1: Lab 5 – Identify Microsoft Images Available to Use on the QAT There are a few ways to identify the name of the image you want to use. 1. In Word, click the down-arrow at the end of the Quick Access Toolbar and choose More Commands. 2. Hover over any command in the list of Microsoft commands. The name displayed within the parentheses is the name of the command. For example, the name of the Microsoft image for Ink Color is "InkColorPicker." . Figure 6 - Hover over a command to display its Microsoft image name PayneGroup, Inc. 8 ILTAU 2012 - August 27, 2012 3. Click OK to close the Word Options dialog box. 4. From the ILTA2012 folder, open the Office2010IconsGallery.docx file. Click the File tab and select either the ImageMso 0 or ImageMso 1 tab to quickly view the image galleries in the Backstage view. We will not be using one of these icons; however, if you were to use one of these icons, you would note the exact Microsoft image name. 5. Close this file. We will use another method. 6. In the ILTA2012 folder, right-click on the Office2007IconsGallery.xlsm file and choose Open. NOTE: Both gallery icon files are available from Microsoft. 7. Click the Developer tab. 8. In the Office Icons group, notice the nine available galleries. 9. Choose a gallery. Hover over an icon to display the name. Locate and then click on the icon you would like to use. The name of the image is displayed. Figure 7 – Choose an available icon from a gallery using the Microsoft Excel workbook PayneGroup, Inc. 9 ILTAU 2012 - August 27, 2012 10. Write down the name of the icon you want to use for the Today's Date button on the QAT here: _____________________________. (We will give you the names of the icons to use for the other buttons later.) 11. You can keep this file open for another module. CAUTION! The following section is the most difficult portion of this session and requires the most precise steps. We must all follow the steps together in order to assure success. If you have not yet selected and written down the name of an icon for your button, everyone will be happy to wait for you. Module 1: Lab 6 – Edit the XML Containing the Button Images for the QAT 1. From Windows Explorer, make a backup copy of the Global.dotm file in case it accidentally becomes unusable. (Make sure Word is closed.) 2. Rename the Global.dotm file extension from .dotm to .zip. Choose Yes to change the file name extension. (The file should now be named Global.zip.) 3. Right-click the Global.zip file and choose Extract All. Click Extract (using the suggested location). 4. The extracted files will display automatically. Open the userCustomization folder. 5. Right-click the customUI.xml file, choose Open With > Notepad. All words in XML are case-sensitive. However, spacing is generally ignored. PayneGroup, Inc. 10 NOTE: If you choose Open, the XML file will open in your default browser and will not be editable. Choose Open only if you want to view the XML without editing it. ILTAU 2012 - August 27, 2012 6. Don't panic! The text within this file may seem foreign, but we will only be making minor modifications. You won't be needing to write XML from scratch in order to make changes to the QAT or the Ribbon. 7. Microsoft images are designated with the tag "imageMso." Within the file, locate the first imageMso that you want to change. (Hint: Choose Edit > Find or press Ctrl+F to open the Find dialog box.) Find "CancelRequest." (This is the name of the temporary icon we used in a previous Lab.) 8. Replace “CancelRequest” (the imageMso name) within the quotes to "A." Note: All of the letters of the alphabet are available as standard Microsoft images. 9. Locate the next "CancelRequest" icon. Change the imageMso name to "Z." 10. Locate the next "CancelRequest" icon. Change the imageMso to the name of the icon that you wrote down in Lab 5, Step 10 above. If you did not write down an image name, use "DateAndTimeInsert." 11. Locate the code for the PrintPreviewAndPrint button. Since this is a Microsoft button and already has a standard image associated with it, the XML does not display the name of the image. The entire text of the XML to display the built-in Microsoft command is as follows: 12. Before the visible attribute, type imageMso="PrintAreaMenu" and press the Spacebar. The code should now look like this (although it may be wrapped onto a second line): NOTE: XML is case sensitive, so the words must use the precise capitalization. 13. PayneGroup, Inc. In Notepad, from the File menu, choose Save. Exit Notepad. 11 ILTAU 2012 - August 27, 2012 14. Go back to Windows Explorer, and move up to the Global folder so that all of the subfolders are displayed as shown in Figure 8. Figure 8 – Extracted Global folders and files 15. Select all of the files and folders within the Global folder. Right-click all of the files and folders selected, and choose Send to > Compressed (zipped) folder. Figure 9 – Rezip all the files in the template 16. A new ZIP file appears in the folder. Since the ZIP file name can vary, just locate the ZIP file with the current date and time. 17. Rename the ZIP file to Global.dotm. Confirm the message to change the extension. 18. Copy the new Global.dotm file back into the original folder (ILTA2012). 19. Reopen the Global.dotm file (right-click > Open) in Word to verify your changes. Try out the macros on the QAT! Keep the file open for the next module. PayneGroup, Inc. 12 ILTAU 2012 - August 27, 2012 Module 2: Lab 1 – Customizing the Ribbon 1. The Global.dotm file should already be open from the previous module and Lab exercise. If it is not open, right-click the file and choose Open (or select it from your recent file list in Word). 2. Click the ILTA tab to view the customizations that have already been created. 3. The ILTA tab contains several groups: Custom Commands, Testing (we will modify this blank group later), Macros, and Utilities. 4. Notice the buttons on the Ribbon can be either large or small. In the Custom Commands group, the first two large size buttons are for the macros Today's Date and Pleading Date. 5. Notice that a custom graphic can be used on Ribbon commands. For example, the koala picture is displayed on the Today's Date button, and other custom graphics are also displayed. NOTE: The macros for all of the commands on the Ribbon are already included in the Global.dotm template for you with the exception of the Macros group. 6. PayneGroup, Inc. Close the file without saving changes. 13 ILTAU 2012 - August 27, 2012 Module 2: Lab 2 – Using the CustomUI Editor 1. Launch the Custom UI Editor for Microsoft Office from the desktop. 2. Click the Open icon and choose the Global.dotm file from the ILTA2012 folder. 3. Keep the Custom UI Editor open for the next Lab. NOTE: If you were opening a template that did not have existing Ribbon customizations, you would insert the Office 2010 CustomUI Part from the Insert menu. You could then insert Sample XML by choosing one of the options shown in Figure 10. Figure 10 – Adding sample XML to a template Module 2: Lab 3 – Understanding XML Structure XML is a structured language that uses opening and closing tags, just like HTML. Each opening tag must have a corresponding closing tag. 1. PayneGroup, Inc. Look at the XML in the right window. Notice the first tag is the customUI tag. Scroll all the way down to the end of the file. Notice the closing tag for the customUI. Closing tags begin with "</". 14 ILTAU 2012 - August 27, 2012 2. Scroll back up to the top of the file. Notice the opening tags for ribbon, tabs, tab, group, and button. Each of these tags also has corresponding closing tags. The closing tag does not need to be fully spelled out if it is within the same paragraph. Instead, just "/>" is used. 3. Keep the Custom UI Editor open for the next Lab. Module 2: Lab 4 – Adding a Button to a Group 1. Open the Office2007IconsGallery.xlsm file (ILTA2012 folder). 2. Identify and write down three image icons you would like to use for the next part of the exercise making sure to note the capitalization in use and the exact spelling. 3. Icon 1: Icon 2: Icon 3: NOTE: Some Microsoft icons contain misspellings. You must reproduce the misspellings in order for the icons to display properly. Switch back to the Custom UI Editor. Scroll down in the XML code window until you see the green notation "EDIT THIS GROUP." Figure 11 – This is where you will add buttons to the Ribbon NOTE: Any text in green is considered a comment. A comment is information about the file but is not used to display any features on the Ribbon. To create a comment in XML, type <!-- before a line of text and --> after the text. The comment will be ignored by the compiler. PayneGroup, Inc. 15 ILTAU 2012 - August 27, 2012 4. From the ILTA2012 folder, open the Add buttons to ribbon group.txt file that contains sample code and copy all of the text. 5. Go back to the XML code window and paste the text directly below the line that reads: <!--ADD BUTTON RIGHT BELOW THIS LINE--> NOTE: When pasting text or typing in the UI Editor, you will notice the screen jumps and your cursor tends to move to the bottom of the window. Figure 12 – Sample code can be used and edited 6. Replace each of the imageMso icons with the icon names you wrote down in step #2 in this Lab. 7. Review the following attributes: Attribute button id onAction Screentip Label imageMso Tag Value btnMacro1 oRibbonx Click here to show a macro (or text of your choice) Macro1 (or text of your choice) Your choice Macro1 NOTE: It’s not necessary to add the size attribute if you want the button to be normal size since that is the standard. If you want the button to appear as a large button, you can add the size attribute of "large." PayneGroup, Inc. 16 ILTAU 2012 - August 27, 2012 8. Click the Validate button well formed. on the toolbar to make sure that the XML is 9. Save the file and Exit the Custom UI Editor. 10. Reopen the Global.dotm file from the ILTA2012 folder. 11. On the ILTA tab, in the Testing group, notice the button image changes. Figure 13 – Buttons displayed vertically Module 2: Lab 5 – Adding Buttons to a Button Group and Adding a Custom Picture 1. Exit Word. 2. Reopen the Custom UI Editor and open the Global.dotm template. 3. Cut the three buttons and paste them within the button group as shown in the next figure. Figure 14 – Buttons in a Button Group will display from left to right, rather than vertically on the Ribbon PayneGroup, Inc. 17 ILTAU 2012 - August 27, 2012 4. Once again, check to make sure your XML is well formed by clicking the Validate button. 5. Before closing the file, we will make one more change. Scroll to the top of the XML file. The button for the TodaysDate macro uses a custom image called Koala. You can tell this is not a standard Microsoft image because the button code uses the attribute "image" instead of "imageMso." Figure 15 – Custom image assigned to a button 6. On the left side of the screen, expand the customUI14.xml file by clicking the + sign. Notice there are four custom images that have been added and are available in this file. Figure 16 – Custom images available for this template NOTE: Before a custom image can be applied to a button, the image has to be added to the file. The images do not have to be distributed to the users because they are stored within the template itself. 7. Click the Insert Icons button 8. In the Navigation pane, select the Libraries folder > Pictures > Samples Pictures. Choose a picture and click Open. 9. Notice the picture you chose is now listed as an available icon. 10. Near the top of the XML file, locate the button id "btnPleadingDate." Notice that an imageMso of ContentControlDate is in use for this macro. 11. Change the attribute to image="Penguins" (or the name of the picture file you selected). 12. Validate the XML one more time. PayneGroup, Inc. on the toolbar. 18 ILTAU 2012 - August 27, 2012 13. If the custom XML is well formed, Save the file and Exit the Custom UI Editor. 14. Open the Global.dotm file in Word to see your changes. Module 3 (informational only) – Customizing the Backstage View Backstage view can be customized in various ways. Additional Tabs can be added, existing Tabs can be hidden, and existing Tabs can be modified. We will first look at where the available templates are located in Backstage view. Module 3: Lab 1 – Viewing PowerPoint Templates 1. Open PowerPoint. 2. Click the File tab > New. 3. Notice the available templates and themes as well as a selection of Office.com templates. Module 3: Lab 2 – Creating a PowerPoint Macro-Enabled Presentation 1. Click the File tab > Save As. 2. From the Save as type drop-down, choose PowerPoint Macro-Enabled Presentation (*.pptm). You could also choose PowerPoint MacroEnabled Template (*.potm). 3. In the File name box, change the name of the presentation to MyFileNewSample. 4. Accept the default location (Documents folder); click Save. 5. Exit PowerPoint. PayneGroup, Inc. 19 ILTAU 2012 - August 27, 2012 Module 3: Lab 3 – Adding Sample XML to Add a Tab to Backstage View 1. Launch the CustomUI Editor from the desktop. 2. Choose File > Open. Navigate to the Documents folder and open MyFileNewSample.pptm. 3. Click Insert > Office 2010 Custom UI Part. 4. Click Insert > Sample XML > Custom OutSpace. 5. Examine the XML that is automatically created. Open and close <backstage> tags are created. Within the <backstage> tags, you will notice a <firstColumn> tag. NOTE: Each Tab within the Backstage view can contain three columns. 6. Save the project and Exit the Custom UI Editor. We will now check to see how the sample XML changed the Backstage view in your PowerPoint presentation. 7. Launch PowerPoint. Click File > Recent > select MyFileNewSample from the list of recent presentations. 8. Click the File tab. In Backstage view, you will see a Custom tab that was created by the XML. NOTE: This code does not actually do anything yet. It is a sample only. 9. PayneGroup, Inc. Close this template. 20 ILTAU 2012 - August 27, 2012 Module 3: Lab 4 – Viewing a Customized Template Next we will open a template that already contains a macro to launch a custom template. In the next Lab, we will add a second button with a Microsoft image of your choice. 1. Click File > Open. Navigate to the ILTA2012 folder and open FileNewSample.pptm. 2. Click File > New. Notice the custom Firm Presentations section with a button called “Daydreaming.” Click the button to launch the presentation. Notice that the Backstage view automatically closes and a new presentation is created based on the Daydreaming template. 3. Close the new presentation without saving. 4. Close the FileNewSample.pptm file and Exit PowerPoint. Module 3: Lab 5 – Adding a Button to a Backstage View Tab Next, you will further customize the XML to display a second button. 1. Launch the CustomUI Editor. 2. Navigate to and choose the FileNewSample.pptm file in the ILTA2012 folder. Click Open. 3. Review the XML that has already been added. 4. Notice the green text, which indicates a comment. This comment explains that by setting the isDefinitive attribute to true, the Backstage view is automatically closed when the user clicks the button. 5. Notice the individual elements of the button: Attribute button id Value(s) FirmTemplateFromFileNew style large, normal label imageMso Daydreaming PhotoAlbumInsert PayneGroup, Inc. Explanation Unique identifier used to name a button These are the only two options for button sizes The text displayed on the button Name of the Microsoft image to be displayed on the bottom. Custom images are also permitted in Backstage view 21 ILTAU 2012 - August 27, 2012 Attribute onAction Value(s) CreateFirmPowerPointTemplate tag Daydreaming.pptx 6. Explanation Name of the macro that runs when the button is clicked Optional attribute. In this case, the tag is used to tell the macro (CreateFirmPowerPoint Template) which template to create Copy the entire button code (as shown in the figure below) and paste directly below the existing button code. (Insert a blank line above </layoutContainer> and paste in that location.) NOTE: If you click the Validate button on the toolbar at this point, you will see that there is a problem with the XML. The button id is duplicated. Each button id must be unique. We will change the button id as well as several other attributes. 7. 8. PayneGroup, Inc. Do the following changes: (a) Change button id to FirmTemplateFromFileNew2. (b) Change label to Legal. (c) Change imageMso to an image name of your choice. (Use the methods you learned in previous modules to determine the image you would like to use.) (d) Change tag to Legal.pptx. The new code should now look something like this (with your imageMso choice). 22 ILTAU 2012 - August 27, 2012 9. Validate the change. Save the file and Exit the Custom UI Editor. 10. Launch PowerPoint. Open FileNewSample.pptm from the list of recent presentations. 11. Click File > New. Under Firm Presentations, try both buttons. 12. Exit PowerPoint. Module 3: Lab 6 – Hide a Built-in Tab in Backstage View In this next section, you will hide the New tab and replace it with a custom New tab that shows only the firm templates. 1. Launch the CustomUI Editor and reopen FileNewSample.pptm located in the ILTA2012 folder. Click Open. 2. To hide the New tab, do the following: Change the line of XML from: to: 3. Press Enter. Add the following line of XML directly below that line: 4. Validate the changes. Save the file and Exit the Custom UI Editor. 5. View your customizations in PowerPoint by reopening FileNewSample.pptm. Click the File tab. Notice that the built-in New tab has been replaced by a custom New tab showing only the firm templates. NOTE: If you did not complete Lab 6 or would like to see another sample of a hidden built-in Tab, open the FileNewSample – Custom Tab.pttm file. PayneGroup, Inc. 23 ILTAU 2012 - August 27, 2012