User Interface Improvements and Extensibility in SharePoint 2010<br />Name<br />Title<br />Company<br />
Agenda<br />Introducing the new User Experience<br />Ribbon<br />Status bar and notifications<br />Dialog Framework<br />S...
Introducing the new User Experience<br />How does it work and what has been changed?<br />
SharePoint 2007 Command Surface<br />Commands EVERYWHERE<br />
SharePoint 2007 user experience<br />Page reloads and navigations<br />Microsoft Confidential<br />
SharePoint 2007 Web Part Interaction<br />Web part interaction is a tradeoff between limited functionality and visual clut...
SharePoint 2007 Page Editing<br />“Page editing forces SharePoint complexities on contributors (e.g., web parts and web pa...
The SharePoint 2010 User Interface<br />
How is it implemented and how can be extend it?<br />Ribbon<br />
The Server Ribbon<br />
Ribbon design<br />Fixed position at top of page – doesn’t scroll out of view<br />Contextual tab model<br />Command previ...
Ribbon controls<br />Out of the Box<br />Not in the Box, but…<br />Button<br />Split button menu<br />Static<br />Stated<b...
Ribbon architecture<br />Asynchronous JavaScript & XML<br />Server or Client rendered<br />On-demand JavaScript<br />CSS l...
Ribbon extensibility<br />Fully extensible<br />Remove any of the OOB controls<br />Add new controls anywhere in the Ribbo...
Adding a Ribbon Control<br />CMDUI.XML<br />Page with the Ribbon<br />On Web Front End<br />Contains OOB site wide Ribbon ...
Example Code to Add a Ribbon Button<br />Where?<br />What?<br />Action<br />
Adding button to oob group<br />With out of the box ribbon groups<br />OOB locations are in CMDUI.XML<br />Ribbon.[Tab].[G...
Multi-Level Targeting<br />Web parts can provide functionalities to Ribbon<br />For example out of the box list views<br />
Adding a Button to the Ribbon<br />demo <br />
How to indicate actions for the end users?<br />Status bar and notifications<br />
Status Bar/Notification Area<br />Gives the user information in context without distracting them<br />Status bar should be...
Status Bar<br />Design:<br />Shown below Ribbon<br />Will display 1 of 4 pre-set background colors depending on importance...
Status API code<br />Different JavaScript API’s available for message manipulation<br />Status APIs:<br />SP.UI.Status.add...
Example<br />Adding and removing messages<br />
Server side handling of status<br />Status messages can be defined also from the code behind <br />using Microsoft.SharePo...
Notifications Area<br />Design:<br />Appears on the right side of the page underneath the Ribbon<br />By default message w...
APIs and example<br />Notification APIs:<br />SP.UI.Notify.addNotification(strHtml, bSticky, tooltip,                     ...
Status Bar and Notification Area<br />demo <br />
How to utilize the dialog framework?<br />Dialog framework<br />
Dialog PlatformKeep the User in Context<br />Reloading page<br />V3 UI<br />
Dialog PlatformKeep the User in Context<br />V4 UI<br />
Dialog Framework design<br />Reduce page transitions/keep user in context<br />Contents load in an iframe inside a floatin...
Dialog Framework extensibility<br />JavaScript API to control dialogs<br />Contents can be a page (URL) or DOMElement<br /...
Example Dialog Code<br />We can start the dialog with different options and also get return values from the dialog:<br />
Call back from client side<br />We can transfer return values back to caller and indicate the user behavior<br />
Call back from server side<br />We can process code in the dialog and return the user back to primary window by adding fol...
Dialog Framework<br />demo<br />
How the page model is evolving? <br />Sites as Collections of Pages<br />
sites are collections of pages<br />
Pages Everywhere<br />1<br />Every team site has a pages library<br />Create a new page with a single click<br />Just ente...
Edit Like in Word<br />Single click editing experience<br />Transition to edit is quick and seamless<br />Type into page a...
Safe and simple editing<br />EditStop Editing – no prompts<br />Whoops Protection<br />Rich Text Editor has undo stack<br ...
Master Pages<br />
Branded Application Pages<br />Application pages are using system master page<br />Uses new tags dynamically associate sys...
Master page development<br />SharePoint 2010 uses superset of place holders from 2007<br />There’s few new place holders a...
Multi-Lingual Interface<br />Display one site in multiple languages<br />Language Pack based<br />Default language set dur...
Standards Compliancy<br />Standards-based rendering using XHTML<br />No quirks mode<br />Cross-Browser<br />Tier 1 support...
Simple.master usage and application page branding<br />demo<br />
How to change the user interface look and feel using themes<br />Themes<br />
Theming engine<br />Uses *.thmx file format – can be generated by client Office programs<br />Parses CSS for comment-style...
How The Theming Engine Works?<br />ThemeWeb.aspx<br />Style Library<br />XML<br />CSS<br />PNG<br />CSS<br />PNG<br />Auto...
 2 Fonts</li></ul>NEW<br />NEW<br />NEW<br />User Clicks Apply<br />Located on file system or in database in themable loca...
Example Theming Markup<br />/* [ReplaceColor(themeColor:"Light1")] */<br />background-color:#fff;<br />/* [ReplaceColor(th...
Deployment and activation<br />Feature xml and code to activate theme automatically<br />
Theming<br />demo <br />
Summary<br />Introducing the new User Experience<br />Ribbon<br />Status bar and notifications<br />Dialog Framework<br />...
Upcoming SlideShare
Loading in...5
×

Share point 2010-uiimprovements

867

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
867
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Share point 2010-uiimprovements"

  1. 1.
  2. 2. User Interface Improvements and Extensibility in SharePoint 2010<br />Name<br />Title<br />Company<br />
  3. 3. Agenda<br />Introducing the new User Experience<br />Ribbon<br />Status bar and notifications<br />Dialog Framework<br />Sites as Collections of Pages<br />Themes<br />
  4. 4. Introducing the new User Experience<br />How does it work and what has been changed?<br />
  5. 5. SharePoint 2007 Command Surface<br />Commands EVERYWHERE<br />
  6. 6. SharePoint 2007 user experience<br />Page reloads and navigations<br />Microsoft Confidential<br />
  7. 7. SharePoint 2007 Web Part Interaction<br />Web part interaction is a tradeoff between limited functionality and visual clutter (summary versus full toolbar).<br />
  8. 8. SharePoint 2007 Page Editing<br />“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.”<br />
  9. 9. The SharePoint 2010 User Interface<br />
  10. 10. How is it implemented and how can be extend it?<br />Ribbon<br />
  11. 11. The Server Ribbon<br />
  12. 12. Ribbon design<br />Fixed position at top of page – doesn’t scroll out of view<br />Contextual tab model<br />Command preview (e.g., Font Size)<br />Dynamic scaling/layout of commands<br />Super tool tips<br />
  13. 13. Ribbon controls<br />Out of the Box<br />Not in the Box, but…<br />Button<br />Split button menu<br />Static<br />Stated<br />Drop down & Flyout menus<br />Customizable<br />Hierarchical<br />Checkbox<br />ToggleButton<br />Label<br />Textbox<br />Combo box<br />Spinner<br />Table control<br />Color picker<br />In-Ribbon gallery control<br />Drop down grids can give same functionality<br />Can also “fake” it with buttons in the Ribbon<br />
  14. 14. Ribbon architecture<br />Asynchronous JavaScript & XML<br />Server or Client rendered<br />On-demand JavaScript<br />CSS layout, styling, and hover effects<br />No tables<br />Clustered images reduce round trips to server<br />
  15. 15. Ribbon extensibility<br />Fully extensible<br />Remove any of the OOB controls<br />Add new controls anywhere in the Ribbon<br />Potential to replace the Ribbon entirely<br />Backwards compatible<br />Custom Actions added to Toolbars in v3 will automatically show up in the “Custom Commands” tab in the Ribbon<br />Adding a control to the Ribbon:<br />Ribbon XML defines the UI of the control<br />Simple behavior can be defined declaratively alongside Ribbon XML, more complicated behavior requires a JavaScript Page Component<br />
  16. 16. Adding a Ribbon Control<br />CMDUI.XML<br />Page with the Ribbon<br />On Web Front End<br />Contains OOB site wide Ribbon Implementation<br />Page Component<br />JavaScript<br />Handles control<br />Custom Action<br /><CustomAction <br /> Location = (somewhere in Ribbon)<br /> Scope = (Farm to Web)<br /> <CommandUIExtension><br /> <CommandUIDefinitions /><br /> <CommandUIHandlers /><br /> </CommandUIExtension><br /></CustomAction><br />Merged into CMDUI<br />IF present, added to page to handle command <br />ELSEPage Component must be added separately<br />
  17. 17. Example Code to Add a Ribbon Button<br />Where?<br />What?<br />Action<br />
  18. 18. Adding button to oob group<br />With out of the box ribbon groups<br />OOB locations are in CMDUI.XML<br />Ribbon.[Tab].[Group].Controls._children<br />Defined in Location attribute<br />Example location for add<br />Ribbon.Documents.Manage.Controls._children<br />
  19. 19. Multi-Level Targeting<br />Web parts can provide functionalities to Ribbon<br />For example out of the box list views<br />
  20. 20. Adding a Button to the Ribbon<br />demo <br />
  21. 21. How to indicate actions for the end users?<br />Status bar and notifications<br />
  22. 22. Status Bar/Notification Area<br />Gives the user information in context without distracting them<br />Status bar should be used to display persistent information such as page status or version<br />Notifications is used for transient or semi-transient messages<br />Status Bar<br />Notification<br />
  23. 23. Status Bar<br />Design:<br />Shown below Ribbon<br />Will display 1 of 4 pre-set background colors depending on importance<br />Priority – Red, Yellow, Green, Blue<br />Extensibility<br />JavaScript API to add/remove messages and specify message color<br />Server API for statuses set at page render time<br />Message is HTML and can include links and images<br />When multiple message colors are specified, bar will take the most “important” color<br />
  24. 24. Status API code<br />Different JavaScript API’s available for message manipulation<br />Status APIs:<br />SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)<br />SP.UI.Status.updateStatus(sid, strHtml)<br />SP.UI.Status.removeStatus(sid)<br />SP.UI.Status.removeAllStatus(hide)<br />SP.UI.Status.setStatusPriColor(sid, strColor)<br />SP.UI.Status.appendStatus(string StatusID, string Title, string Msg)<br />
  25. 25. Example<br />Adding and removing messages<br />
  26. 26. Server side handling of status<br />Status messages can be defined also from the code behind <br />using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol<br />
  27. 27. Notifications Area<br />Design:<br />Appears on the right side of the page underneath the Ribbon<br />By default message will last 5 seconds<br />Extensibility<br />JavaScript API to add/remove messages<br />Message is HTML and can include links/icons<br />Optional “sticky” parameter can be set if caller wishes to manually remove the message<br />
  28. 28. APIs and example<br />Notification APIs:<br />SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)<br />SP.UI.Notify.removeNotification(id)<br />
  29. 29. Status Bar and Notification Area<br />demo <br />
  30. 30. How to utilize the dialog framework?<br />Dialog framework<br />
  31. 31. Dialog PlatformKeep the User in Context<br />Reloading page<br />V3 UI<br />
  32. 32. Dialog PlatformKeep the User in Context<br />V4 UI<br />
  33. 33. Dialog Framework design<br />Reduce page transitions/keep user in context<br />Contents load in an iframe inside a floating div<br />Dialogs are modal<br />Allow dragging within browser window<br />Can be maximized to size of browser window<br />
  34. 34. Dialog Framework extensibility<br />JavaScript API to control dialogs<br />Contents can be a page (URL) or DOMElement<br />Optional parameters to set title, width, height, whether or not to launch maximized, etc.<br />“Autosizing” applied if height or width is not given<br />Design a page once to display both inside a dialog and as a full page<br />CSS class “s4-notdlg” can be used to hide UI when a page is shown within a dialog<br />
  35. 35. Example Dialog Code<br />We can start the dialog with different options and also get return values from the dialog:<br />
  36. 36. Call back from client side<br />We can transfer return values back to caller and indicate the user behavior<br />
  37. 37. Call back from server side<br />We can process code in the dialog and return the user back to primary window by adding following after code has been executed:<br />
  38. 38. Dialog Framework<br />demo<br />
  39. 39. How the page model is evolving? <br />Sites as Collections of Pages<br />
  40. 40. sites are collections of pages<br />
  41. 41. Pages Everywhere<br />1<br />Every team site has a pages library<br />Create a new page with a single click<br />Just enter a name<br />Ready to go<br />[[Wiki Linking]] to <br />Pages<br />Lists<br />Items<br />Documents<br />2<br />3<br />
  42. 42. Edit Like in Word<br />Single click editing experience<br />Transition to edit is quick and seamless<br />Type into page and format text like in Word<br />Full set of rich text controls for formatting and layout<br />Streamlined insert experience for images, links<br />Asset library<br />
  43. 43. Safe and simple editing<br />EditStop Editing – no prompts<br />Whoops Protection<br />Rich Text Editor has undo stack<br />Versioning turning on, in case you want to revert<br />
  44. 44. Master Pages<br />
  45. 45. Branded Application Pages<br />Application pages are using system master page<br />Uses new tags dynamically associate system master page (either custom or system)<br />Applies also to custom application pages<br />
  46. 46. Master page development<br />SharePoint 2010 uses superset of place holders from 2007<br />There’s few new place holders added<br />Biggest change on markup is the existance of Ribbon<br />No need for page editing tool bar etc.<br />
  47. 47. Multi-Lingual Interface<br />Display one site in multiple languages<br />Language Pack based<br />Default language set during provisioning<br />Alternative language set by end-user<br />OM Support<br />Obviously does not translate the actual content<br />
  48. 48. Standards Compliancy<br />Standards-based rendering using XHTML<br />No quirks mode<br />Cross-Browser<br />Tier 1 support: IE, Firefox<br />Tier 2 support: Safari<br />WCAG 2.0 AA<br />New Rich Text Editor supporting XHTML.<br />
  49. 49. Simple.master usage and application page branding<br />demo<br />
  50. 50. How to change the user interface look and feel using themes<br />Themes<br />
  51. 51. Theming engine<br />Uses *.thmx file format – can be generated by client Office programs<br />Parses CSS for comment-style markup, replaces colors/fonts and recolors images as directed<br />Automatically generates new CSS for each theme when it is applied<br />Automatically populates theme list from Theme Gallery files<br />Can be easily deployed also using feature<br />
  52. 52. How The Theming Engine Works?<br />ThemeWeb.aspx<br />Style Library<br />XML<br />CSS<br />PNG<br />CSS<br />PNG<br />Automatically Populates<br />THMX File<br /><ul><li> 12 Colors
  53. 53. 2 Fonts</li></ul>NEW<br />NEW<br />NEW<br />User Clicks Apply<br />Located on file system or in database in themable locations – includes 3rd party CSS in same locations<br />Colors and fonts in originals are replaced by those specified in the THMX per annotation in CSS files<br />Annotated CSS File<br />NEWCSS File<br />
  54. 54. Example Theming Markup<br />/* [ReplaceColor(themeColor:"Light1")] */<br />background-color:#fff;<br />/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */ border:1px solid #f1f1f2;<br />/* [RecolorImage(themeColor:"Accent6",method:"Tinting")] */ background-image:url("/_layouts/images/selectednav.gif");<br />/* [RecolorImage(themeColor:"Accent6-Darker",method:"Tinting", includeRectangle:{x:0,y:322,width:1,height:22})] */ background:url("/_layouts/images/bgximg.png");<br />
  55. 55. Deployment and activation<br />Feature xml and code to activate theme automatically<br />
  56. 56. Theming<br />demo <br />
  57. 57. Summary<br />Introducing the new User Experience<br />Ribbon<br />Status bar and notifications<br />Dialog Framework<br />Sites as Collections of Pages<br />Themes<br />
  58. 58.
  59. 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.<br />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.<br />

×