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

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

Transcript of Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’Brien SharePoint MVP...

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

Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’BrienSharePoint MVPIndependent

OSP433

Page 2: Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’Brien SharePoint MVP Independent 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

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

Ribbon architectureCustomizing the ribbonRibbon commands

Command UI HandlerPage Component

Sandbox considerationsAdvanced ribbon controlsRibbon development tips & tricks

Agenda

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

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?

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

Ribbon User Experience / UI

tab

ribbon

group{template}

control

contextual tab group

contextual tab

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

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

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

demo

Chris O’BrienSharePoint MVPIndependent

Customizing the SharePoint Ribbon

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

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

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

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

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

Define command declaratively within the Feature

Defined with XML

Execute & CanExecute portions defined with JavaScript

Option 1 - Command UI Handler

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

Command UI Handler – code sample

<CommandUIHandlers><CommandUIHandler Command="MyCommandName"

CommandAction="javascript:doSomething();" EnabledScript="javascript:checkSomething();"

/></CommandUIHandlers>

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

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 13: Deep Dive on SharePoint Ribbon Development and Extensibility Chris O’Brien SharePoint MVP Independent OSP433.

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

}}

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

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

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

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

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

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?

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

demo

Chris O’BrienSharePoint MVPIndependent

Ribbon commands

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

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

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

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

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

SplitButton• Easy default

plus sub-menu

ToggleButton• Off or on

Spinner• Select within a

range

Going Beyond Buttons

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

‘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

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

demo

Chris O’BrienSharePoint MVPIndependent

Advanced ribbon customizations

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

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

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

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

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

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

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

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

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

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)

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

Ribbon Architecture Customizing the Ribbon Ribbon Commands

Command UI Handler Page Component

Sandbox Considerations Advanced Ribbon Controls Ribbon Development Tips & Tricks

Summary

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

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

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

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

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

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

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

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

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

Complete an evaluation on CommNet and enter to win!

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

Please Complete an Evaluation Your feedback is important!

Multipleways to Evaluate Sessions

Scan the Tagto evaluate thissession now on myTechEd Mobile

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

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

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