CRUD operations on SharePoint list using AngularJS

In this post, I am going to share some code snippets for performing CRUD operation on a SharePoint list using only client side script written with AngularJS.

It is a simple implementation, where I am going to create a web part, which will have reference to a controller that will read, create, update and delete list items.

I hope you are reading this post with some prior experience with SharePoint and AngularJS. The environment I am working upon is a SharePoint Online (Office 365) site.

I have created a Contacts list as in the below screenshot.


For this example, I will be using only 3 fields/columns in the list.
ID (Auto generated for every item in the list)
Last Name (Internal name: Title)
First Name (Internal name: FirstName)

Create the webpart

I have added one Content Editor Webpart to a page and linked it to our view page [listItems.html].



The view page has 4 sections to view contacts, add, edit and delete them. For each of these operations, I have created 4 separate controllers. Below is the code for the same.


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/sites/ListOps/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/sites/ListOps/Scripts/angular.min.js"></script>
    <script type="text/javascript" src="/sites/ListOps/Scripts/listItems.controller.js"></script>
    
    <style type="text/css">
        .Table {
            display: table;
        }

        .Row {
            display: table-row;
        }

        .Cell {
            display: table-cell;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3>View Contacts</h3>
    <hr />
    <div ng-app="spApp">
        <div ng-controller="viewItemsController">
            <div ng-repeat="contact in contacts">
                {{contact.ID}}: {{contact.Title}}, {{contact.FirstName}}
                <br />
            </div>
        </div>
        <hr />


        <h3>Add Contacts</h3>
        <div ng-controller="addItemsController">
            <div class="Table">
                <div class="Row">
                    <div class="Cell">
                        First Name :
                    </div>
                    <div class="Cell">
                        <input type="text" id="firstName" ng-model="firstName" />
                    </div>
                </div>
                <div class="Row">
                    <div class="Cell">
                        Last Name :
                    </div>
                    <div class="Cell">
                        <input type="text" id="lastName" ng-model="lastName" />
                    </div>
                </div>
                <div class="Row">
                    <div class="Cell">
                        
                    </div>
                    <div class="Cell">
                        <input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()" />
                    </div>
                </div>
            </div>
        </div>
        <hr />


        <h3>Edit Contacts</h3>
        <div ng-controller="editItemsController">
            <div class="Table">
                <div class="Row">
                    <div class="Cell">
                        ID :
                    </div>
                    <div class="Cell">
                        <input type="text" id="itemId" ng-model="itemId" />
                    </div>
                </div>
                <div class="Row">
                    <div class="Cell">
                        First Name :
                    </div>
                    <div class="Cell">
                        <input type="text" id="firstName" ng-model="firstName" />
                    </div>
                </div>
                <div class="Row">
                    <div class="Cell">
                        Last Name :
                    </div>
                    <div class="Cell">
                        <input type="text" id="lastName" ng-model="lastName" />
                    </div>
                </div>
                <div class="Row">
                    <div class="Cell">

                    </div>
                    <div class="Cell">
                        <input type="button" id="btnEditContact" value="Edit Contact" ng-click="editContact()" />
                    </div>
                </div>
            </div>
        </div>
        <hr />


        <h3>Delete Contacts</h3>
        <div ng-controller="delItemsController">
            <div class="Table">
                <div class="Row">
                    <div class="Cell">
                        ID :
                    </div>
                    <div class="Cell">
                        <input type="text" id="itemId" ng-model="itemId" />
                    </div>
                </div>              
                <div class="Row">
                    <div class="Cell">

                    </div>
                    <div class="Cell">
                        <input type="button" id="btnDelContact" value="Delete Contact" ng-click="delContact()" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

In the head section, I have made reference to the JQuery and the AngularJS libraries. And I have also referred the controller script [listItems.controller.js]. I have also added some styling script for the webpart.

Controller Code

Below is the controller code. The controller name is according to the operation it performs.


var spApp = angular
                .module("spApp", [])
                .controller("viewItemsController", function ($scope, $http) {
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items?$select=Title,FirstName,ID";
                    $http(
                    {
                        method: "GET",
                        url: url,
                        headers: { "accept": "application/json;odata=verbose" }
                    }
                    ).success(function (data, status, headers, config) {
                        $scope.contacts = data.d.results;
                    }).error(function (data, status, headers, config) {
                    });
                    
                })

                .controller("addItemsController", function ($scope, $http) {
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items";
                    var vm = $scope;
                    vm.addContact = function () {
                        return $http({
                            headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
                            method: "POST",
                            url: url,
                            data: {
                                'Title': vm.lastName,
                                'FirstName': vm.firstName
                            }
                        })
                        .then(saveContact)
                        .catch(function (message) {
                            console.log("addContact() error: " + message);
                        });
                        function saveContact(data, status, headers, config) {
                            alert("Item Added Successfully");
                            return data.data.d;
                        }
                    }
                })

                .controller("editItemsController", function ($scope, $http) {
                    
                    var vm = $scope;                    
                    vm.editContact = function () {
                        var data = {
                            '__metadata': {
                                'type': 'SP.Data.ContactsListItem'
                            },
                            'Title': vm.lastName,
                            'FirstName': vm.firstName
                        };
                        return $http({
                            headers: {
                                "Accept": "application/json; odata=verbose",
                                "Content-Type": "application/json; odata=verbose",
                                "X-HTTP-Method": "MERGE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                "Content-Length": data.length,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items(" + vm.itemId + ")",
                            data: data
                        })
                        .then(saveContact)
                        .catch(function (message) {
                            console.log("editContact() error: " + message);
                        });
                        function saveContact(data, status, headers, config) {
                            alert("Item Edited Successfully");
                            return data.data.d;
                        }
                    }
                })

                .controller("delItemsController", function ($scope, $http) {
                    
                    var vm = $scope;                    

                    vm.delContact = function () {
                        return $http({
                            headers: {
                                "X-HTTP-Method": "DELETE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items(" + vm.itemId + ")"
                        })
                        .then(saveContact)
                        .catch(function (message) {
                            console.log("delContact() error: " + message);
                        });
                        function saveContact(data, status, headers, config) {
                            alert("Item Deleted Successfully");
                            return data.data.d;
                        }
                    }
                });

Hope this post is helpful for folks working purely on client side scripting with SharePoint in Office 365.

2 comments

The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
Angularjs training in chennai | Angularjs course in Chennai

Reply

Hi Sid, thanks for your blog. After reading your blog, I am able to read the data from List but unable to perform add operation. Need your help on it.

Reply

Post a Comment