Customize Your Ribbon, -...

Customize Your Ribbon, Quick Access Toolbar and More…

Presenters:

Eileen Schleicher – VP Development

Kim Rice – Product Manager

August 26, 2009

• Today’s presenters

– Eileen Schleicher, Vice President, Development

– Kim Rice, Product Manager

Plus, providing assistance during the lab

– Michael Reed, Product Manager

Microsystems Staff

Microsystems

• Document Experts

• Ribbon Experts 2007

• Office 2007 optimized

• Office 2010 compliant

• Role-based Ribbon initiators

Audience

• Version of Office?• On or plan to deploy O2007?• Waiting for O2010?

• XML expertise?• Experience with RibbonX?

• IT Management?• Training?

Office and RibbonX Experience

• The Ribbon

– Interface evolution

– Editing tools

– Manipulate MSFT elements

– Add your own elements

• Break …

– Microsystems Ribbon Designer

• Ribbon Advanced

– Complex controls

– Quick Access Toolbar

– Office Button

• Trouble-shooting

• Design: Interface

• Design: Deployment

Agenda

Word 2007 Ribbon Essentials…Looking Back

12 million Office users customize their user interface in some fashion

- Inside Microsoft Office

The Microsoft Office Team - July 9, 2009

• Customizing in 2003

– Interface: Space constraints, navigation could run deep

– Consistency in Office suite: Doesn’t exist

– Technically: Control is challenging

• XML changes in Word began with 2003

• Toolbars last to change; studies needed

“60.3% of respondents say productivity has increased through the use of the Office 2007

Ribbon”- Inside Microsoft Office

The Microsoft Office Team - July 9, 2009

• Customizing in Office 2007– Interface: Cleaner, functional look, supports more controls

– Consistency in Office suite: Mechanism crosses all products

– Technically: More controls, smoother customization

• Training impact, can’t find things

• RibbonX is here to stay

Word 2007 Ribbon Essentials…looking forward

Open XML Formats Architecture

File Container

Document Properties

Comments

WordML

CustomUI

Embedded Code

Images / Video / Sound

Document PartsMost parts are XMLEach part is a discrete componentCan add, extract and modify individual parts without using Office programsCorruption of any part would not prohibit the file from opening

Developer view: modular file

The customUI Element

Children of the Ribbon

Element

Children of the customUI

Element

The Root Element

customUI

ribbon

contextualTabs

officeMenu

qat

tabs

commands

<customUIxmlns="http://schemas.microsoft.com/office/2006/01/customui" >

<commands>

</commands>

<ribbon>

<contextualTabs>

</contextualTabs>

<officeMenu>

</officeMenu>

<qat>

</qat>

<tabs>

</tabs>

</ribbon>

</customUI>

XML Notepad

• Use zip technique to extract a customUI.xml from your document

• Easy-to-read tree view

• Provides IntelliSense and validation against the Office customUI schema

Ribbon Editing Tools

Custom UI Editor

•Provides XML validation

•Callback creation

•No find & replace, no IntelliSense


Package Explorer

• Extracts parts automatically

• View of all document part and their relationships

•Doesn’t check schema or well- formed ness of the doc


Microsystems Ribbon Designer – SDS Admin

• Friendly interface layer – no XML knowledge needed

• Intuitive guidance

• Application solution – beyond templates


Ribbon DesignerMicrosystems

• Handout Materials

– Microsoft 2007 controls

– Elements & attributes

• Your Desktop

– CustomUI Editor

– Word 2007

• Exercises Folder

– Staged template (Ribbon.dotm)

– Supporting VBA code

– Instructions Sample code.txt

– Supporting exercise files – where you start each exercise

Resources for Today’s Lab

Resources for Today’s Lab

Exercise Goal

Glossary of Terms

Overview of Steps

Detailed Work

Review

Getting Started with RibbonXExercises 1 - 3

Objective: Exploring RibbonX

Reusing Word

Controls

New Group & Control

Code Callback

Exercise 1:Reusing Word Controls

Getting Started with RibbonX

UI Customization Layer

• group: An organizational container of controls that appear on a tab

• toggleButton: A button that acts like a check box, alternating between states

