Tuesday 16 August 2016

ECMAScript in SharePoint

The ECMAScript (JavaScript, JScript) object model was introduced in Microsoft SharePoint Foundation 2010 along with the managed and Silverlight client object models. The JavaScript object model enables you to work with objects without deploying code on the server. Being able to work with objects on the client side is useful when deploying a sandboxed solution or working with the Server ribbon. Due to the nature of JavaScript, all code is executed asynchronously and relies on callback functions to work with objects inside of SharePoint Foundation 2010. JavaScript can work only with objects in the current context. That is, there is no ability to do cross-site scripting or access objects outside of the current context.

To minimize stress on the server, not all object properties are loaded when an object is created. You will have to request specific properties using Include statements and the load(clientObject) function. You can read more about working with objects in Data Retrieval Overview. JavaScript does not support properties as in the managed client object model. The JavaScript object model exposes properties using methods that are prepended with set_ and get_ based on the ability to retrieve or set the value of that property. The JavaScript Class Library contains reference material for objects and their properties.

The following table lists the namespaces in the JavaScript object model and indicates the .js files in which they are defined.
Namespace
JavaScript File
CUI.js, SP.UI.Rte.js
CUI.js
CUI.js, SP.UI.Rte.js
SP.Core.js, SP.js, SP.Ribbon.js, SP.Runtime.js
SP.Core.js
SP.Ribbon.js
SP.Ribbon.js
SP.Core.js, SP.js, SP.UI.Dialog.js
SP.Core.js, SP.js, SP.Exp.js
SP.js
SP.js
It would also be easier to make REST API calls from JavaScript. And, it would be easier to work with the return data like json from these REST calls using JavaScript as well.

JavaScript code in SharePoint runs within the context of the current logged in user. It has to be loaded from within a SharePoint artifact or context such as a page or a form. It cannot be executed from outside of SharePoint like CSOM.

To add some custom JavaScript functionality, first, create the JavaScript file and add your custom js code. You could deploy this to the layouts folder or to a SharePoint library such as style library or site assets library.

Next, you need to add a reference to the JavaScript location in the page where you want to call this functionality. Or, you can also add it to the master page if you want it to be available across all the pages in your site collection. Suppose, you have added a file called CustomJavaScript.js in the layouts folder, you can add a reference as follows

<script src="/_layouts/15/CustomJavaScript.js" type="text/javascript"></script>

If you want to use the JavaScript object model, then you have to load two libraries SP.Runtime.js and SP.js. You can load the scripts programmatically as shown below. Otherwise, you can use the declarative approach and add a ScriptLink control to the page such as:

<SharePoint:ScriptLink Name="SP.js" LoadAfterUI="true" Localizable="false" runat="server" ID="SP" />





No comments: