• Save
Share point 2010-uiimprovements
Upcoming SlideShare
Loading in...5
×
 

Share point 2010-uiimprovements

on

  • 1,005 views

 

Statistics

Views

Total Views
1,005
Views on SlideShare
1,005
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Share point 2010-uiimprovements Share point 2010-uiimprovements Presentation Transcript

  • User Interface Improvements and Extensibility in SharePoint 2010
    Name
    Title
    Company
  • Agenda
    Introducing the new User Experience
    Ribbon
    Status bar and notifications
    Dialog Framework
    Sites as Collections of Pages
    Themes
  • Introducing the new User Experience
    How does it work and what has been changed?
  • SharePoint 2007 Command Surface
    Commands EVERYWHERE
  • SharePoint 2007 user experience
    Page reloads and navigations
    Microsoft Confidential
  • SharePoint 2007 Web Part Interaction
    Web part interaction is a tradeoff between limited functionality and visual clutter (summary versus full toolbar).
  • 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.”
  • The SharePoint 2010 User Interface
  • How is it implemented and how can be extend it?
    Ribbon
  • The Server Ribbon
  • 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
  • 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
  • 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
  • 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
  • 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
  • Example Code to Add a Ribbon Button
    Where?
    What?
    Action
  • 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
  • Multi-Level Targeting
    Web parts can provide functionalities to Ribbon
    For example out of the box list views
  • Adding a Button to the Ribbon
    demo
  • How to indicate actions for the end users?
    Status bar and notifications
  • 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
  • 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
  • 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)
  • Example
    Adding and removing messages
  • Server side handling of status
    Status messages can be defined also from the code behind
    using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol
  • 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
  • APIs and example
    Notification APIs:
    SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)
    SP.UI.Notify.removeNotification(id)
  • Status Bar and Notification Area
    demo
  • How to utilize the dialog framework?
    Dialog framework
  • Dialog PlatformKeep the User in Context
    Reloading page
    V3 UI
  • Dialog PlatformKeep the User in Context
    V4 UI
  • 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
  • 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
  • Example Dialog Code
    We can start the dialog with different options and also get return values from the dialog:
  • Call back from client side
    We can transfer return values back to caller and indicate the user behavior
  • 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:
  • Dialog Framework
    demo
  • How the page model is evolving?
    Sites as Collections of Pages
  • sites are collections of pages
  • 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
  • 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
  • Safe and simple editing
    EditStop Editing – no prompts
    Whoops Protection
    Rich Text Editor has undo stack
    Versioning turning on, in case you want to revert
  • Master Pages
  • 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
  • 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.
  • 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
  • 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.
  • Simple.master usage and application page branding
    demo
  • How to change the user interface look and feel using themes
    Themes
  • 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
  • How The Theming Engine Works?
    ThemeWeb.aspx
    Style Library
    XML
    CSS
    PNG
    CSS
    PNG
    Automatically Populates
    THMX File
    • 12 Colors
    • 2 Fonts
    NEW
    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
  • 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");
  • Deployment and activation
    Feature xml and code to activate theme automatically
  • Theming
    demo
  • Summary
    Introducing the new User Experience
    Ribbon
    Status bar and notifications
    Dialog Framework
    Sites as Collections of Pages
    Themes
  • © 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.