SharePoint online CRUD Operation using pnp-JS-Core


Krishna KV
Team Leader, Aspire Systems
Published On :   25 Jul 2016
Visit Count
Today :  1    Total :   9374



The Patterns and Practices JavaScript Core Library is an open source project which helps the developers to simplify the code instead of writing multiple lines of code for the common SharePoint operations. It was written in typescript; we can use this to develop the application using typescript / JavaScript

To know more about the PNP JS core https://github.com/OfficeDev/PnP-JS-Core

Before starting the code and we should have the below JS Files.

Fetch.js https://github.com/github/fetch/blob/master/fetch.js

es6-promise.js https://github.com/stefanpenner/es6-promise/blob/master/dist/lib/es6-promise.js

pnp.js https://github.com/OfficeDev/PnP-JS-Core/blob/master/dist/pnp.js

angular JS.

Alternatively, we can use npm package “npm install sp-pnp-js --save-dev”

Angular Service (PNP)

 (function () {
     app.service('appService', ['$http','$q',function ($http,$q) {
         function getUrlParamByName(name) {
             name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
             var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
             var results = regex.exec(location.search);
             return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
         }
         var appWebUrl =getUrlParamByName("SPAppWebUrl");
         var hostWebUrl =getUrlParamByName("SPHostUrl");
 
         this.getProjects=function() {
             var d = $q.defer();
             $pnp.sp.crossDomainWeb(appWebUrl, hostWebUrl).lists.getByTitle('Projects').items.get().then(function(response) {
                 d.resolve(response);
             });
           return d.promise;
         }
 
 
         this.addProject=function(project) {
             var d = $q.defer();
             $pnp.sp.crossDomainWeb(appWebUrl, hostWebUrl).lists.getByTitle('Projects').items.add(project).then(function(response) {
                 d.resolve(response);
             });
             return d.promise;
         }
 
         this.deleteProject=function(id) {
             var d = $q.defer();
             $pnp.sp.crossDomainWeb(appWebUrl, hostWebUrl).lists.getByTitle('Projects').items.getById(id).delete().then(function (response) {
                 d.resolve(response);
             });
             return d.promise;
 
         }
 
         this.updateProject = function(project) {
             var d = $q.defer();
             $pnp.sp.crossDomainWeb(appWebUrl, hostWebUrl).lists.getByTitle('Projects').items.getById(project.Id).update({Technology:project.Technology}).then(function (response) {
                 d.resolve(response);
             });
             return d.promise;
         };
     }]);
 })();

Angular Controller

 (function () {
     app.controller('projectCtrl', ['$scope', 'appService', function ($scope, appService) {
         $scope.title = "test";
         
         $scope.getProjects = function () {
             appService.getProjects().then(function(response) {
                 $scope.title = "welcome";
                 $scope.projects = response;
             });
         };
 
         $scope.addProject = function() {
             appService.addProject($scope.project).then(function(response) {
                 $scope.getProjects();
                 $scope.project = {};
             });
         };
 
         $scope.deleteProject=function(id) {
             appService.deleteProject(id).then(function(response) {
                 $scope.getProjects();
             });
         }
 
         $scope.updateProject = function(project) {
             appService.updateProject(project).then(function(response) {
                 $scope.getProjects();
             });
         };
 
         $scope.getProjects();
 
     }]);
 })();

Default.aspx

 <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
     <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
     <meta name="WebPartPageExpansion" content="full" />
     <link href="../Content/bootstrap.css" rel="stylesheet" />
     <script src="../Scripts/angular.min.js"></script>
     <script src="../Scripts/fetch.js"></script>
     <script src="../Scripts/es6-promise.min.js"></script>
     <script src="../Scripts/pnp.js"></script>
     <script src="../App/app.module.js"></script>
     <script src="../App/app.service.js"></script>
     <script src="../App/project.ctrl.js"></script>
 </asp:Content>
 <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
 </asp:Content>
 
 <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
     <div data-ng-app="projectApp">
         <div data-ng-controller="projectCtrl">
             <table class="table table-bordered">
                 <thead>
                     <tr>
                         <th>Project</th><th>Client</th><th>Technology</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr ng-repeat="project in projects">
                         <td>{{project.Title}}</td><td>{{project.Client}}</td>
                
                         <td>
                             <div class="col-sm-6">
                                 <input type="text" ng-model="project.Technology" class="form-control" /></div>
                             <button type="button" class="col-sm-2 btn-default" ng-click="updateProject(project)">Update</button>
                             <button type="button" class="col-sm-2 btn-default" ng-click="deleteProject(project.Id)">Delete</button>
                         </td>
                     </tr>
                 </tbody>
                 <tfoot>
                     <tr>
            <td><input type="text" class="form-control" ng-model="project.Title" /></td>
            <td><input type="text" class="form-control" ng-model="project.Client" /></td>
            <td><div class="col-sm-10">
            <input type="text" class="form-control" ng-model="project.Technology" />
                             </div>
          <button type="button" class="col-sm-2 btn-default" ng-click="addProject()">Add</button>
                         </td>
                     </tr>
                 </tfoot>
             </table>
         </div>
     </div>
 </asp:Content>

image

Categories