SharePoint Conference 2011: Developing SharePoint Applications with HTML5 and JQuery

These are my (very) rough notes of a session by Ted Pattison at the SharePoint 2011 Conference in Anaheim.

It was a great session – Ted went into great detail in a short amount of time – and it was very entertaining.

Agenda

• Using JQuery with SP 2010
• HTML5 Fundamentals
• Leveraging HTML5 Features in SP2010
• Adding support for IE8 and IE7

JQuery Fundamentals

JQuery was designed to hide differences between browsers.

Design focuses on 2 primary tasks:

1. Retrieving sets of elements from HTML pages.
2. Performing operations on the elements within a set

Linking to the JQuery library -  link to Microsoft CDN. Or you can add JQuery source to SharePoint environment in _layouts directory or via content DB in site collection. Adding to _layouts is not friendly to sandbox of Office 365

Tip: Use <SharePointScriptLink tag in the content layout

Tip: Create a feature to deploy the library. Deploy as Visual studio solution and deploy the wsp file which contains the JQuery script files and uploads them as a module.

Configure IntelliSense for JQuery

Copy JQuery source files to folder on local machine

Need a way for JQuery code to fire at the right time (when the DOM is available).

DocumentReady Event Handler

JQuery Objects

JQuery object represents a collection of zero or more elements referred to as a “Wrapped Set”. Example:

$(“p”).css({“color”: “#333” });

Most objects are created to cascade (i.e. do a bunch of things at once)

JQuery leverages familiar CSS selector syntax

Demonstrated using Browser debugging tool (which can be used in Office 365) to create new HTML tags dynamically using the DOM

JQuery UI Widgets

Pre-coded UI components based on built-in theming scheme – an extension to the core JQuery library

JQuery UI Widgets:

• Auto-complete
• Date Picker
• Slider, Progress bar
• Tabs
• Accordion
• Dialog

Download themes – which have CSS files you can use to configure the colours and look and feel

Working with Data

JQuery Templates: An additional extension – this is in BETA.

Templating mechanism for replacing XSLT transforms

Provides strategy for converting data collections into HTML

Demo: Creating an HTML Table with JQuery templates and making AJAX Calls with jQuery

Makes it possible to call REST based services

_vti_bin/listdata.svc for any SharePoint list returns a feed in XML format

$.getJSON(requestUrl, null, OnDataReturned);

You can POST using JSON to the SharePoint _vti_bin/listdata.svc list

Edits-  have to view the DOM’s etag to see if another user hasn’t updated the SharePoint list data in the meantime. Use If-Match and pass in a MERGE method

HTML5

SharePoint uses XHTML 1.0 and CSS2.1

HTML 5 allows page elements to degrade gracefully. Adds JavaScript APIs and some new properties

Motivations to move: Want CSS, JavaScript and HTML to work well across all browsers. Want to target mobile devices.

Primary Pain Points: Modern browsers only support portions of HTML. IE does not offer HTML5 tag support until IE8.

New functional elements such as canvas, geolocation, video and data list

CSS3 Changes

Borders can have rounded corners. Colors can be expressed with gradients and opacity. Text can have drop shadows and more control over text wrap. Partial adoption of new properties has been going on for years.

New JavaScript 5 APIs

Not universally supported

Demo of creating a master page supporting HTML 5 – add document type and some new tags.

You still need to keep some special named HTML divs for SharePoint 2010 (for the Ribbon)

Creating an HTML 5 Site

Demo: Creating pages using new HTML 5 features: use the canvas, use SVG graphics

Videos: tip – include multiple sources for video formats because for the moment browsers support different formats

Geolocation: Can get navigator.CurrentPosition to figure out where you are and load a map using JavaScript information

Browser Support Fallback

IE8 and 7 still make up significant amount of user base

Polyfills is a way of providing fallback functionality for older browsers. Supporting older browsers begins with modernizer – Modernizr open source project that helps with this.

Some things you do in HTML5 will not work in IE 7 or 8 no matter what you do.

Added ScriptLink to the Modernizr script. Modernizr allows you to specify via CSS and JavaScript what will happen if the browser does not support one of the items (such as the new Canvas tag).