HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development

OSP303 HTML, jQuery, and JavaScript in Microsoft SharePoint 2010 Development Joe Homnick MCT HSI Knowledge http://bit.ly/sphtml

Overview • HTML and JavaScript in SharePoint 2010 • HTML/JavaScript and the Fluent User Interface • Binding data with the JavaScript Object Model, Odata and JavaScript/jQuery

What Do We Mean By HTML? • HTML Element markup language (.html) • Javascript programming language • jQuery and other libraries housed in .JS files • Cascading Style Sheets (.css)

HTML5 – What’s New? A lot! • <HTML> • <CANVAS> • <VIDEO> • <INPUT> • <AUDIO> • <COMMAND> • <DATALIST> • <TIME>

HTML 5 – Getting It Working • <HTML> tag • Internet Explorer 9 compatibility • <meta http-equiv="X-UA-Compatible" content="IE=9"/> • Potential issues and workarounds

JavaScript in SharePoint 2010 • 3 approaches to referencing jQuery and other .JS libraries in SharePoint • Accessing the <body onload=“whatever()”> capability • _spBodyOnLoadFunctionNames.push(“whatever");

Implementing HTML5 in SharePoint 2010 demo

Fluent UI – Server Ribbon • SP.UI • CommandAction

Fluent UI - Dialogs • SP.UI.ModalDialog

Fluent UI Status Bar and Notification Area • SP.UI.Notify • SP.UI.Status Notification Status Bar

HTML and the Fluent UI in SharePoint 2010 demo

Why Client Object Model? • More SharePoint Web services is a major request • Client Object Model provides complete API instead of more services • Provides an abstraction layer to return results as recognizable SharePoint objects • Consistent developer experience across platforms (.NET, JavaScript and Silverlight)

Using the JavaScript Client Object Model Client.svc Server OM JavaScriptControls and Logic Browser JSON Response ECMAScript OM XML Request Contentdatabase Proxy SharePoint Server

Using Odata to Access Lists with HTML • REST and Odata • Representational State Transfer • Odata extends the REST Conent Types • Powered by ADO.NET Data Services • Simple HTTP way of sending a command • GET, PUT, MERGE, DELETE • Lists and Excel have an Odata service • Data can be returned in different ways

Odata Services • Odata for Lists • Requests go to ListData.svc • Request syntax is • /_vti_bin/ListData.svc/{Entity}[({identifier})]/[{Property}] • Example: • /_vit_bin/ListData.svc/Projects(4)/BudgetHours • Get the column called BudgetHours in the item with id “4” in the Projects list

Data Binding with the JavaScript Object Model, Odata and JavaScript/jQuery in SharePoint 2010 demo

Resources • Connect. Share. Discuss. http://northamerica.msteched.com Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers http://microsoft.com/technet http://microsoft.com/msdn

Complete an evaluation on CommNet and enter to win!

HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development