Angular Service for Accessing SharePoint Lists ​Using REST API

Share on facebook
Share on twitter
Share on linkedin
SharePoint Lists can be accessed using REST API. Following is an AngularJS service that helps to create a list item, get items that are already created, update or delete an item from the list using functions that automatically build REST API query.

Angular Services Introduction

SharePoint Lists can be accessed using REST API. Following is an AngularJS service that helps to create a list item, get items that are already created, update or delete an item from the list using functions that automatically build REST API query. This service has a filter builder which helps to build OData query for filtering and fetching desired items from the list of objects.

THE CODE 

(function() { 

    angular.module('sharepoint.rest', []).factory('sharepointRESTService', sharepointRESTService) 

    sharepointRESTService.$inject = ['$q', '$http']; 



    function sharepointRESTService($q, $http) { 

        var factoryUtil = {}; 



        // Get domain URL automatically 

        factoryUtil.getDomainURL = function() { 

            var deferred = $q.defer(); 



            var US_SP_data = {}; 

            US_SP_data.domain_url = sessionStorage.getItem('US_SPDomainUrl'); 

            US_SP_data.form_digest = sessionStorage.getItem ('US_SPFormDigest'); 



            if(US_SP_data.domain_url == null || US_SP_data.form_digest == null) { 

                $http({ 

                    url: "_api/contextinfo", 

                    method: "POST", 

                    headers: { 

                        "accept": "application/json;odata=verbose", 

                        "content-Type": "application/json;odata=verbose" 

                    } 

                }).success(function(result) { 

                    US_SP_data.domain_url = result.d.GetContext WebInformation. WebFullUrl; 

                    US_SP_data.form_digest = result.d.GetContext WebInformation. FormDigestValue; 

                    sessionStorage.setItem('US_SPDomainUrl', US_SP_data.domain_url); 

                    sessionStorage.setItem ('US_SPFormDigest', US_SP_data.form_digest); 

                    deferred.resolve(US_SP_data); 

                }); 

            } else { 

                deferred.resolve(US_SP_data); 

            } 



            return deferred.promise; 

        } 



        // HTTP GET 

        factoryUtil.getListItems = function(list_name, filters) { 

            var deferred = $q.defer(); 

            factoryUtil. getDomainURL(). then(function(US_SP_data)
{ var domain_url = US_SP_data.domain_url; var url = domain_url + "/_api/web/lists/GetByTitle('" + list_name + "')/Items?"; if (!angular.isUndefined(filters)) { url += factoryUtil.build_filters(filters) } $http({ url: url, method: "GET", headers: { "accept": "application/json;odata=verbose", "content-Type": "application/json;odata=verbose" } }).success(function(result) { deferred.resolve(result.d.results); }).error(function(result, status) { deferred.reject({ error: result, status: status }); }); }); return deferred.promise; }; // HTTP Create factoryUtil.createListItem = function(list_name, data) { data.__metadata = { "type": factoryUtil.getListName(list_name) }; var deferred = $q.defer(); factoryUtil.getDomainURL().then ]
(function(US_SP_data) { var domain_url = US_SP_data.domain_url; var form_digest = US_SP_data.form_digest; var url = domain_url + "/_api/web/lists/getbytitle('" + list_name + "')/Items"; $http({ url: url, method: "POST", headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": form_digest, "content-Type": "application/json;odata=verbose" }, data: JSON.stringify(data) }).success(function(result) { deferred.resolve(result); }).error(function(result, status) { deferred.reject({ error: result, status: status }); }); }); return deferred.promise; }; // HTTP Update factoryUtil.updateListItem = function(list_name, list_id, data) { data.__metadata = { "type": factoryUtil.getListName(list_name) }; var deferred = $q.defer(); factoryUtil.getDomainURL().then
(function(US_SP_data) { var domain_url = US_SP_data.domain_url; var form_digest = US_SP_data.form_digest; var url = domain_url + "/_api/Web/Lists/getByTitle('" + list_name + "')/Items(" + list_id + ")"; $http({ url: url, method: "POST", headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": form_digest, "content-Type": "application/json;odata=verbose", "X-HTTP-Method": "MERGE", "If-Match": "*" }, data: data }).success(function(result) { deferred.resolve(result); }).error(function(result, status) { deferred.reject({ error: result, status: status }); }); }); return deferred.promise; }; // HTTP Delete factoryUtil.deleteListItem = function(list_name, list_id) { var deferred = $q.defer(); factoryUtil.getDomainURL().then
(function(US_SP_data) { var domain_url = US_SP_data.domain_url; var form_digest = US_SP_data.form_digest; var url = domain_url + "/_api/Web/Lists/getByTitle('" + list_name + "')/Items(" + list_id + ")"; $http({ url: url, method: "DELETE", headers: { "accept": "application/json;odata=verbose", "X-RequestDigest": form_digest, "IF-MATCH": "*" } }).success(function(result) { deferred.resolve(result); }).error(function(result, status) { deferred.reject({ error: result, status: status }); }); }); return deferred.promise; }; // Generate List Name factoryUtil.getListName = function(name) { return "SP.Data." + name.charAt(0).toUpperCase() + name.replace('_', '_x005f_').replace(' ', '').slice(1) + "ListItem"; }; // Build filters factoryUtil.build_filters = function(filters) { var url_filter = []; url_filter[0] = []; // select url_filter[1] = []; // orderby url_filter[2] = []; // top url_filter[3] = []; // skip url_filter[4] = []; // filter And url_filter[5] = []; // expand url_filter[6] = []; // filter Or var url = []; if (!angular.isUndefined(filters.select)) { url_filter[0].push (filters.select.join()); } if (!angular.isUndefined(filters.expand)) { angular.forEach(filters.expand, function(columns, field) { angular.forEach(columns, function(value, key) { url_filter[0].push(field + '/' + value); }); url_filter[5].push(field); }); url_filter[5] = '$expand=' + url_filter[5].join(); } if (!angular.isUndefined(filters.orderby)) { url_filter[1] = '$orderby=' + filters.orderby; } if (!angular.isUndefined(filters.top)) { url_filter[2] = '$top=' + filters.top; } if (!angular.isUndefined(filters.skip)) { url_filter[3] = '$skip=' + filters.skip; } if (!angular.isUndefined(filters.filter)) { angular.forEach(filters.filter, function(value, field) { url_filter[4].push('(' + field + ' ' + value[0] + ' \'' + value[1] + '\')'); }); url_filter[4] = '$filter=(' + url_filter[4].join(' and ') + ')'; } if (!angular.isUndefined(filters.filterOr)) { angular.forEach(filters.filterOr, function(value, field) { url_filter[6].push('(' + field + ' ' + value[0] + ' \'' + value[1] + '\')'); }); url_filter[6] = '$filter=(' + url_filter[6].join(' or ') + ')'; } if (url_filter[0].length) url_filter[0] = '$select=' + url_filter[0].join(); angular.forEach(url_filter, function(value, key) { if (url_filter[key].length) url.push(value); }); return url.join('&'); } return factoryUtil; } })()

LIST OPERATIONS 

To use this service, inject the sharepointRESTService service into your factory or controller.

Getting list items

Items can be retrieved from the list using getListItems() function:

sharepointRESTService. getListItems(listName, filter).then(function (response) { 
      // Handle response 
}); 

Replace list_name with the actual name of the list to fetch items from. filter argument is an optional one where it can use any of the OData query in the following pattern: 

var filter = { 

select: ['field_name', 'id'], 

      expand: { 

      'list_name': ['field_name1', 'field_name2'] 

}, 

      orderby: 'field_name asc/desc', 

      filter: { 

      'field_name': ['lt/gt/eq/ne', 'value'] 

}, 

      top : 5, 

      skip : 5, 

};

This filter object will be used to build filters for retrieving items from the list. This is the final URL built:

https://company_name.sharepoint.com/sites/ site_name/_api/web/ lists/GetByTitle (‘listName’)/Items?$select=field_name,id, list_name/field_name1, list_name/field_ name2&$expand= list_name&$orderby= ‘field_name asc’&$filter=’field_name lt value’&$top=5&$skip=5

Creating a list item

Similarly, a New list item can be created using

sharepointRESTService. createListItem('list_name', data).then(function (response) { 

// success handler 

}, function() { 

// error handler 

}); 

Here, data is an object where keys should be the field/column name of the targeted list and value should be the value for the corresponding field/column name.

Updating a list item

List item can be updated using:

sharepointRESTService. updateListItem (‘list_name’, data.Id, data).then(function (response) {

// Handle response

});

Here, data.Id is the identifier for the list item which is unique for the list. Item that matches the Id will get updated. data is an object where keys should be the field/column name of the targeted list and value should be the value for the corresponding field/column name which needs to be updated.

Deleting a list item

List item can be deleted using:

sharepointRESTService. updateListItem (‘list_name’, Id).then(function (response) {

// Handle response

});

Here, Id is the identifier which is unique to the list item – the Id that needs to be deleted.

ADVANTAGES 

This simple angular service helps remove the overhead involved in writing manual queries to interact with SharePoint lists. The automatic generation of OData query to filter results is quick and efficient and maintains the integrity of the code with just objects.

Also, this service uses deferred promise that prevents interfering of other process with the asynchronous callback. This helps dealing with multiple callbacks that are dependent on each other without running into any setbacks.

REFERENCES 

Clone or fork from GitHub: https://github. com/VijayaSankarN/ sharepoint-rest

https://dev.office.com/sharepoint/docs/sp-add-ins/use-odata-query-operations-in-sharepoint-rest-requests
https://social.technet.microsoft.com/wiki/ contents/articles/35796.sharepoint-2013-using-rest-api-for-selecting-filtering-sorting-and-pagination-in-sharepoint-list.aspx

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

SHAREPOINT – REST API

SharePoint is a tool to connect people and information. It provides a central site for sharing information with other users. SharePoint is web-based and accessible from anywhere in the world via an internet connection.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.