1 / 20

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

ishana
Download Presentation

HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. 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)

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

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

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

  7. Implementing HTML5 in SharePoint 2010 demo

  8. Fluent UI – Server Ribbon • SP.UI • CommandAction

  9. Fluent UI - Dialogs • SP.UI.ModalDialog

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

  11. HTML and the Fluent UI in SharePoint 2010 demo

  12. 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)

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

  14. 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

  15. 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

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

  17. 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

  18. Complete an evaluation on CommNet and enter to win!

More Related