SharePoint List Operations Using SPFx Solution With JSOM

Introduction

Here, let us look at performing basic list operations, using SharePoint JavaScript Object Model (JSOM) on SharePoint Framework Solutions (SPFx).

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

In my previous article, you will have learned building the code, using JSOM approach on SharePoint Framework Solutions.

The support files are installed, using the typings. Install the required typings (Microsoft.ajax and Sharepoint) before creating the project.

Create the project with no JavaScript framework option, using the command yo @microsoft/sharepoint. In Render method, insert the necessary HTML wrapper to display the data.

Declare other methods to process the data. Four methods are declared to retrieve SharePoint data. 

• Get Lists
• Get List by Title
• Create List
• Delete List 

Get lists

Let us look at retrieving all the lists from SharePoint site, using JSOM approach.

The context of the object is set and then the list collection will be retrieved, using the Web object. The list collection is loaded and executed with the context before looking at the data. Now, using Get Enumerator method, individual list properties are retrieved and displayed.

public GetLists(){
    var htmlContext = this;
    let siteContent:string = "";
    const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
    const web: SP.Web = context.get_web();
    const lists: SP.ListCollection = web.get_lists();

    context.load(lists);
    context.executeQueryAsync(function () {
      var listenum = lists.getEnumerator();
      while (listenum.moveNext()) {
          var listItem = listenum.get_current();

          siteContent += `<div>
                          <span>${listItem.get_title()}</span>
                        </div>`;
      }

      htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
    },
    function(sender,args){
      console.log(args.get_message());
    });
  }

Get list by Title

Let us see retrieving the required list, using the title with JSOM approach.

Like the above method, the context is used to retrieve the list collection, using the Web object with context URL. From the list collection, the required list is extracted with getbytitle() method. Now, the list is loaded and executed, using the context. In the success method, the properties are displayed.

public GetList(){
    var htmlContext = this;
    let siteContent:string = "";
    const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
    const web: SP.Web = context.get_web();
    const lists: SP.ListCollection = web.get_lists();
    const list: SP.List = lists.getByTitle("TestList");

    context.load(list);
    context.executeQueryAsync(function () {
      siteContent += `<div>
                          <div><h2>Title   : ${list.get_title()}</h2></div>
                          <div>Description : ${list.get_description()}</div>
                          <div>Template    : ${list.get_baseTemplate()}</div>
                          <div>Total Items : ${list.get_itemCount()}</div>
                        </div>`;

      htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
    },
    function(sender,args){
      console.log(args.get_message());
    });
  }

Create list

Let us create a list, using JSOM approach. Like the previous method, the list collection is retrieved. To the list collection, a new list is added using the list creation information object. The list creation object contains the basic list information. Now, the list is loaded and executed , using the context.

public CreateList(){
    var htmlContext = this;
    let siteContent:string = "";
    const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
    const web: SP.Web = context.get_web();
    const lists: SP.ListCollection = web.get_lists();

    var listCreationInfo = new SP.ListCreationInformation();
    listCreationInfo.set_title('TestList1');
    listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

    const list:SP.List = lists.add(listCreationInfo);


    context.load(list);
    context.executeQueryAsync(function () {
      siteContent += `<div>
                          <div><h2>Title   : ${list.get_title()}</h2></div>
                          <div>Description : ${list.get_description()}</div>
                          <div>Template    : ${list.get_baseTemplate()}</div>
                          <div>Total Items : ${list.get_itemCount()}</div>
                        </div>`;

      htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
    },
    function(sender,args){
      console.log(args.get_message());
    });
  }

Delete list

Here, we will see deleting the existing list from the site by JSOM approach. The list is retrieved like Get list by Title method. Now, the list object is deleted, using deleteObject() method. Now, the context is executed.

public DeleteList(){
    var htmlContext = this;
    let siteContent:string = "";
    const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
    const web: SP.Web = context.get_web();
    const lists: SP.ListCollection = web.get_lists();
    const list:SP.List = lists.getByTitle("TestList1");

    list.deleteObject();
    context.executeQueryAsync(function () {
      siteContent += `<div>TestList1 list deleted</div>`;

      htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
    },
    function(sender,args){
      console.log(args.get_message());
    });
  }

Deploy/ Run

To test 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.

To deploy the solution, the solution should be bundled and packaged. Now, the files should be uploaded to SharePoint site (Office 365 site) and then the app is deployed. 

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

• Developing Web Parts Using SharePoint Framework - Part Three 

Summary

Thus, you have learned developing the list operations on SharePoint Framework Solutions with JavaScript Object Model (JSOM) approach.