deep dive on sharepoint ribbon development and extensibility chris o’brien sharepoint mvp...
TRANSCRIPT
Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’BrienSharePoint MVPIndependent
OSP433
Independent SharePoint consultant
Blog: www.sharepointnutsandbolts.com
Twitter: @ChrisO_Brien
Book: Real World SharePoint 2010 (20 MVPs)
LinkedIn: http://uk.linkedin.com/in/chrisobrienmvp
Introduction
Ribbon architectureCustomizing the ribbonRibbon commands
Command UI HandlerPage Component
Sandbox considerationsAdvanced ribbon controlsRibbon development tips & tricks
Agenda
Powered by XML and JavaScriptXML defines visual componentsJavaScript for logic – commands, disabling etc.Create a Feature to put customization in the ribbon
Actions implemented using commandsCommand name specified in XMLJavaScript ‘listens’ for command
Standard ribbon mainly defined in CMDUI.xml file:{SharePoint Root}\TEMPLATE\GLOBAL\XML\
CMDUI.xml
Ribbon Architecture How Does it Work?
Ribbon User Experience / UI
tab
ribbon
group{template}
control
contextual tab group
contextual tab
Ribbon.Read Ribbon.BDCAdmin Ribbon.DocLibListFormEdit Ribbon.ListForm.Display Ribbon.ListForm.Edit Ribbon.PostListForm.Edit Ribbon.SvcApp Ribbon.Solution
Ribbon Architecture Key ribbon locations
Ribbon.UsageReport Ribbon.WikiPageTab Ribbon.PublishTab Ribbon.WebPartPage Ribbon.WebApp Ribbon.SiteCollections Ribbon.CustomCommands
demo
Chris O’BrienSharePoint MVPIndependent
Customizing the SharePoint Ribbon
Do not remove OOTB controls from the RibbonBad user experience & inconsistent from rest of SharePoint
Group templates: *ALWAYS* create your ownCopy-paste instead of reusing those included with SharePoint
Provide multiple layouts & scaling options for best UX
Be selective - only add customizations to pages that need it
Do *NOT* modify ribbon controls with jQuery
Ribbon UI Best Practices
Ribbon Command: a named object that performs an actionEach user interface (UI) control assigned a commandSimilar to XAML command frameworkAllows a loose coupling of logic with UI componentsCommands have three characteristics:
Name: easy way to associate with a controlExecute: what they doCanExecute: logic defining when it is available
Example: Paste in Microsoft Office Word
Ribbon Commands
Define command declaratively within the Feature
Defined with XML
Execute & CanExecute portions defined with JavaScript
Option 1 - Command UI Handler
Command UI Handler – code sample
<CommandUIHandlers><CommandUIHandler Command="MyCommandName"
CommandAction="javascript:doSomething();" EnabledScript="javascript:checkSomething();"
/></CommandUIHandlers>
Define command entirely in a JavaScript objectResides in custom JavaScript file (*.js)No XML components
JS object provides certain functionsinit, canHandleCommand, handleCommand
Option 2 - Page Component
Page component – code sample
canHandleCommand: function myCheckFunction (commandID) {
return (commandID === "MyCommand") ? true : false;},handleCommand: function myHandleFunction (commandID, properties, sequence) {
if (commandID === "MyCommand") {// do stuff here..
}}
Advantages
• Easy to create• Easy to manage • Great for simple
commands
Disadvantages
• If complex, hard to manage
• Lots of JavaScript can be hard to manage
• Not cached on the client• Not reusable outside of
the definition
Command Handler Analyzed
Advantages
• External JS library• Easier to manage & debug• Can be minified• Allows for greater control
over commands• Enable/disable command• Block loss of focus
• Reusable across customizations
Disadvantages
• Poor JavaScript dev tools• Must be added to the page• More work (build, register &
initialize on page)• All OO JavaScript
Page Component Analyzed
Global Commands
• Always available when on a page
• (if CanExecute says it is available)
Focused Command
• Only available at specific times, e.g. when web part has focus
• Example: Content Editor Web Part controls
Global vs. Focused Commands
Used when page has multiple web parts (e.g.) of same type
Which one does pressing your ribbon button refer to?
demo
Chris O’BrienSharePoint MVPIndependent
Ribbon commands
Command UI HandlerGood for very small commandsGood for isolated commands (one-time use)
Page Component Ideal for complex commandsIdeal for performance considerations with page weightEasier to debug
Ribbon Command Best Practices
Most advanced ribbon customizations work well in sandbox
Typically only 2 changes required:Files provisioned in a Module must be published in code (draft by default)Page components must be initialized via CustomAction/ScriptOnDemand
Exception: Contextual tab - SPRibbon[.MakeTabAvailable] not in sandbox
Sandbox Considerations
SplitButton• Easy default
plus sub-menu
ToggleButton• Off or on
Spinner• Select within a
range
Going Beyond Buttons
‘Menu’ selection controls:DropDown, SplitButton, FlyoutAnchor etc.
Two presentation options:ControlsGallery (provide InnerHTML or image) – powerful!
Two data options:Declarative - static XMLImperative/dynamic (e.g. from SP list) - build XML in JavaScript
Going Beyond Buttons
demo
Chris O’BrienSharePoint MVPIndependent
Advanced ribbon customizations
Although share same XML schema, beware differences:
Do NOT specify TemplateAlias for controls in menu controls. Do NOT specify DisplayMode on MenuSectionDo NOT specify Image16x16/Image32x32 on Button controls in DropDowns
Unlike Buttons, DO specify same Command for all DropDown/menu items
Menus *require* page component - object passed to handleCommand used to determine selected item
Menu Control Gotchas
Search in CMDUI.xml (and others) for examplesIdentify associated JavaScript/page component
Find command names and search in {SharePointRoot} files (.js)
To see execution:Ensure app in debug mode (so that non-minified JS files used)
<compilation debug="true">
Add breakpoint in JavaScript debugger, then step-through Note the properties of JavaScript objects passed to handleCommand
Working with a new control - cheatsheet
Code you need to know
Server side:
SPRibbon.MakeTabAvailable For contextual tab
SPList.UserCustomActions Target an individual list
JavaScript:
RefreshCommandUI() Refresh ribbon, e.g. in async callback
SP.SOD.ExecuteOrDelayUntilScriptLoaded()
Deal with JS dependencies
Avoiding Cached JS & CSS:Development: aggressively clear client & server cacheDeployment: May need to reference files with QS param to avoid end-user browser caching e.g: …/MyScript.js?Rev=2012.06.13
Find your favorite JavaScript debugging tool – you’ll need it
CKS:Dev contextual tab project item – great sample
Chris’ Tips & Tricks
Resources
Chris O’Brien : ribbon samples - http://bit.ly/utr2g8(adding a tab/group/button, cool controls [SplitButton, ToggleButton, Spinner], static/dynamic FlyoutAnchor samples)
Andrew Connell : ribbon samples - http://bit.ly/uVKABO (contextual tabs, commands explained, async processing, dialogs)
Ribbon Architecture Customizing the Ribbon Ribbon Commands
Command UI Handler Page Component
Sandbox Considerations Advanced Ribbon Controls Ribbon Development Tips & Tricks
Summary
Related Content
Session OSP337 - Branding and Customizing My Sites with Microsoft SharePoint Server 2010
Exam – 70-576 PRO: Designing and Developing Microsoft SharePoint 2010 Applications
Find Me Later At – TLC 10am Thursday
The Business Collaboration Platform for the Enterprise & the Internet
The capabilities of SharePoint 2010 provide a powerful business collaboration platform
Deliver the Best Productivity Experience
Cut Costs with a Unified Infrastructure
Rapidly Respond to Business Needs
The Business Collaboration Platform for the Enterprise and the Internet
Manage Resources Improve efficiency and save money by better managing work and allocation of resources
Maximize Portfolio Returns Make informed investment decisions and effectively communicate results across a portfolio of projects
Keep Teams Productive Save time and improve project results by centralizing team collaboration on deliverables and tasks
Improve SharePoint ROI Effectively manage requests to maximize the ROI of your SharePoint environmentwww.sharepoint.microsoft.com
www.microsoft.com/project
Project and SharePoint Better Together
Resources
Connect. Share. Discuss.
http://northamerica.msteched.com
Learning
Microsoft Certification & Training Resources
www.microsoft.com/learning
TechNet
Resources for IT Professionals
http://microsoft.com/technet
Resources for Developers
http://microsoft.com/msdn
Complete an evaluation on CommNet and enter to win!
Please Complete an Evaluation Your feedback is important!
Multipleways to Evaluate Sessions
Scan the Tagto evaluate thissession now on myTechEd Mobile
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.