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.