XML Attributes

• id: Identifier for custom controls

• label: Text, which is part of the control, that displays in Word

• idMso: Identifier for MSFT built in controls

• insertBeforeMso: Defines the location of new elements, before a Microsoft default element

Glossary of Terms: Exercise 1 Reusing Word Controls

Step 1

• Review a modified Word Ribbon

• Review a native Word Ribbon

Step 2• Examine the structure of the modified

Ribbon under XML

Step 3

• Modify the customUI

• Review the modified Ribbon in Word

Overview:Reusing Word Controls

Step 1

• Double-click on the Ribbon.dotm to launch Word

• Create a new blank document with Ctrl+N

• Observe the FormatPainter is replaced with the Italic button

• Close Word

Step 2

• Open Custom UI Editor

• Open Ribbon.dotm from the Desktop/Exercise 1 Folder

• Observe the GroupClipboard's visible attribute is false

Step 3

•Delete the toggleButton element•Add new controls to the NewGroupClipboard•Explore by changing the labels and imageMsos•Save and relaunch Word – Observe changes

Step-by-Step:Reusing Word Controls

Reusing Word Controls:Ribbon Result

Reusing Word Controls:XML Result

Exercise 2:New Group & Control





• button: A control that when pressed, executes a function

XML Attributes

• image: Defines an element’s visual representation through locally-stored picture files

• imageMso: Defines an element’s visual representation, using Microsoft built-in images

• size: Controls the size of the button, with two values –“normal” and “large”

Glossary of Terms: Exercise 2New Group & Control

Step 1• Create a new group

Step 2• Create a button

Step 3• Insert a graphic to use with the button

Step 4• Add the image name to the button

Overview: Exercise 2New Group and Control

Step 1

• Open Custom UI Editor and open Ribbon.dotm from Desktop/Exercise 2 folder• Create new group element under the TabHome element<group id="customGroup" label="ILTA Options"></group>

Step 2• Create new toggleButton element nested in the group element.

<toggleButton id="customButton" label="Show Developer" size="large"/>

Step 3

• Insert the "Atom_Add.png" into the Ribbon.dotm

• Click on the Insert Icons button on the toolbar in the Custom UI Editor

• The icons viewer will appear on the right of the Custom UI Editor.

Step 4

• Add the image attribute to the toggleButton

• Use the name of icon that appears on the right hand side for the value of the attribute image="Atom_Add"

Step-by-Step:New Group and Control

New Group and Control:Ribbon Result

New Group and Control:XML Result

Exercise 3:Code Callback





• button: A control that when pressed, executes a function

XML Attributes

• onLoad: Performs a specific act during the loading process

• onAction: Runs the action for the control from the specified code (callback)

Other Vocabulary• Callback: Speaks to the

movement process of the given instruction, referring to attributes that run code

Glossary of Terms: Exercise 3 Code Callback

Overview: Exercise 3 Code Callback

Step 1• Reference VBA callback

Step 2• Add onAction to associate code

Step-by-Step:Code Callback

Step 1

• In Word open the Ribbon.dotm from Desktop/Exercise 3 folder

• Launch the VBA Editor using Alt+F11

• Make note of the VBA procedure called Callback

• Close the Ribbon.dotm

Step 2

• Open the Ribbon.dotm in the CustomUI Editor

• Create new onAction attribute on the custom toggleButtoncreated previously

• This will run the callback VBA method in the Ribbon.dotmonAction="Callback“

Code Callback:Ribbon Result

Code Callback:XML Result

• Customizing with RibbonX

– Complex controls

– Quick Access Toolbar

– Office Button

• Troubleshooting

• Design Considerations

– Interface

– Deployment methods

After the Break

Break

See you at 3:27 or

Stay to see the Ribbon Designer

Customizing with RibbonX:Exercises 4 & 5

Create New Tab, Group & Controls

Add tab, group,

splitButton

Add a complex

dynamicMenu

Assign a series of Callbacks


• tab: Highest level of ribbon organization


• splitButton: A button that supports a default action and alternative options

• menu: A fixed list of elements built by design

XML Attributes


• tag: Contains user data that can interact with a control or other element

