Angular

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

  1. Create MVC project structure, using the article- AngularJS in Content Editor Web Part.

    SharePoint

  2. Create a SharePoint List as mentioned in Step 1.

    SharePoint

  3. To deploy the files to SharePoint, I got some from PowerShell and modified to copy AngularJS files to SharePoint Style Library (Attached).

    SharePoint

  4. Source code is attached that includes scripts for PDF Creation and Upload PDF to SharePoint.
  5. AngularJS view is created, as shown below.

    SharePoint

Creation of the AngularJS view

People-main.txt

  1. <link href="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/css/style.css" rel="stylesheet" type="text/css">  
  2. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular.min.js" type="text/javascript"></script>  
  3. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular-route.min.js" type="text/javascript"></script>  
  4. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/angular-uuid.js" type="text/javascript"></script>  
  5. <script type="text/javascript" src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/pdfmake.js"></script>  
  6. <script type="text/javascript" src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/lib/vfs_fonts.js"></script>  
  7. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/app.js" type="text/javascript"></script>  
  8. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/services/baseSvc.js" type="text/javascript"></script>  
  9. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/services/people/people.js" type="text/javascript"></script>  
  10. <script src="http//w-3427994040/sites/DevSite4POC/Style%20Library/AJProject/js/controllers/people/allinone.js" type="text/javascript"></script> // modified by Madhan Mohan Devarajan  
  11. <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>  
  12.     <div data-ng-view class="people-app"></div> <br/> </div>  
Allinone.html
  1. // modified by Madhan Mohan Devarajan  
  2. < 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"  
  3. data - ng - model = "selectedAll"  
  4. 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"  
  5. data - ng - model = "personalDetail.selected" / > < /td> < td > < inputtype = "text"  
  6. class = "form-control"  
  7. data - ng - model = "personalDetail.FirstName"  
  8. required / > < /td> < td > < inputtype = "text"  
  9. class = "form-control"  
  10. data - ng - model = "personalDetail.LastName"  
  11. required / > < /td> < td > < inputtype = "text"  
  12. class = "form-control"  
  13. data - ng - model = "personalDetail.Address"  
  14. required / > < /td> < td > < inputtype = "button"  
  15. class = "btnbtn-danger pull-right"  
  16. data - ng - click = "updateRecord(personalDetail)"  
  17. value = "Update" / > < inputtype = "button"  
  18. class = "btnbtn-danger pull-right"  
  19. data - ng - click = "addNew(personalDetail)"  
  20. value = "Clone" / > < /td> < /tr> < /tbody> < /table> < br / > < divclass = "form-group" > < inputng - hide = "!personalDetails.length"  
  21. type = "button"  
  22. class = "btnbtn-danger pull-right"  
  23. ng - click = "remove()"  
  24. value = "Remove" / > < inputng - hide = "!personalDetails.length"  
  25. type = "button"  
  26. class = "btnbtn-danger pull-right"  
  27. ng - click = "bulkupdate()"  
  28. value = "Update Records" / > < /div> < /div> < /div> < /div> < /div> < /div> < /div>  
Route
  1. //To map the controller for view  
  2. "use strict";  
  3. (function() {  
  4.     angular.module("peopleApp", ["ngRoute"]).config(["$routeProvider", function($routeProvider) {  
  5.         $routeProvider.when("/", {  
  6.             templateUrl "http//<Server>/sites/<site>/Style%20Library/AJProject/templates/people/allinone.html",  
  7.             controller "allPeopleCtrl"  
  8.         });  
  9.     }]);  
  10. })();  
