Share point 2010-uiimprovements
0 likes1,096 views
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.
![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/85/Share-point-2010-uiimprovements-18-320.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/85/Share-point-2010-uiimprovements-41-320.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/85/Share-point-2010-uiimprovements-54-320.jpg)
Share point 2010-uiimprovements
- 2. User Interface Improvements and Extensibility in SharePoint 2010NameTitleCompany
- 3. AgendaIntroducing the new User ExperienceRibbonStatus bar and notificationsDialog FrameworkSites as Collections of PagesThemes
- 4. Introducing the new User ExperienceHow does it work and what has been changed?
- 5. SharePoint 2007 Command SurfaceCommands EVERYWHERE
- 6. SharePoint 2007 user experiencePage reloads and navigationsMicrosoft Confidential
- 7. SharePoint 2007 Web Part InteractionWeb part interaction is a tradeoff between limited functionality and visual clutter (summary versus full toolbar).
- 8. SharePoint 2007 Page Editing“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 2010 User Interface
- 10. How is it implemented and how can be extend it?Ribbon
- 12. Ribbon designFixed position at 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 of the 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 extensibleRemove any 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 Ribbon ControlCMDUI.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 to Add a Ribbon ButtonWhere?What?Action
- 18. 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
- 19. Multi-Level TargetingWeb parts can provide functionalities to RibbonFor example out of the box list views
- 20. Adding a Button to the Ribbondemo
- 21. How to indicate actions for the end users?Status bar and notifications
- 22. Status Bar/Notification AreaGives the 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 below RibbonWill 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 codeDifferent JavaScript 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 removing messages
- 26. Server side handling of statusStatus messages can be defined also from the code behind using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol
- 27. Notifications AreaDesign:Appears on the 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 exampleNotification APIs:SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)SP.UI.Notify.removeNotification(id)
- 29. Status Bar and Notification Areademo
- 30. How to utilize the dialog framework?Dialog framework
- 31. Dialog PlatformKeep the User in ContextReloading pageV3 UI
- 32. Dialog PlatformKeep the User in ContextV4 UI
- 33. Dialog Framework designReduce page 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 extensibilityJavaScript API 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 CodeWe can start the dialog with different options and also get return values from the dialog:
- 36. Call back from client sideWe can transfer return values back to caller and indicate the user behavior
- 37. Call back from server sideWe can process code in the dialog and return the user back to primary window by adding following after code has been executed:
- 39. How the page model is evolving? Sites as Collections of Pages
- 40. sites are collections of pages
- 41. Pages Everywhere1Every team site has a pages libraryCreate a new page with a single clickJust enter a nameReady to go[[Wiki Linking]] to PagesListsItemsDocuments23
- 42. Edit Like in WordSingle 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 simple editingEdit\Stop Editing – no promptsWhoops ProtectionRich Text Editor has undo stackVersioning turning on, in case you want to revert
- 44. Master Pages
- 45. Branded Application PagesApplication pages 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 developmentSharePoint 2010 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 one site 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 rendering using XHTMLNo quirks modeCross-BrowserTier 1 support: IE, FirefoxTier 2 support: SafariWCAG 2.0 AANew Rich Text Editor supporting XHTML.
- 49. Simple.master usage and application page brandingdemo
- 50. How to change the user interface look and feel using themesThemes
- 51. Theming engineUses *.thmx file 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 Theming Engine Works?ThemeWeb.aspxStyle LibraryXMLCSSPNGCSSPNGAutomatically PopulatesTHMX File 12 Colors
- 53. 2 FontsNEWNEWNEWUser Clicks 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 activationFeature xml and code to activate theme automatically
- 56. Themingdemo
- 57. SummaryIntroducing the new User ExperienceRibbonStatus bar and notificationsDialog FrameworkSites as Collections of PagesThemes
- 59. © 2010 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.