SharePoint JSOM Operations Using SPFx Solution

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.

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.

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.