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 -
- < 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 -
- "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;
- });
-
- $scope.addNew = function(personalDetail) {
- var person = angular.copy(personalDetail);
- person.Id = "";
- person.FirstName = "";
- person.LastName = "";
- $scope.personalDetails.push(person);
- };
-
- $scope.remove = function() {
- varnewDataList = [];
- $scope.selectedAll = false;
- angular.forEach($scope.personalDetails, function(selected) {
- if (selected.selected) {
-
- peopleService.remove(selected.Id).then(function(response) {
- console.log(response);
- });
- }
- });
- $scope.$apply();
-
- };
-
- $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
-
- 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);
- }
- };
-
- 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
-
- 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;
- };
-
- 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.