Glossary of Terms: Exercise 4New Tab and Split Button

Overview: Exercise 4 New Tab and Split Button

Step 1• Create a tab – add attributes

Step 2• Create a group – add attribute

Step 3• Create a splitButton for organization

Overview: Exercise 4 New Split Button

Step 4• Create a button under the splitButton

Step 5• Create a menu under the splitButton

Step 6

• Create buttons for the splitButtonmenu

Overview: Exercise 4 New Tab and Split Button

Step 7• Add onAction attribute to all buttons

Step 8• Add tag attribute to all buttons

Step 9• Optional – create additional buttons

Step-by-Step:New Tab and Split Button

Step 1• Create tab element - Add two attributes: id & label

<tab id="newTab" label="Real Estate">

Step 2• Create group element – Add an attribute: id

<group id="grpDates">

Step 3

• Create splitButton element – no attributes: organizes button & menu <splitButton id="splitButton1" size="large"></splitButton>

Step 4

• Add the button element nested in the splitButton<button id="btnInsertDate" label="Insert Current Date" imageMso="DateAndTimeInsert"/>

Step 5

• Add the menu element nested in the split button<menu id="mnuDates"></menu>

Step 6

• Add two button elements to set the additional actions:<button id="btnInsertDate30" label="30 Days +"/><button id="btnInsertDate60" label="60 Days +"/>

Step-by-Step:New Split Button

Step 7

• Add the onAction attribute to all the button elements

• The onAction callback will call the insertDate method in the VBA of the Ribbon.dotmonAction="insertDate"

Step 8

• Add the tag attribute to all button elements including the splitButton. Each tag holds the # of days to be added to the current date. (Current date, tag="0“).<button id="btnInsertDate30" label="30 Days +" tag="30" onAction="insertDate"/>

Step 9

• If you have time, add more buttons under the menu to insert more dates.

Step-by-Step:New Tab and Split Button

New Tab and Split Button:Ribbon Result

New Tab and Split Button:XML Results

Exercise 5:Add a Complex Dynamic Menu


• splitButton: A button that supports a default action and alternative options

• menu: A fixed list of elements built by design

• dynamicMenu: A list of elements built at run time

XML Attributes


• tag: Contains user data that can interact with a control or other element

• getEnabled: Specifies the state of the control, enabled or disabled

• getContent: Used with the dynamicMenu, defines the list elements of the menu

Glossary of Terms: Exercise 5Dynamic Menu and Get Enabled

Overview: Exercise 5 Dynamic Menu and Get Enabled

Step 1

• Create dynamicMenu for the Date group

Step 2• Add tag attribute to dynamicMenu

Step 3

• Add getContent attribute to dynamicMenu

Overview: Exercise 5 Dynamic Menu and Get Enabled

Step 4• Associate dynamicMenu to callback

Step 5

• Add getEnabled attribute to dynamicMenu

Step 6

• Add a graphic to the Property folder and refresh the dynamicMenu

Step-by-Step:Dynamic Menu and Get Enabled

Step 1

Step 2

Step 3

Step 1

• Add dynamicMenu control to the Dates group (grpDates)<dynamicMenu id="dynamicMenu" label="Properties" imageMso="BlogHomePage" size="large"/>

Step 2

• Add tag attribute to dynamicMenu element. This indicates the name of the folder on the desktop to use for the control.tag="Properties"

Step 3• Add getContent attribute to dynamicMenu element. This will be the Callback

getContent=""

Step-by-Step:Dynamic Menu and Get Enabled

Step 1

Step 2

Step 3

Step 4

• Modify the getContent attribute to call mnu_GetProperty. The getContentCallback will run the mnu_GetProperty VBA routine in the Ribbon.dotm.getContent="mnu_GetProperty"

Step 5

• The getEnabled attribute will disable the control if the folder does not exist or does not contain any files. The getEnabled Callback runs the menu_getEnabledVBA routine in the Ribbon.dotm.getEnabled="menu_getEnabled"

Step 6

• Try moving the REF_2424111.jpg in the Exercise 6 directory to the Properties directory on the Desktop. Use the Refresh button to see if the new Property appears in the list.

Dynamic Menu and Get Enabled:Ribbon Result

