How To Implement Inline Edit, Clone, And Update in SharePoint List Items Using AngularJS

In this article, I have described a few things, like inline edit, cloning row items, and updating them to SharePoint lists, using AngularJS. After going through AngularJS dynamic table with add/remove action, we have created the table but with the dynamic content fetched from SharePoint list. To connect with SharePoint from AngularJS, we have used the scripts in this article. Without stopping there, we continued to implement in-line edit/ update, followed by trying to clone a row. Finally, everything can be updated to SharePoint List.

Steps to follow

Create MVC project structure, using the article- AngularJS in Content Editor Web Part.
Create a SharePoint List as mentioned in Step 1.
To deploy the files to SharePoint, I got some from PowerShell and modified to copy AngularJS files to SharePoint Style Library (Attached).
Source code is attached that includes scripts for PDF Creation and Upload PDF to SharePoint.
AngularJS view is created, as shown below.

Creation of the AngularJS view

People-main.txt

<link href="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/css/style.css" rel="stylesheet" type="text/css">
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular.min.js" type="text/javascript"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular-route.min.js" type="text/javascript"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular-uuid.js" type="text/javascript"></script>
<script type="text/javascript" src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/pdfmake.js"></script>
<script type="text/javascript" src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/vfs_fonts.js"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/app.js" type="text/javascript"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/services/baseSvc.js" type="text/javascript"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/services/people/people.js" type="text/javascript"></script>
<script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/controllers/people/allinone.js" type="text/javascript"></script> // modified by Madhan Mohan Devarajan
<div data-ng-app="peopleApp" ng-controller='allPeopleCtrl'> <button ng-click="downloadPdf()">Download Pdf</button> <button ng-click="uploadPdf()">Send PDF as Email Attachment</button>
<div data-ng-view class="people-app"></div> <br/> </div>

Allinone.html

// modified by Madhan Mohan Devarajan
< divclass = "all-people" > < divclass = "container" > < divclass = "row" > < divclass = "col-md-12" > < divclass = "panel panel-default" > < divclass = "panel-body" > < tableclass = "table table-striped table-bordered" > < thead > < tr > < th > < inputtype = "checkbox"
data - ng - model = "selectedAll"
ng - click = "checkAll()" / > < /th> < th > Firstname < /th> < th > Lastname < /th> < th > Address < /th> < th > Action < /th> < /tr> < /thead> < tbody > < trdata - ng - repeat = "personalDetail in personalDetails" > < td > < inputtype = "checkbox"
data - ng - model = "personalDetail.selected" / > < /td> < td > < inputtype = "text"
class = "form-control"
data - ng - model = "personalDetail.FirstName"
required / > < /td> < td > < inputtype = "text"
class = "form-control"
data - ng - model = "personalDetail.LastName"
required / > < /td> < td > < inputtype = "text"
class = "form-control"
data - ng - model = "personalDetail.Address"
required / > < /td> < td > < inputtype = "button"
class = "btnbtn-danger pull-right"
data - ng - click = "updateRecord(personalDetail)"
value = "Update" / > < inputtype = "button"
class = "btnbtn-danger pull-right"
data - ng - click = "addNew(personalDetail)"
value = "Clone" / > < /td> < /tr> < /tbody> < /table> < br / > < divclass = "form-group" > < inputng - hide = "!personalDetails.length"
type = "button"
class = "btnbtn-danger pull-right"
ng - click = "remove()"
value = "Remove" / > < inputng - hide = "!personalDetails.length"
type = "button"
class = "btnbtn-danger pull-right"
ng - click = "bulkupdate()"
value = "Update Records" / > < /div> < /div> < /div> < /div> < /div> < /div> < /div>

Route

//To map the controller for view
"use strict";
(function() {
angular.module("peopleApp", ["ngRoute"]).config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/", {
templateUrl "http//<Server>/sites/<site>/Style%20Library/AJProject/templates/people/allinone.html",
controller "allPeopleCtrl"
});
}]);
})();

Controller

"use strict";
(function() {
angular.module("peopleApp").controller("allPeopleCtrl", ["$scope", "peopleService", "$location",
function($scope, peopleService) {
peopleService.getAll().then(function(response) {
$scope.personalDetails = response.d.results;
});
//For cloning
$scope.addNew = function(personalDetail) {
var person = angular.copy(personalDetail);
person.Id = "";
person.FirstName = "";
person.LastName = "";
$scope.personalDetails.push(person);
};
//For deleting
$scope.remove = function() {
varnewDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected) {
if (selected.selected) {
//newDataList.push(selected);
peopleService.remove(selected.Id).then(function(response) {
console.log(response);
});
}
});
$scope.$apply(); // to apply the changes to Scope
//$scope.personalDetails = newDataList;
};
//For Updating record to SharePoint
$scope.updateRecord = function(personalDetail) {
peopleService.update(personalDetail).then(function(response) {
console.log(response);
});
};

Services are calling REST API to update values in SharePoint List.

People.js

// To add or update the clone or in-line edit
var update = function(person) {
var data = {
__metadata {
'type' 'SP.Data.PeopleListItem'
},
FirstName person.FirstName,
LastName person.LastName,
Address person.Address
};
varurl;
if (!person.Id) {
url = listEndPoint + "/GetByTitle('People')/Items";
returnbaseService.postRequest(data, url);
} else {
url = listEndPoint + "/GetByTitle('People')/GetItemById(" + person.Id + ")";
returnbaseService.updateRequest(data, url);
}
};
//To remove item
var remove = function(personId) {
varurl = listEndPoint + "/GetByTitle('People')/GetItemById(" + personId + ")";
returnbaseService.deleteRequest(url);
};
baseSvc.js REST API call to SharePoint is done in this Service
// To add or update the clone or in-line edit
varupdateRequest = 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);
alert("Record updated Successfully");
}).error(function(result, status) {
deferred.reject(status);
alert("Record updated Failed!");
});
returndeferred.promise;
};
//To remove item
vardeleteRequest = 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);
alert("Record deleted Successfully");
}).error(function(result, status) {
deferred.reject(status);
alert("Unable to delete Record!");
});
returndeferred.promise;
};

I hope this article will be useful for AngularJS and SharePoint developers.