در این مقاله، من چند چیز مانند ویرایش درون خطی، شبیه سازی موارد ردیف و به روز رسانی آنها به لیست های شیرپوینت با استفاده از AngularJS را شرح داده ام. پس از مرور جدول پویا AngularJS با عمل افزودن/حذف ، جدول را ایجاد کرده ایم اما محتوای پویا از لیست شیرپوینت واکشی شده است. برای ارتباط با شیرپوینت از AngularJS، ما از اسکریپت های این مقاله استفاده کرده ایم . بدون توقف در آنجا، ما به پیاده سازی ویرایش/به روز رسانی درون خطی و به دنبال آن تلاش برای شبیه سازی یک ردیف ادامه دادیم. در نهایت، همه چیز را می توان به لیست شیرپوینت به روز کرد.
مراحلی که باید دنبال کرد
- ساختار پروژه MVC را با استفاده از مقاله AngularJS در قسمت وب ویرایشگر محتوا ایجاد کنید.
- همانطور که در مرحله 1 ذکر شد یک لیست شیرپوینت ایجاد کنید.
- برای استقرار فایلها در شیرپوینت، من مقداری از PowerShell گرفتم و برای کپی کردن فایلهای AngularJS در SharePoint Style Library (پیوست) تغییر دادم.
- کد منبع پیوست شده است که شامل اسکریپت هایی برای ایجاد PDF و آپلود PDF در شیرپوینت است .
- نمای AngularJS مانند شکل زیر ایجاد می شود.
ایجاد نمای AngularJS
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>
مسیر
- //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"
- });
- }]);
- })();
کنترل کننده
- "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);
- });
- };
سرویسها REST API را برای بهروزرسانی مقادیر در فهرست شیرپوینت فراخوانی میکنند.
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;
- };
امیدوارم این مقاله برای توسعه دهندگان AngularJS و SharePoint مفید باشد.