deep dive on sharepoint ribbon development and extensibility n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Deep Dive on SharePoint Ribbon Development and Extensibility PowerPoint Presentation
Download Presentation
Deep Dive on SharePoint Ribbon Development and Extensibility

Loading in 2 Seconds...

play fullscreen
1 / 36

Deep Dive on SharePoint Ribbon Development and Extensibility - PowerPoint PPT Presentation


  • 214 Views
  • Uploaded on

OSP433. Deep Dive on SharePoint Ribbon Development and Extensibility . Chris O’Brien SharePoint MVP Independent. Introduction. Independent SharePoint consultant Blog: www.sharepointnutsandbolts.com Twitter: @ ChrisO_Brien Book: Real World SharePoint 2010 (20 MVPs)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Deep Dive on SharePoint Ribbon Development and Extensibility' - blake


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction
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
agenda
Agenda
  • Ribbon architecture
  • Customizing the ribbon
  • Ribbon commands
    • Command UI Handler
    • Page Component
  • Sandbox considerations
  • Advanced ribbon controls
  • Ribbon development tips & tricks
ribbon architecture how does it work
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

ribbon user experience ui
Ribbon User Experience / UI

contextual tab group

tab

contextual tab

ribbon

control

  • group{template}
ribbon architecture key ribbon locations
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
customizing the sharepoint ribbon
demo

Customizing the SharePoint Ribbon

Chris O’Brien

SharePoint MVP

Independent

ribbon ui best practices
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
ribbon commands
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
option 1 command ui handler
Option 1 - Command UI Handler
  • Define command declaratively within the Feature
  • Defined with XML
  • Execute & CanExecute portions defined with JavaScript
command ui handler code sample
Command UI Handler – code sample
  • <CommandUIHandlers>
  • <CommandUIHandler
  • Command="MyCommandName"CommandAction="javascript:doSomething();"EnabledScript="javascript:checkSomething();" />
  • </CommandUIHandlers>
option 2 page component
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
page component code sample
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..
  • }
  • }
global vs focused commands
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? 
ribbon commands1
demo

Ribbon commands

Chris O’Brien

SharePoint MVP

Independent

ribbon command best practices
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
sandbox considerations
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
going beyond buttons
Going Beyond Buttons
  • SplitButton
    • Easy default plus sub-menu
  • ToggleButton
    • Off or on
  • Spinner
    • Select within a range
going beyond buttons1
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
advanced ribbon customizations
demo

Advanced ribbon customizations

Chris O’Brien

SharePoint MVP

Independent

menu control gotchas
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
working with a new control cheatsheet
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
code you need to know
Code you need to know
  • Server side:
  • JavaScript:
chris tips tricks
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
resources
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)
summary
Summary
  • Ribbon Architecture
  • Customizing the Ribbon
  • Ribbon Commands
    • Command UI Handler
    • Page Component
  • Sandbox Considerations
  • Advanced Ribbon Controls
  • Ribbon Development Tips & Tricks
related content
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

slide30

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

slide31

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

slide33

Required Slide

Complete an evaluation on CommNet and enter to win!

please complete an evaluation your feedback is important
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

slide35

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