Generic CRUD Library For SharePoint SPFx Framework

In my previous blog, I shared a generic REST library that we can use for the SharePoint CRUD operations and we can also expand that library as needed.

So today, we are going to talk about generic libraries for SharePoint SPFx framework, a latest release from Microsoft for the web part model.

SPFx uses the node.js platform for developing and compiling application/web parts and I also hear many people talking about how a person should learn this framework and it's true.

But, as a professional developer, for many of us it’s hard to spent time on this or consider a different scenario, where we have to develop SPFx web part/applications under tight deadlines.

Well, in such cases, we should think of the resources that we can re-use to quickly develop any application.

SharePoint SPFx framework follows a TypeScript development pattern which enables concepts of OOP. Now, here, we need to think that, at the end, Type Scripts is converted to Java Script, so the browser can execute it.

Most, important, any Java Script frameworks (Angular, knockout, etc) are built to reduce the developer’s efforts. So, if you know the Java Script, you can work on any of these frameworks easily and keeping this in mind, I have converted my previous REST library in TypeScript format.

So, we can re-use existing code in Type Script as well. This library is in partial TypeScript format. The aim of creating SPFx generic library is to enable the developer to quickly start development with SPFx using TypeScript.

I assume that you have working knowledge of creating SPFx application solutions. So, we will not discuss this in this blog.

Files are the same from my previous blog but this time extension is “.ts”.

1. ListManager.ts - This file is used to specify list columns we are working with
2. ListUtility.ts - This file contains all generic methods
3. Utility.ts - It can be used to specify constants as well as utility methods

Only change is, here I have converted JavaScript modules to class to quickly adopt TypeScript pattern.

So, now let’s discuss, how to use this library.

 

NOTE

In your SPFx project/solution, do not forgot to include jQuery reference.  

1. Once SPFx project/solution is created (here I have created “HelloWorld”), go to “src/webparts/helloWorld” and copy above three files (attached) in this directory.
   
   
   
   
2. Now, in your main file, give reference of the above TypeScript files as below.
   
   
   
   
3. Now, create method (“GetListItems”) to get the list items and call this method in render function and just run this application.
   
   
   

I hope, this library is useful in your next SPFx development.