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>
Leave a comment