Controller
  1. "use strict";  
  2. (function() {  
  3.         angular.module("peopleApp").controller("allPeopleCtrl", ["$scope", "peopleService", "$location",  
  4.                     function($scope, peopleService) {  
  5.                         peopleService.getAll().then(function(response) {  
  6.                             $scope.personalDetails = response.d.results;  
  7.                         });  
  8.                         //For cloning  
  9.                         $scope.addNew = function(personalDetail) {  
  10.                             var person = angular.copy(personalDetail);  
  11.                             person.Id = "";  
  12.                             person.FirstName = "";  
  13.                             person.LastName = "";  
  14.                             $scope.personalDetails.push(person);  
  15.                         };  
  16.                         //For deleting  
  17.                         $scope.remove = function() {  
  18.                             varnewDataList = [];  
  19.                             $scope.selectedAll = false;  
  20.                             angular.forEach($scope.personalDetails, function(selected) {  
  21.                                 if (selected.selected) {  
  22.                                     //newDataList.push(selected);  
  23.                                     peopleService.remove(selected.Id).then(function(response) {  
  24.                                         console.log(response);  
  25.                                     });  
  26.                                 }  
  27.                             });  
  28.                             $scope.$apply(); // to apply the changes to Scope  
  29.                             //$scope.personalDetails = newDataList;  
  30.                         };  
  31.                         //For Updating record to SharePoint  
  32.                         $scope.updateRecord = function(personalDetail) {  
  33.                             peopleService.update(personalDetail).then(function(response) {  
  34.                                 console.log(response);  
  35.                             });  
  36.                         };  
Services are calling REST API to update values in SharePoint List.

People.js
  1. // To add or update the clone or in-line edit  
  2. var update = function(person) {  
  3.     var data = {  
  4.         __metadata {  
  5.             'type' 'SP.Data.PeopleListItem'  
  6.         },  
  7.         FirstName person.FirstName,  
  8.         LastName person.LastName,  
  9.         Address person.Address  
  10.     };  
  11.     varurl;  
  12.     if (!person.Id) {  
  13.         url = listEndPoint + "/GetByTitle('People')/Items";  
  14.         returnbaseService.postRequest(data, url);  
  15.     } else {  
  16.         url = listEndPoint + "/GetByTitle('People')/GetItemById(" + person.Id + ")";  
  17.         returnbaseService.updateRequest(data, url);  
  18.     }  
  19. };  
  20. //To remove item  
  21. var remove = function(personId) {  
  22.     varurl = listEndPoint + "/GetByTitle('People')/GetItemById(" + personId + ")";  
  23.     returnbaseService.deleteRequest(url);  
  24. };  
  25. baseSvc.js REST API call to SharePoint is done in this Service  
  26.     // To add or update the clone or in-line edit  
  27. varupdateRequest = function(data, url) {  
  28.     var deferred = $q.defer();  
  29.     $http({  
  30.         url baseUrl + url,  
  31.         method "PATCH",  
  32.         headers {  
  33.             "accept" "application/json;odata=verbose",  
  34.             "X-RequestDigest" document.getElementById("__REQUESTDIGEST").value,  
  35.             "content-Type" "application/json;odata=verbose",  
  36.             "X-Http-Method" "PATCH",  
  37.             "If-Match" "*"  
  38.         },  
  39.         data JSON.stringify(data)  
  40.     }).success(function(result) {  
  41.         deferred.resolve(result);  
  42.         alert("Record updated Successfully");  
  43.     }).error(function(result, status) {  
  44.         deferred.reject(status);  
  45.         alert("Record updated Failed!");  
  46.     });  
  47.     returndeferred.promise;  
  48. };  
  49. //To remove item  
  50. vardeleteRequest = function(url) {  
  51.     var deferred = $q.defer();  
  52.     $http({  
  53.         url baseUrl + url,  
  54.         method "DELETE",  
  55.         headers {  
  56.             "accept" "application/json;odata=verbose",  
  57.             "X-RequestDigest" document.getElementById("__REQUESTDIGEST").value,  
  58.             "IF-MATCH" "*"  
  59.         }  
  60.     }).success(function(result) {  
  61.         deferred.resolve(result);  
  62.         alert("Record deleted Successfully");  
  63.     }).error(function(result, status) {  
  64.         deferred.reject(status);  
  65.         alert("Unable to delete Record!");  
  66.     });  
  67.     returndeferred.promise;  
  68. };  
I hope this article will be useful for AngularJS and SharePoint developers.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs