2. User Interface Improvements and Extensibility in SharePoint 2010 Name Title Company

3. Agenda Introducing the new User Experience Ribbon Status bar and notifications Dialog Framework Sites as Collections of Pages Themes

4. Introducing the new User Experience How does it work and what has been changed?

5. SharePoint 2007 Command Surface Commands EVERYWHERE

6. SharePoint 2007 user experience Page reloads and navigations Microsoft Confidential

7. SharePoint 2007 Web Part Interaction Web 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

11. The Server Ribbon

12. Ribbon design Fixed position at top of page – doesn’t scroll out of view Contextual tab model Command preview (e.g., Font Size) Dynamic scaling/layout of commands Super tool tips

13. Ribbon controls Out of the Box Not in the Box, but… Button Split button menu Static Stated Drop down & Flyout menus Customizable Hierarchical Checkbox ToggleButton Label Textbox Combo box Spinner Table control Color picker In-Ribbon gallery control Drop down grids can give same functionality Can also “fake” it with buttons in the Ribbon

14. Ribbon architecture Asynchronous JavaScript & XML Server or Client rendered On-demand JavaScript CSS layout, styling, and hover effects No tables Clustered images reduce round trips to server

15. Ribbon extensibility Fully extensible Remove any of the OOB controls Add new controls anywhere in the Ribbon Potential to replace the Ribbon entirely Backwards compatible Custom Actions added to Toolbars in v3 will automatically show up in the “Custom Commands” tab in the Ribbon Adding a control to the Ribbon: Ribbon XML defines the UI of the control Simple behavior can be defined declaratively alongside Ribbon XML, more complicated behavior requires a JavaScript Page Component

16. Adding a Ribbon Control CMDUI.XML Page with the Ribbon On Web Front End Contains OOB site wide Ribbon Implementation Page Component JavaScript Handles control Custom Action <CustomAction Location = (somewhere in Ribbon) Scope = (Farm to Web) <CommandUIExtension> <CommandUIDefinitions /> <CommandUIHandlers /> </CommandUIExtension> </CustomAction> Merged into CMDUI IF present, added to page to handle command ELSEPage Component must be added separately

17. Example Code to Add a Ribbon Button Where? What? Action

18. Adding button to oob group With out of the box ribbon groups OOB locations are in CMDUI.XML Ribbon.[Tab].[Group].Controls._children Defined in Location attribute Example location for add Ribbon.Documents.Manage.Controls._children

19. Multi-Level Targeting Web parts can provide functionalities to Ribbon For example out of the box list views

20. Adding a Button to the Ribbon demo

21. How to indicate actions for the end users? Status bar and notifications

22. Status Bar/Notification Area Gives the user information in context without distracting them Status bar should be used to display persistent information such as page status or version Notifications is used for transient or semi-transient messages Status Bar Notification

23. Status Bar Design: Shown below Ribbon Will display 1 of 4 pre-set background colors depending on importance Priority – Red, Yellow, Green, Blue Extensibility JavaScript API to add/remove messages and specify message color Server API for statuses set at page render time Message is HTML and can include links and images When multiple message colors are specified, bar will take the most “important” color

24. Status API code Different JavaScript API’s available for message manipulation Status 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. Example Adding and removing messages

26. Server side handling of status Status messages can be defined also from the code behind using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol

27. Notifications Area Design: Appears on the right side of the page underneath the Ribbon By default message will last 5 seconds Extensibility JavaScript API to add/remove messages Message is HTML and can include links/icons Optional “sticky” parameter can be set if caller wishes to manually remove the message

28. APIs and example Notification APIs: SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler) SP.UI.Notify.removeNotification(id)

29. Status Bar and Notification Area demo

30. How to utilize the dialog framework? Dialog framework

31. Dialog PlatformKeep the User in Context Reloading page V3 UI

32. Dialog PlatformKeep the User in Context V4 UI

33. Dialog Framework design Reduce page transitions/keep user in context Contents load in an iframe inside a floating div Dialogs are modal Allow dragging within browser window Can be maximized to size of browser window

34. Dialog Framework extensibility JavaScript API to control dialogs Contents can be a page (URL) or DOMElement Optional parameters to set title, width, height, whether or not to launch maximized, etc. “Autosizing” applied if height or width is not given Design a page once to display both inside a dialog and as a full page CSS class “s4-notdlg” can be used to hide UI when a page is shown within a dialog

35. Example Dialog Code We can start the dialog with different options and also get return values from the dialog:

36. Call back from client side We can transfer return values back to caller and indicate the user behavior

37. Call back from server side We can process code in the dialog and return the user back to primary window by adding following after code has been executed:

38. Dialog Framework demo

39. How the page model is evolving? Sites as Collections of Pages

40. sites are collections of pages

41. Pages Everywhere 1 Every team site has a pages library Create a new page with a single click Just enter a name Ready to go [[Wiki Linking]] to Pages Lists Items Documents 2 3

42. Edit Like in Word Single click editing experience Transition to edit is quick and seamless Type into page and format text like in Word Full set of rich text controls for formatting and layout Streamlined insert experience for images, links Asset library

43. Safe and simple editing Edittop Editing – no prompts Whoops Protection Rich Text Editor has undo stack Versioning turning on, in case you want to revert

44. Master Pages

45. Branded Application Pages Application pages are using system master page Uses new tags dynamically associate system master page (either custom or system) Applies also to custom application pages

46. Master page development SharePoint 2010 uses superset of place holders from 2007 There’s few new place holders added Biggest change on markup is the existance of Ribbon No need for page editing tool bar etc.

47. Multi-Lingual Interface Display one site in multiple languages Language Pack based Default language set during provisioning Alternative language set by end-user OM Support Obviously does not translate the actual content

48. Standards Compliancy Standards-based rendering using XHTML No quirks mode Cross-Browser Tier 1 support: IE, Firefox Tier 2 support: Safari WCAG 2.0 AA New Rich Text Editor supporting XHTML.

49. Simple.master usage and application page branding demo

50. How to change the user interface look and feel using themes Themes

51. Theming engine Uses *.thmx file format – can be generated by client Office programs Parses CSS for comment-style markup, replaces colors/fonts and recolors images as directed Automatically generates new CSS for each theme when it is applied Automatically populates theme list from Theme Gallery files Can be easily deployed also using feature

53. 2 FontsNEW NEW NEW User Clicks Apply Located on file system or in database in themable locations – includes 3rd party CSS in same locations Colors and fonts in originals are replaced by those specified in the THMX per annotation in CSS files Annotated CSS File NEWCSS 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 activation Feature xml and code to activate theme automatically

56. Theming demo

57. Summary Introducing the new User Experience Ribbon Status bar and notifications Dialog Framework Sites as Collections of Pages Themes

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.