Embed Size (px)
Citation preview
HTML, jQuery, and JavaScript in Microsoft SharePoint 2010 Development
Joe HomnickMCTHSI Knowledgehttp://bit.ly/sphtml
OSP303
Overview
HTML and JavaScript in SharePoint 2010HTML/JavaScript and the Fluent User InterfaceBinding 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> tagInternet Explorer 9 compatibility
<meta http-equiv="X-UA-Compatible" content="IE=9"/>Potential issues and workarounds
JavaScript in SharePoint 20103 approaches to referencing jQuery and other .JS libraries in SharePoint
Accessing the <body onload=“whatever()”> capability_spBodyOnLoadFunctionNames.push(“whatever");
demo
Implementing HTML5 in SharePoint 2010
Fluent UI – Server Ribbon
SP.UICommandAction
Fluent UI - Dialogs
SP.UI.ModalDialog
Fluent UI Status Bar and Notification Area
SP.UI.NotifySP.UI.Status
Status Bar
Notification
demo
HTML and the Fluent UI in SharePoint 2010
Why Client Object Model?
More SharePoint Web services is a major requestClient Object Model provides complete API instead of more servicesProvides an abstraction layer to return results as recognizable SharePoint objectsConsistent developer experience across platforms (.NET, JavaScript and Silverlight)
ECMAScript OMClient.svc
Using the JavaScript Client Object Model
Server OM
Contentdatabase
Proxy
JavaScriptControls and Logic
XML Request
JSON ResponseBrowser
SharePoint Server
Using Odata to Access Lists with HTML
REST and OdataRepresentational State TransferOdata extends the REST Conent TypesPowered by ADO.NET Data Services
Simple HTTP way of sending a commandGET, PUT, MERGE, DELETE
Lists and Excel have an Odata serviceData can be returned in different ways
Odata Services
Odata for ListsRequests go to ListData.svc
Request syntax is/_vti_bin/ListData.svc/{Entity}[({identifier})]/[{Property}]
Example:/_vit_bin/ListData.svc/Projects(4)/BudgetHoursGet the column called BudgetHours in the item with id “4” in the Projects list
demo
Data Binding with the JavaScript Object Model, Odata and JavaScript/jQuery in SharePoint 2010
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
http://northamerica.msteched.com
Connect. Share. Discuss.
Complete an evaluation on CommNet and enter to win!
Scan the Tag to evaluate this session now on myTech•Ed Mobile
