![Adding button to oob groupWith out of the box ribbon groupsOOB locations are in CMDUI.XMLRibbon.[Tab].[Group].Controls._childrenDefined in Location attributeExample location for addRibbon.Documents.Manage.Controls._children](https://image.slidesharecdn.com/sharepoint2010-uiimprovements-110809041734-phpapp01/75/Share-point-2010-uiimprovements-18-2048.jpg)
![Pages Everywhere1Every team site has a pages libraryCreate a new page with a single clickJust enter a nameReady to go[[Wiki Linking]] to PagesListsItemsDocuments23](https://image.slidesharecdn.com/sharepoint2010-uiimprovements-110809041734-phpapp01/75/Share-point-2010-uiimprovements-41-2048.jpg)
![Example Theming Markup/* [ReplaceColor(themeColor:"Light1")] */background-color:#fff;/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */ border:1px solid #f1f1f2;/* [RecolorImage(themeColor:"Accent6",method:"Tinting")] */ background-image:url("/_layouts/images/selectednav.gif");/* [RecolorImage(themeColor:"Accent6-Darker",method:"Tinting", includeRectangle:{x:0,y:322,width:1,height:22})] */ background:url("/_layouts/images/bgximg.png");](https://image.slidesharecdn.com/sharepoint2010-uiimprovements-110809041734-phpapp01/75/Share-point-2010-uiimprovements-54-2048.jpg)
Uploaded byLiquidHub
Share point 2010-uiimprovements
The document discusses new user interface features in SharePoint 2010, including the ribbon interface, status bar, notifications, dialog framework, improved page model, master pages, theming engine, and extensibility of these features. The ribbon replaces the command surfaces of SharePoint 2007 and can be customized. The status bar and notifications provide feedback without page reloads. Dialogs load pages within iframes to reduce page transitions. Sites function as collections of pages. Themes allow changing the look and feel by applying color and font changes defined in theme files.
Share point 2010-uiimprovements
- 2. User Interface Improvementsand Extensibility in SharePoint 2010NameTitleCompany
- 3. AgendaIntroducing the newUser ExperienceRibbonStatus bar and notificationsDialog FrameworkSites as Collections of PagesThemes
- 4. Introducing the newUser ExperienceHow does it work and what has been changed?
- 5. SharePoint 2007 CommandSurfaceCommands EVERYWHERE
- 6. SharePoint 2007 userexperiencePage reloads and navigationsMicrosoft Confidential
- 7. SharePoint 2007 WebPart InteractionWeb part interaction is a tradeoff between limited functionality and visual clutter (summary versus full toolbar).
- 8. SharePoint 2007 PageEditing“Page editing forces SharePoint complexities on contributors (e.g., web parts and web part zones) for even simple tasks like adding text or images to a page.”
- 9. The SharePoint 2010User Interface
- 10. How is itimplemented and how can be extend it?Ribbon
- 11.
- 12. Ribbon designFixed positionat top of page – doesn’t scroll out of viewContextual tab modelCommand preview (e.g., Font Size)Dynamic scaling/layout of commandsSuper tool tips
- 13. Ribbon controlsOut ofthe BoxNot in the Box, but…ButtonSplit button menuStaticStatedDrop down & Flyout menusCustomizableHierarchicalCheckboxToggleButtonLabelTextboxCombo boxSpinnerTable controlColor pickerIn-Ribbon gallery controlDrop down grids can give same functionalityCan also “fake” it with buttons in the Ribbon
- 14. Ribbon architectureAsynchronous JavaScript& XMLServer or Client renderedOn-demand JavaScriptCSS layout, styling, and hover effectsNo tablesClustered images reduce round trips to server
- 15. Ribbon extensibilityFully extensibleRemoveany of the OOB controlsAdd new controls anywhere in the RibbonPotential to replace the Ribbon entirelyBackwards compatibleCustom Actions added to Toolbars in v3 will automatically show up in the “Custom Commands” tab in the RibbonAdding a control to the Ribbon:Ribbon XML defines the UI of the controlSimple behavior can be defined declaratively alongside Ribbon XML, more complicated behavior requires a JavaScript Page Component
- 16. Adding a RibbonControlCMDUI.XMLPage with the RibbonOn Web Front EndContains OOB site wide Ribbon ImplementationPage ComponentJavaScriptHandles controlCustom Action<CustomAction Location = (somewhere in Ribbon) Scope = (Farm to Web) <CommandUIExtension> <CommandUIDefinitions /> <CommandUIHandlers /> </CommandUIExtension></CustomAction>Merged into CMDUIIF present, added to page to handle command ELSEPage Component must be added separately
- 17. Example Code toAdd a Ribbon ButtonWhere?What?Action
- 18. Adding button tooob groupWith out of the box ribbon groupsOOB locations are in CMDUI.XMLRibbon.[Tab].[Group].Controls._childrenDefined in Location attributeExample location for addRibbon.Documents.Manage.Controls._children
- 19. Multi-Level TargetingWeb partscan provide functionalities to RibbonFor example out of the box list views
- 20. Adding a Buttonto the Ribbondemo
- 21. How to indicateactions for the end users?Status bar and notifications
- 22. Status Bar/Notification AreaGivesthe user information in context without distracting themStatus bar should be used to display persistent information such as page status or versionNotifications is used for transient or semi-transient messagesStatus BarNotification
- 23. Status BarDesign:Shown belowRibbonWill display 1 of 4 pre-set background colors depending on importancePriority – Red, Yellow, Green, BlueExtensibilityJavaScript API to add/remove messages and specify message colorServer API for statuses set at page render timeMessage is HTML and can include links and imagesWhen multiple message colors are specified, bar will take the most “important” color
- 24. Status API codeDifferentJavaScript API’s available for message manipulationStatus APIs:SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)SP.UI.Status.updateStatus(sid, strHtml)SP.UI.Status.removeStatus(sid)SP.UI.Status.removeAllStatus(hide)SP.UI.Status.setStatusPriColor(sid, strColor)SP.UI.Status.appendStatus(string StatusID, string Title, string Msg)
- 25. ExampleAdding and removingmessages
- 26. Server side handlingof statusStatus messages can be defined also from the code behind using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol
- 27. Notifications AreaDesign:Appears onthe right side of the page underneath the RibbonBy default message will last 5 secondsExtensibilityJavaScript API to add/remove messagesMessage is HTML and can include links/iconsOptional “sticky” parameter can be set if caller wishes to manually remove the message
- 28. APIs and exampleNotificationAPIs:SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)SP.UI.Notify.removeNotification(id)
- 29. Status Bar andNotification Areademo
- 30. How to utilizethe dialog framework?Dialog framework
- 31. Dialog PlatformKeep theUser in ContextReloading pageV3 UI
- 32. Dialog PlatformKeep theUser in ContextV4 UI
- 33. Dialog Framework designReducepage transitions/keep user in contextContents load in an iframe inside a floating divDialogs are modalAllow dragging within browser windowCan be maximized to size of browser window
- 34. Dialog Framework extensibilityJavaScriptAPI to control dialogsContents can be a page (URL) or DOMElementOptional parameters to set title, width, height, whether or not to launch maximized, etc.“Autosizing” applied if height or width is not givenDesign a page once to display both inside a dialog and as a full pageCSS class “s4-notdlg” can be used to hide UI when a page is shown within a dialog
- 35. Example Dialog CodeWecan start the dialog with different options and also get return values from the dialog:
- 36. Call back fromclient sideWe can transfer return values back to caller and indicate the user behavior
- 37. Call back fromserver sideWe can process code in the dialog and return the user back to primary window by adding following after code has been executed:
- 38.
- 39. How the pagemodel is evolving? Sites as Collections of Pages
- 40. sites are collectionsof pages
- 41. Pages Everywhere1Every teamsite has a pages libraryCreate a new page with a single clickJust enter a nameReady to go[[Wiki Linking]] to PagesListsItemsDocuments23
- 42. Edit Like inWordSingle click editing experienceTransition to edit is quick and seamlessType into page and format text like in WordFull set of rich text controls for formatting and layoutStreamlined insert experience for images, linksAsset library
- 43. Safe and simpleeditingEdit\Stop Editing – no promptsWhoops ProtectionRich Text Editor has undo stackVersioning turning on, in case you want to revert
- 44.
- 45. Branded Application PagesApplicationpages are using system master pageUses new tags dynamically associate system master page (either custom or system)Applies also to custom application pages
- 46. Master page developmentSharePoint2010 uses superset of place holders from 2007There’s few new place holders addedBiggest change on markup is the existance of RibbonNo need for page editing tool bar etc.
- 47. Multi-Lingual InterfaceDisplay onesite in multiple languagesLanguage Pack basedDefault language set during provisioningAlternative language set by end-userOM SupportObviously does not translate the actual content
- 48. Standards CompliancyStandards-based renderingusing XHTMLNo quirks modeCross-BrowserTier 1 support: IE, FirefoxTier 2 support: SafariWCAG 2.0 AANew Rich Text Editor supporting XHTML.
- 49. Simple.master usage andapplication page brandingdemo
- 50. How to changethe user interface look and feel using themesThemes
- 51. Theming engineUses *.thmxfile format – can be generated by client Office programsParses CSS for comment-style markup, replaces colors/fonts and recolors images as directedAutomatically generates new CSS for each theme when it is appliedAutomatically populates theme list from Theme Gallery filesCan be easily deployed also using feature
- 52. How The ThemingEngine Works?ThemeWeb.aspxStyle LibraryXMLCSSPNGCSSPNGAutomatically PopulatesTHMX File 12 Colors
- 53. 2 FontsNEWNEWNEWUserClicks ApplyLocated on file system or in database in themable locations – includes 3rd party CSS in same locationsColors and fonts in originals are replaced by those specified in the THMX per annotation in CSS filesAnnotated CSS FileNEWCSS File
- 54. Example Theming Markup/*[ReplaceColor(themeColor:"Light1")] */background-color:#fff;/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */ border:1px solid #f1f1f2;/* [RecolorImage(themeColor:"Accent6",method:"Tinting")] */ background-image:url("/_layouts/images/selectednav.gif");/* [RecolorImage(themeColor:"Accent6-Darker",method:"Tinting", includeRectangle:{x:0,y:322,width:1,height:22})] */ background:url("/_layouts/images/bgximg.png");
- 55. Deployment and activationFeaturexml and code to activate theme automatically
- 56.
- 57. SummaryIntroducing the newUser ExperienceRibbonStatus bar and notificationsDialog FrameworkSites as Collections of PagesThemes
- 59. © 2010 MicrosoftCorporation. 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.