SharePoint JSOM Operations Using SPFx Solution

Article

Introduction

Here, let us look at working with SharePoint JavaScript Object Model (JSOM) operations on SharePoint framework solutions (SPFx).

Microsoft provides the packages for supporting JSOM operations. Usually in the traditional approach, JavaScript files are required for JSOM operations are MicrosoftAjax.js, SP.js, SP.runtime.js, etc. For SPFx solution, the required files can be included by installing the required typings.

The required typings for JSOM operation are given below.

Microsoft.ajax
Sharepoint

Adding typings with sample

Let us look create, setup the modules and execute JSOM operations. In the sample given below, let us see how to retrieve the current site details.

Create SharePoint framework project by using the command yo@microsoft/sharepoint. For my case, I have selected no JavaScript frameworks in the project creation configuration.

Install Microsoft AJAX and SharePoint typings for the project. Using the command prompt from the project folder, execute the commands given below.

npm install @types/microsoft-ajax @types/sharepoint --save-dev

In the tsconfig.json file, add the installed typings entries under the types option. The snapshot given below shows the updated file.

For the web references, add the external dependency files in the config/config.json file. The snapshot given below shows the updated entries in the config file.

In the Web part .ts file, include the dependency components, using require statements before the import section.

require('sp-init');
require('microsoft-ajax');
require('sp-runtime');
require('sharepoint');

In the Web part file, modify the render method to the required HTML and then call the custom method. In the custom method, load the client context and the Web object, using the context URL. Now, retrieve the title and description properties and display it, using HTML. The code snippet given below shows the required changes in the Web part .ts file.

private webpartTitle:string ="";
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.helloWorld}">
<div id="siteContent"></div>
</div>`;
this.loadListItems();
}
public loadListItems(): void{
let htmlContext = this;
const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
const web: SP.Web = context.get_web();
context.load(web);
context.executeQueryAsync(function name(sender,args) {
this.webpartTitle = web.get_title();
console.log(web.get_description());
let siteContent:string = `<div>
<h2>Title: ${web.get_title()}</h2>
<span>Description: ${web.get_description()}<span>
</div>`;
htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
},
function(sender,args){
console.log(args.get_message());
});
}

Deploy/ Run

For testing the solution, using the command prompt, run Gulp serve command for testing. From the required site, open the workbench.aspx file and add the Web part. The Web part will display the site properties.

For deploying the solution, the solution should be bundled and packaged. Now, the files should be uploaded to SharePoint site (Office 365 site). Subsequently, the app is deployed. It shows detailed steps for deploying the SPFx solution onto SharePoint online site.

The article given below shows the detailed steps for bundling, packaging and deploying.