Client Object Model Vs jQuery

1. jQuery Programming
with Visual Web Part
SharePoint 2013 / 2010
SharePoint UG 07/May/2013

2. Agenda
 What is jQuery?
 Why jQuery?
 jQuery Widgets
 Visual Web Parts and jQuery
 Demo
 Deploying jQuery Components with wsp

3. What is jQuery?
 jQuery is a library that makes it quicker and easier to build JavaScript
webpages and web apps
 jQuery is itself written in JavaScript, and comes in the form of a single .js file
that you link to from your webpage
 The jQuery library actually comes in 2 forms:
 The uncompressed .js file is easy to read and modify, but it's around 160kb in size
(at the time of writing).
 The minified .js file has all comments, whitespace, and other unnecessary
characters removed from the file, squeezing the whole library into a mere 23kb.

4. Why jQuery?
 Making XML (Ajax) requests. These use JavaScript to request additional data
from the Web server without having to reload the page.
 Manipulating the DOM. You can easily add, remove, and reorder content in
the Web page using just a couple of lines of code
 Adding animated effects to elements. jQuery lets you easily add effects such
as fading in/out, sliding in/out, and expanding/contracting
 Rich UI animated Controls Available
 jQuery Plugins – Many reusable plugins available which are ready to use.

5. jQuery Widgets
 Accordion
 Autocomplete
 Button
 Datepicker
 Dialog
 Menu
 Progressbar
 Slider
 Spinner
 Tabs
 Tooltip

6. Client Object Model vs. jQuery
 Client Object Model
 Managed Client - Microsoft.SharePoint.Client.dll
 Silverlight - Microsoft.SharePoint.Client.Silverlight.dll
 ECMAScript - SP.js
 jQuery
 spservices http://spservices.codeplex.com/
 jPoint http://jpoint.codeplex.com/discussions/81945
 Raw jQuery http://jquery.com/

7. Client Object Model

8. SharePoint 2013 -
REST(REpresentational State Transfer)
 jQuery Programming against list
 jQuery UI

9. REST
 POST – Create lists and sites
 PUT, PATCH, MERGE for update
Client object model REST equivalent
ClientContext.Web.Lists http://server/site/_api/web/lists
ClientContext.Web.Lists[guid] http://server/site/_api/web/lists(‘guid’)
ClientContext.Web.Lists.GetByTitle("Title") http://server/site/_api/web/lists/getbytitle(‘Title’)

10. REST Call
Area Access point
Site http://server/site/_api/site
Web http://server/site/_api/web
User Profile http:// server/site/_api/SP.UserProfiles.PeopleManager
Search http:// server/site/_api/search
Publishing http:// server/site/_api/publishing
To access a specific site collection
http://server/site/_api/site
To access a specific site
http://server/site/_api/web
Parameter
http://server/site/_api/web/lists/getByTitle('Announcements')/fields/getByTitle('Description')
http://server/site/_api/web/lists('<guid>')/fields/getById('<guid>')
Alias (both are same)
http://server/site/_api/web/applyWebTemplate("STS#0")
http://server/site/_api/web/applyWebTemplate(title=@template)?@template="STS#0“

11. Sample – Create List

12. Update List

13. jQuery UI Demo
 Accordion Sample