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
