{"id":5888,"date":"2013-07-19T17:31:17","date_gmt":"2013-07-19T09:31:17","guid":{"rendered":"http:\/\/www.boostsolutions.com\/blog\/?p=5888"},"modified":"2023-07-31T11:38:50","modified_gmt":"2023-07-31T03:38:50","slug":"introduction-to-sharepoint-2013-javascript-object-model","status":"publish","type":"post","link":"https:\/\/www.boostsolutions.com\/blog\/introduction-to-sharepoint-2013-javascript-object-model\/","title":{"rendered":"Introduction to SharePoint 2013 JavaScript Object Model"},"content":{"rendered":"<p><span style=\"line-height: 1.5;\">SharePoint 2013 Client Object Model is a set of libraries and classes with which you can consume SharePoint data through a specific object model that is a subset of the SharePoint Server Object Model.<\/span><\/p>\n<p>This figure shows the overall architecture of the Client Object Model.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5892\" alt=\"SharePoint2013-JSOM-1\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-1.png\" width=\"664\" height=\"426\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-1.png 664w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-1-300x192.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/p>\n<p>Object Model supports multiple platforms. In fact, you can use it on any solution that can run JavaScript code or in any .NET-managed application, even in a Silverlight solution. Behind the scenes, all these platforms consume a WCF service called Client.svc, which is published under the \/_vti_bin\/ folder of the current site.<\/p>\n<p>Next let&#8217;s talk about JSOM.<\/p>\n<p>JSOM or JavaScript Object Model is a set of .js files built for ECMAScript-enabled platforms. The main .js files that are available are:<\/p>\n<ul>\n<li><span style=\"line-height: 1.5;\">SP.js<\/span><\/li>\n<li><span style=\"line-height: 1.5;\">SP.Core.js<\/span><\/li>\n<li><span style=\"line-height: 1.5;\">SP.Ribbon.js<\/span><\/li>\n<li><span style=\"line-height: 1.5;\">SP.Runtime.js<\/span><\/li>\n<\/ul>\n<p>These files are deployed in the SharePoint15_Root\\TEMPLATE\\LAYOUTS directory. The default master pages of SharePoint define a ScriptManager control, which automatically includes references to these .js files. You could also reference them by yourself.<\/p>\n<p>For Security reasons, if you use the Client Object Model within a custom ASPX page, you will need to include the FormDegist control by yourself.<\/p>\n<p>Next let us look at an example as an introduction on how to use JSOM.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5893\" alt=\"SharePoint2013-JSOM-2\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-2.png\" width=\"804\" height=\"396\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-2.png 804w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2013\/07\/SharePoint2013-JSOM-2-300x147.png 300w\" sizes=\"(max-width: 804px) 100vw, 804px\" \/><br \/>\nIn order to retrieve a List instance and show its Title property, first you should reference the SP.js file. You can use the SharePoint:ScriptLink control to reference .js files. SharePoint:ScriptLink control accepts a set of arguments, including the following:<\/p>\n<ul>\n<li><span style=\"line-height: 1.5;\">LoadAfterUI &#8211; Loads the script after the code of the UI<\/span><\/li>\n<li><span style=\"line-height: 1.5;\">Localizable &#8211; Indicates if the current page can be localized<\/span><\/li>\n<li><span style=\"line-height: 1.5;\">Name &#8211; Defines the relative path of the .js file to include in the page<\/span><\/li>\n<\/ul>\n<p>Next you need to define a script block that uses the object model.<\/p>\n<p>The core of the block is in the method retrieveContacts. In this method, we get a reference to an SP.ClientContext instance by using the get_current() method. We can also get it by using a constructor that accepts the server-relative URL of the target site. Then we can get the current site and get the target list by the current site. Finally, use the asynchronous pattern when executing the query against the SharePoint server.<\/p>\n<p>For learning more about JSOM, please reference:<\/p>\n<p><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/hh372944(v=office.14).aspx\">http:\/\/msdn.microsoft.com\/en-us\/library\/hh372944(v=office.14).aspx<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SharePoint 2013 Client Object Model is a set of libraries and classes with which you can consume SharePoint data through a specific object model that is a subset of the SharePoint Server Object Model. This figure shows the overall architecture of the Client Object Model. Object Model supports multiple platforms. In fact, you can use [&hellip;]<\/p>\n","protected":false},"author":64,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,460],"tags":[],"_links":{"self":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5888"}],"collection":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5888"}],"version-history":[{"count":13,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5888\/revisions"}],"predecessor-version":[{"id":9174,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5888\/revisions\/9174"}],"wp:attachment":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}