SharePoint online CRUD Operation using pnp-JS-Core


Krishna KV
Team Leader, Aspire Systems
Published On :   25 Jul 2016
Visit Count
Today :  1    Total :   11096
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

Protect Your SharePoint