Skip to content

SharePoint 2010 User Interface Extensibility & Improvements

by on August 24, 2010

Primary Changes:

  1. Navigation and commands no longer cause reloads, redirection minimized.
  2. Commands have been centralized and clutter minimized.
  3. Adding content is streamlined, including adding web parts to content.

The Ribbon:

Reflects the Microsoft Office ribbon, so users are familiar with the concept. The ribbon never scrolls out of the users view. Tabs are contextual (depend on what item is selected), commands are dynamically scaled and laid out, super tooltips assist users and can also be used on custom buttons (images, etc.). You can see command previews (like text size changes). Many Controls can be used to provide added commands & functionality to users. Layout & styling is CSS, no tables. Clustered images (sprites) used to reduced requests. Remove/add any controls in XML or create a JavaScript control. Buttons/Controls can be added to groups if you would like (Ex:Ribbon.Documents.ManageControls._children). Backwards compatible with 2007 Custom Actions (server side custom actions not supported). Contextual, multi-level targeting allows web parts to provide functionality to the ribbon.

Status Bar & Notifications:

Show additional messages to end using without interference. Gives information without distractions.

Status Bar – Use to display persistent information, shows below ribbon, 4 preset colors depending on importance (red, yellow, green , blue). JavaScript API specifies color and content. Server API for page render time status. Message is HTML, so can include links, images, icons, etc. With conflicting colors set, the bar will take the most important color level. Can create a “sticky” notification that has to be manually removed in javascript code.

Notification Area – used for transient information

Dialog Framework:

Dialogs are heavily employed to keep user in context of the page, no unnecessary post backs, which used to cause flickering, slow functionality, and common redirection. Dialogs are iframes in floating divs which appear in the center of the page. Dialogs are modal and use returns to page when dialog is closed.Dialogs can be dragged and can be maximized in window. Content can be a URL or a DOMElement (which disappears when dialog is closed). Autosizing is applied. Parameters include; title, width, height, maxmized, etc. CSS class “s4-notdlg” hides UI elements when page is used in a dialog – this allows control and use of a page both as a full page and as dialog content (useful for hiding custom navigation, etc.).

Sites as Collections of Pages:

In SharePoint 2010 the page model has changed. Sites are now a collection of pages, not a collection of lists. Every team site has a pages library. Create a new page easily from the Site Actions menu. Add content without web parts. Use Wiki linking to pages, lists, items, and documents.Click on Edit and you can quickly edit content and insert web parts, images, links, etc. No prompts when using edit/stop edit. Can undo many times in the rich text editor. Versioning is enabled by default to allow you to revert content.

Master Pages:

v4.master – used for team site master, user content pages including lists and content, _layouts pages

minimal.master – used for applications, when you don’t need navigation, don’t have a ribbon, need space (not available in team or publishing sites)

simple.master – used for information and simple pages (login, logout, access, error, confirmation) – page cannot be customized, but individual pages can be replaced

default.master – used to show sites using legacy interface, for backwards compatibility – no ribbon but allows easy upgrade for earlier versions with customization (not completely compatible with extensively edited master pages)

nightandday.master – used as the publishing sites master page

Branding Apps: Application Pages use v4.master page by default – configurable using the system master page setting – uses same master page as list views, etc. Also for custom application pages developed for SharePoint.

Custom Master Pages: There are very few new placeholders in SP 2010 that are not in 2007, 2010 has a superset of placeholders. The ribbon means the page editing toolbar is unnecessary.

Multi-Lingual Interface:

Language Pack – display one site in multiple langurages (including metadata and keywords)

Default Language – set during provisioning, alternative language set by user

Object Model – the SharePoint API supports multiple languages

Content – content is static an cannot be automatically translated

Standards & Compliance:

XHTML standards-based rendering (no quirks mode) & has a rich text editor supporting XHTML

WCAG 2.0 AA Compliance (First published 26 April, 2006, I have not tried running a SP2010 site through yet)

Cross-browser support (Teir 1 support for IE and Firefox, Tier 2 support for Safari)

Theme Changes:

Theming Engine – based on the *.thmx file format – can be generated by any client Office program. replaces colors and fonts and re-colors images as directed. New CSS is automatically generated when theme is applied. Theme list is automatically populated with Theme Gallery files. Can be inherited if the publishing feature has been enabled on the parent site collection. Supposedly, you can even rerender graphics by pixel coordinates, tinting, and gradient rendering. Themes can be previewed in the theme area. Publishing sites use themes more extensively, particularly the fonts, than standard sites. Theme can be programmatically applied to site using code with the SharePoint Theme Framework and can even create a feature to activate theme on an SPSite (collection) or SPWeb (site).

  1. Goutham permalink

    I am a student at Santa Clara University and am trying to work on look and feel in SP 2010. I tried using PowerPoint to work on themes, but I am stuck. I am trying to figure out a way to include background images into themes for SP 2010. Please let me know if anybody has an idea.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: