ASP.NET, CMS, SharePoint, UI Development

SharePoint with AngularJS

What is SharePoint?

SharePoint is a web-based collaborative tool which can be used to easily manage and share data within an organization or a team for better transparency, yet blended with a high profile security. SharePoint includes its own data hosting capability in the form of lists which can be used like the traditional database, though comparatively easily. Lists allow programmers to create logic so as to perform various operations on the list.

The language, primarily used for performing several operations on the list, is C# which is used to create connection with the list and make logical operations on it. There is a back-and-forth interaction of front-end and back-end and the time complexity of operations like insertion, retrieval increases as the items in the list increases.

In this post, I will be discussing about how to perform different CRUD (Create, Read, Update and Delete) operations on a SharePoint List using AngularJS and REST calls. This blog will give a basic overview of how we can use AngularJS REST calls to work with SharePoint lists. All the basic operations on the list will be performed by client-side script files, the operations would be defined in AngularJS controllers which will be then called from the front view HTML view.

Why AngularJs?

We can develop any web application with DOM Manipulation, Data binding etc. However, AngularJS makes this easier. Some key advantages of AngularJs are:

  1. AngularJs supports cross-browser JavaScript code in applications
  2. It is a rich internet application
  3. It is Open Source technology
  4. It has awesome flexibility and makes it easy for developers to code
  5. Increases the business for apps and works with cross technologies.
  6. MVW Framework(Model View What Ever)
  7. Bootstrap

 

To make it happen, we will first create a sample SharePoint list, in my case, I have created a list called “AngularData” on which we can perform operations using AngularJS. 

Next, we will create a document library (“AngularFiles” in my case) to store the HTML file which will be rendered onto the Content Editor Web part (explained later) . The JS file (“controller.js”) having all the controllers will also be stored in the document library and will be referenced from the HTML file. I have stored my HTML code as a text file(“AngularTrial”) in the document library.

Next step would be to create a page in the sharepoint site and insert a Content Editor Web Part (CEWP) into the page. Once inserted, edit the properties of the CEWP by providing the “Content Link” as the link to the text file, having html code in the document library. The html code will have the reference of the js file placed in the document library also which will make the operations possible through corresponding controllers.

The output of this html file will be rendered by the Content Editor Web Part and will be displayed on the page.

The first table shows the data that is in the sharepoint list “AngularData” and the other sections can be used to perform necessary operations using AngularJS controllers (AngularJS uses MVC methodology). The controller.js contains all the REST calls which are performing the necessary operations.

 

CREATE OPERATION

 

UPDATE OPERATION

DELETE OPERATION

In this way, we have demonstrated how we can integrate the AngularJS framework with SharePoint by defining an HTML page and adding that HTML page to any content editor web part. This concept can be extended to use routes, directives, and other features and build interactive UI pages without refreshing the whole page.

About The Author

Leave a Reply

*