Dynamic Menu and Get Enabled:XML Result

Quick Access Toolbar and Office Button:Exercises 6-7

Modifying QAT and Office Button

Adding controls to

QAT

Adding controls to

Office Button

Exercise 6:Adding Controls to the Quick Access Toolbar

Customizing the Quick Access Toolbar and Office Button


• qat: The QAT, located in the top left of Office application, usually user-controlled

• sharedControls: An element of the QAT that can be shared across documents

• documentControls: An element of the QAT that is document specific

XML Attributes

• startFromScratch: An attribute of the ribbon, when set to true, the built-in tabs on the Ribbon are hidden

Glossary of Terms: Exercise 6Adding Controls to the Quick Access Toolbar (QAT)

Overview: Exercise 6Quick Access Toolbar

Step 1• Add the sharedControls child element to the qat

Step 2

• Consider these controls for inclusion to the qatshared controls: button toggleButton

control dropDown

Step 3• Set startFromScratch attribute to true

Step-by-Step:Quick Access Toolbar

Step 1

• Add sharedControl element to the qat:<sharedControls></sharedControls>

Step 2

• Add the control to the sharedControls element<qat><sharedControls>[...your choice of controls...]</sharedControls></qat>

Step 3• Set startFromScratch to true

<ribbon startFromScratch=“true”>

Quick Access Toolbar:Ribbon Result

Quick Access Toolbar:XML Results

Exercise 7:Office Button and Repurposing

Customizing the Quick Access Toolbar and Office Button


• officeMenu: As known as the Office Button, is the orb located at the top left of Office applications

XML Attributes

officeMenu has no attributes!

Glossary of Terms: Exercise 7Office Button and Repurposing

Overview: Exercise 7Office Button and Repurposing

Step 1• Add a control to the Office

Button

Step 2• Try other controls and

placement

Step-by-Step:Office Button and Repurposing

Step 1

• Add the control under the officeMenu element in the Ribbon.dotm.<button idMso="PageSetupDialog" insertBeforeMso="FilePrintMenu"/>

Step 2• Modify placement order and controls included

Office Button and Repurposing:Ribbon Result

Office Button and Repurposing:XML Result

• Word settings – Office Button– Popular > Show Developer tab in Ribbon

– Advanced > Show add-in user interface errors

• Syntax issues– Case sensitive

– Camel case

• Custom controls must be unique, not reused

• Vendor issues– Is customUI exposed

– Code dependent IDs vs. tagging

Troubleshooting: Your Ribbon Development

Design Considerations:Interface Design

• Fit for end-user purpose

• startFromScratch

• Contextual tabs

• Vendor support

– Impact of code practices

– Add-in functionality intuitively-placed vs. on a vendor tab

• Deployment models– COM Add-ins – all controls– Template – document control

• QAT deployment– Office 2007 admin template

• Global options, customize– Disable user customizations of QAT via UI– Disable all user customizations of QAT

• Disabling Word functionality– Group Policy Editor (Policy ID)

• Office 10 impact

Design Considerations:Deployment Methods

Questions

Thank You

Resources

• Package Explorer

– http://tinyurl.com/2yoj3t

• 2007 Office System Add-In: Icons Gallery

– http://tinyurl.com/lcse2l

• 2007 Office Document: Lists of Control IDs

– http://tinyurl.com/kkpyam

• Show Add-in Errors

– http://tinyurl.com/kk9hq6

http://tinyurl.com/2yoj3t

http://tinyurl.com/lcse2l

http://tinyurl.com/kkpyam

http://tinyurl.com/kk9hq6

Resources

• Group Policy Resources– http://tinyurl.com/nk8frl

– http://tinyurl.com/nzxkz3

• Office 2007 Administrative Templates– http://tinyurl.com/3aw43u

• Microsystems– [email protected]

• Microsoft– Inside Microsoft Office (July 2009)

http://tinyurl.com/nk8frl

http://tinyurl.com/nk8frl

http://tinyurl.com/nzxkz3

http://tinyurl.com/3aw43u

mailto:[email protected]

Customize Your Ribbon, -...

Documents

Transcript of Customize Your Ribbon, -...