Deep Dive on SharePoint Ribbon Development and Extensibility

1. OSP433 Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’Brien SharePoint MVP Independent

2. Introduction • Independent SharePoint consultant • Blog: www.sharepointnutsandbolts.com • Twitter: @ChrisO_Brien • Book: Real World SharePoint 2010 (20 MVPs) • LinkedIn: http://uk.linkedin.com/in/chrisobrienmvp

3. Agenda • Ribbon architecture • Customizing the ribbon • Ribbon commands • Command UI Handler • Page Component • Sandbox considerations • Advanced ribbon controls • Ribbon development tips & tricks

4. Ribbon Architecture How Does it Work? • Powered by XML and JavaScript • XML defines visual components • JavaScript for logic – commands, disabling etc. • Create a Feature to put customization in the ribbon • Actions implemented using commands • Command name specified in XML • JavaScript ‘listens’ for command • Standard ribbon mainly defined in CMDUI.xml file: {SharePoint Root}\TEMPLATE\GLOBAL\XML\CMDUI.xml

5. Ribbon User Experience / UI contextual tab group tab contextual tab ribbon control • group{template}

6. Ribbon Architecture Key ribbon locations • Ribbon.Read • Ribbon.BDCAdmin • Ribbon.DocLibListFormEdit • Ribbon.ListForm.Display • Ribbon.ListForm.Edit • Ribbon.PostListForm.Edit • Ribbon.SvcApp • Ribbon.Solution • Ribbon.UsageReport • Ribbon.WikiPageTab • Ribbon.PublishTab • Ribbon.WebPartPage • Ribbon.WebApp • Ribbon.SiteCollections • Ribbon.CustomCommands

7. demo Customizing the SharePoint Ribbon Chris O’Brien SharePoint MVP Independent

8. Ribbon UI Best Practices • Do not remove OOTB controls from the Ribbon • Bad user experience & inconsistent from rest of SharePoint • Group templates: *ALWAYS* create your own • Copy-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

9. Ribbon Commands • Ribbon Command: a named object that performs an action • Each user interface (UI) control assigned a command • Similar to XAML command framework • Allows a loose coupling of logic with UI components • Commands have three characteristics: • Name: easy way to associate with a control • Execute: what they do • CanExecute: logic defining when it is available • Example: Paste in Microsoft Office Word

10. Option 1 - Command UI Handler • Define command declaratively within the Feature • Defined with XML • Execute & CanExecute portions defined with JavaScript

11. Command UI Handler – code sample • <CommandUIHandlers> • <CommandUIHandler • Command="MyCommandName"CommandAction="javascript:doSomething();"EnabledScript="javascript:checkSomething();" /> • </CommandUIHandlers>

12. Option 2 - Page Component • Define command entirely in a JavaScript object • Resides in custom JavaScript file (*.js) • No XML components • JS object provides certain functions • init, canHandleCommand, handleCommand

13. 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.. • } • }

14. Command Handler Analyzed

15. Page Component Analyzed

16. 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? 

17. demo Ribbon commands Chris O’Brien SharePoint MVP Independent

18. Ribbon Command Best Practices • Command UI Handler • Good for very small commands • Good for isolated commands (one-time use) • Page Component • Ideal for complex commands • Ideal for performance considerations with page weight • Easier to debug

19. Sandbox Considerations • 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

20. Going Beyond Buttons • SplitButton • Easy default plus sub-menu • ToggleButton • Off or on • Spinner • Select within a range

21. Going Beyond Buttons • ‘Menu’ selection controls: • DropDown, SplitButton, FlyoutAnchor etc. • Two presentation options: • Controls • Gallery (provide InnerHTML or image) – powerful! • Two data options: • Declarative - static XML • Imperative/dynamic (e.g. from SP list) - build XML in JavaScript

22. demo Advanced ribbon customizations Chris O’Brien SharePoint MVP Independent

23. Menu Control Gotchas • Although share same XML schema, beware differences: • Do NOT specify TemplateAlias for controls in menu controls. • Do NOT specify DisplayMode on MenuSection • Do 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

24. Working with a new control - cheatsheet • Search in CMDUI.xml (and others) for examples • Identify 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

25. Code you need to know • Server side: • JavaScript:

26. Chris’ Tips & Tricks • Avoiding Cached JS & CSS: • Development: aggressively clear client & server cache • Deployment: May need to reference files with QS paramto avoid end-user browser caching e.g: …/MyScript.js?Rev=2012.06.13 • Find your favorite JavaScript debugging tool – you’ll need it • CKS:Devcontextual tab project item – great sample

27. 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)

28. Summary • Ribbon Architecture • Customizing the Ribbon • Ribbon Commands • Command UI Handler • Page Component • Sandbox Considerations • Advanced Ribbon Controls • Ribbon Development Tips & Tricks

29. 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

30. The Business Collaboration Platform for the Enterprise and the Internet The Business Collaboration Platform for the Enterprise & the Internet • Deliver the Best Productivity Experience • Cut Costs with a Unified Infrastructure • Rapidly Respond to Business Needs The capabilities of SharePoint 2010 provide a powerful business collaboration platform

31. Project and SharePoint Better Together 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 ProductiveSave 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 environment • www.sharepoint.microsoft.com • www.microsoft.com/project

32. Resources Learning TechNet • Connect. Share. Discuss. • Microsoft Certification & Training Resources http://northamerica.msteched.com www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet http://microsoft.com/msdn

33. Required Slide Complete an evaluation on CommNet and enter to win!

34. Please Complete an Evaluation Your feedback is important! Multipleways to Evaluate Sessions Be eligible to win great daily prizes and the grand prize of a $5,000 Travel Voucher! Scan the Tag to evaluate this session now on myTechEdMobile

35. © 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.