SharePoint online CRUD Operation using pnp-JS-Core

Krishna KV
 
Team Leader, Aspire Systems
July 25, 2016
 
Rate this article
 
Views
15935

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

Author Info

Krishna KV
 
Team Leader, Aspire Systems
 
Rate this article
 
Krishna K.V has been working in IT Industry for over 7+ years. He holds a Master Degree in Information Technology. He is more interested to learn and share new technologies, ...read more
 

Leave a comment