CRUD operation in SharePoint Online using REST, AngularJS
Step 1:-
---------------------
Create custom list as "Employees"
Step 2:-
Step 3:-
Step 1:-
---------------------
Create custom list as "Employees"
Step 2:-
---------------------
Create Folder structure as below format.
Use below images for edit, delete, cancel buttons.
---------------------
Update below code.
style.css:-
---------------------
.all-employees table{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
border: 1px solid #999999;
}
.all-employees table th{
font-size: 1.4em;
text-align: left;
padding: 5px;
text-align: center;
border-right: 1px solid #999999;
}
.all-employees table td{
font-size: 1.2em;
border: 1px solid #999999;
padding: 5px;
text-align: center;
}
.all-employees{
margin-top: 17px;
}
.add-new-button{
background-color: rgb(55, 139, 202);
padding: 8px;
color: white;
}
.add-new-button:visited{
color: white;
}
.employees-app{
width: 800px;
}
.employees-app-table{
width: 100%;
}
.employees-app-table input[type=text], textarea{
width: 50%!important;
}
.employees-app-table input[type=button]{
margin: 0!important;
}
add.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("addEmployeeCtrl",
["$scope", "employeesService","$location",
function ($scope, employeesService,$location) {
$scope.addEmployee = function (employee) {
employeesService.addNew(employee)
.then(function(response){
console.log(response);
$location.path("/");
});
};
}]);
})();
all.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("allEmployeesCtrl",
["$scope", "employeesService",
function ($scope, employeesService) {
employeesService.getAll()
.then(function (response) {
$scope.employees =
response.d.results;
});
$scope.removeEmployee = function(employee){
if (confirm(" Are you sure want to delete " + employee.FirstName + "
" + employee.LastName + " ?"))
{
employeesService.remove(employee.ID)
.then(function(response){
var employeeIndex =
$scope.employees.indexOf(employee);
$scope.employees.splice(employeeIndex,1);
});
}
};
}]);
})();
cancel.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("cancelEditEmployeeCtrl", ["$scope", "employeesService",
function ($scope, employeesService) {
employeesService.cancelRequest()
.then(function (response) {
$scope.employees =
response.d.results;
});
$scope.removeEmployee = function(employee){
employeesService.remove(employee.ID)
.then(function(response){
var employeeIndex =
$scope.employees.indexOf(employee);
$scope.employees.splice(employeeIndex,1);
});
};
}]);
})();
edit.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("editEmployeeCtrl",
["$scope", "employeesService", "$routeParams","$location",
function ($scope,
employeesService, $routeParams,$location) {
employeesService.getById($routeParams.employeeId)
.then(function (response) {
$scope.employee
= {
employeeId
: response.d.ID,
firstName:
response.d.FirstName,
lastName:
response.d.LastName
};
$scope.editEmployee
= function(employee){
employeesService.update(employee)
.then(function(response){
$location.path("/");
});
};
});
}]);
})();
employees.js:-
---------------------
"use
strict";
(function(){
angular.module("EmployeesApp")
.factory("employeesService",["baseSvc",function(baseService){
var listEndPoint = '/_api/web/lists';
var getAll = function(){
var query = listEndPoint + "/GetByTitle('Employees')/Items?$select=ID,FirstName,LastName";
return
baseService.getRequest(query);
};
var addNew = function(employee){
var data = {
__metadata: { 'type': 'SP.Data.EmployeesListItem'
},
FirstName :
employee.firstName,
LastName :
employee.lastName
};
var url = listEndPoint + "/GetByTitle('Employees')/Items";
return
baseService.postRequest(data,url);
};
var getById = function(employeeId){
var query = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employeeId+")?$select=ID,FirstName,LastName";
return
baseService.getRequest(query);
};
var update = function (employee){
var data = {
__metadata: { 'type': 'SP.Data.EmployeesListItem'
},
FirstName :
employee.firstName,
LastName :
employee.lastName
};
var url = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employee.employeeId+")";
return
baseService.updateRequest(data,url);
};
var remove = function(employeeId){
var url = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employeeId+")";
return
baseService.deleteRequest(url);
};
var cancel = function(){
var query = listEndPoint + "/GetByTitle('Employees')/Items?$select=ID,FirstName,LastName";
return
baseService.cancelRequest(query);
};
return{
getAll:getAll,
addNew:addNew,
getById:getById,
update:update,
remove:remove,
cancel:cancel
};
}]);
})();
baseSvc.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.factory("baseSvc", ["$http", "$q", function ($http, $q) {
var baseUrl = _spPageContextInfo.webAbsoluteUrl;
var getRequest = function (query) {
var deferred = $q.defer();
$http({
url: baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var postRequest = function (data, url) {
var deferred = $q.defer();
$http({
url: baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest":
document.getElementById("__REQUESTDIGEST").value,
"content-Type": "application/json;odata=verbose"
},
data: JSON.stringify(data)
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var updateRequest = function (data, url) {
var deferred = $q.defer();
$http({
url: baseUrl + url,
method: "PATCH",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest":
document.getElementById("__REQUESTDIGEST").value,
"content-Type": "application/json;odata=verbose",
"X-Http-Method": "PATCH",
"If-Match": "*"
},
data: JSON.stringify(data)
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var deleteRequest = function(url){
var deferred = $q.defer();
$http({
url: baseUrl + url,
method: "DELETE",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest":document.getElementById("__REQUESTDIGEST").value,
"IF-MATCH": "*"
}
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var cancelRequest = function (query) {
var deferred = $q.defer();
$http({
url: baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
return {
getRequest: getRequest,
postRequest: postRequest,
updateRequest: updateRequest,
deleteRequest:deleteRequest,
cancelRequest:cancelRequest
};
}]);
})();
app.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp",
["ngRoute"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/all.html",
controller: "allEmployeesCtrl"
}).when("/addEmployee",
{
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/add.html",
controller: "addEmployeeCtrl"
}).when("/editEmployee/:employeeId", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/edit.html",
controller: "editEmployeeCtrl"
}).when("/cancelEditEmployee/:employeeId", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/edit.html",
controller: "cancelEditEmployeeCtrl"
});
}]);
})();
add.html:-
---------------------
<h2>Add New</h2>
<hr>
<table class="employees-app-table">
<tr>
<td>First Name</td>
<td>
<input type="text" data-ng-model="employee.firstName">
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" data-ng-model="employee.lastName">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="/sites/dev/SiteAssets/employees01/images/save.png" alt="Save" data-ng-click="addEmployee(employee)">
<input type="image" src="/sites/dev/SiteAssets/employees01/images/cancel.png" alt="Cancel" data-ng-click="cancelEditEmployee(employee)">
</td>
</tr>
</table>
all.html:-
---------------------
<div class="all-employees">
<table>
<tbody>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
<tr data-ng-repeat="employee in employees">
<td>{{employee.FirstName}}</td>
<td>{{employee.LastName}}</td>
<td>
<a href="#/editEmployee/{{employee.ID}}"><img src="/sites/dev/SiteAssets/employees01/images/edit.png" alt="Edit"></a>
<a href="" data-ng-click="removeEmployee(employee)"><img src="/sites/dev/SiteAssets/employees01/images/delete.png" alt="Delete"></a>
</td>
</tr>
</tbody>
</table>
</div>
<a href="#/addEmployee" class="add-new-button">Add New Employee</a>
edit.html:-
---------------------
<h2>Edit</h2>
<hr>
<table class="employees-app-table">
<tr>
<td>First Name</td>
<td><input type="text" data-ng-model="employee.firstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" data-ng-model="employee.lastName"></td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="/sites/dev/SiteAssets/employees01/images/save.png" alt="Save" data-ng-click="editEmployee(employee)">
<input type="image" src="/sites/dev/SiteAssets/employees01/images/cancel.png" alt="Cancel" data-ng-click="cancelEditEmployee(employee)">
</td>
</tr>
</table>
Employees.txt:-
---------------------
<link
href="/sites/dev/SiteAssets/employees01/css/style.css"
rel="stylesheet" type="text/css">
<script
src="/sites/dev/SiteAssets/employees01/lib/angular.min.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/lib/angular-route.min.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/app.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/services/baseSvc.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/services/employees/employees.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/all.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/add.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/edit.js"
type="text/javascript"></script>
<div
data-ng-app="EmployeesApp">
<div data-ng-view
class="employees-app"></div>
</div>
Step 4:-
---------------------
Upload these files into Site Assets.
Step 5:-
---------------------
Create a page and add Content Editor Webpart and
Step 6:-
---------------------
Test the application.
