CRUD operation in SharePoint Online using REST, AngularJS
Step 1:-
---------------------
Create custom list as "Employees"
Step 2:-
Step 3:-
Step 1:-
---------------------
Create custom list as "Employees"
Step 2:-
---------------------
Create Folder structure as below format.
Use below images for edit, delete, cancel buttons.
---------------------
Update below code.
style.css:-
---------------------
.all-employees table{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
border: 1px solid #999999;
}
.all-employees table th{
font-size: 1.4em;
text-align: left;
padding: 5px;
text-align: center;
border-right: 1px solid #999999;
}
.all-employees table td{
font-size: 1.2em;
border: 1px solid #999999;
padding: 5px;
text-align: center;
}
.all-employees{
margin-top: 17px;
}
.add-new-button{
background-color: rgb(55, 139, 202);
padding: 8px;
color: white;
}
.add-new-button:visited{
color: white;
}
.employees-app{
width: 800px;
}
.employees-app-table{
width: 100%;
}
.employees-app-table input[type=text], textarea{
width: 50%!important;
}
.employees-app-table input[type=button]{
margin: 0!important;
}
add.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("addEmployeeCtrl",
["$scope", "employeesService","$location",
function ($scope, employeesService,$location) {
$scope.addEmployee = function (employee) {
employeesService.addNew(employee)
.then(function(response){
console.log(response);
$location.path("/");
});
};
}]);
})();
all.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("allEmployeesCtrl",
["$scope", "employeesService",
function ($scope, employeesService) {
employeesService.getAll()
.then(function (response) {
$scope.employees =
response.d.results;
});
$scope.removeEmployee = function(employee){
if (confirm(" Are you sure want to delete " + employee.FirstName + "
" + employee.LastName + " ?"))
{
employeesService.remove(employee.ID)
.then(function(response){
var employeeIndex =
$scope.employees.indexOf(employee);
$scope.employees.splice(employeeIndex,1);
});
}
};
}]);
})();
cancel.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("cancelEditEmployeeCtrl", ["$scope", "employeesService",
function ($scope, employeesService) {
employeesService.cancelRequest()
.then(function (response) {
$scope.employees =
response.d.results;
});
$scope.removeEmployee = function(employee){
employeesService.remove(employee.ID)
.then(function(response){
var employeeIndex =
$scope.employees.indexOf(employee);
$scope.employees.splice(employeeIndex,1);
});
};
}]);
})();
edit.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.controller("editEmployeeCtrl",
["$scope", "employeesService", "$routeParams","$location",
function ($scope,
employeesService, $routeParams,$location) {
employeesService.getById($routeParams.employeeId)
.then(function (response) {
$scope.employee
= {
employeeId
: response.d.ID,
firstName:
response.d.FirstName,
lastName:
response.d.LastName
};
$scope.editEmployee
= function(employee){
employeesService.update(employee)
.then(function(response){
$location.path("/");
});
};
});
}]);
})();
employees.js:-
---------------------
"use
strict";
(function(){
angular.module("EmployeesApp")
.factory("employeesService",["baseSvc",function(baseService){
var listEndPoint = '/_api/web/lists';
var getAll = function(){
var query = listEndPoint + "/GetByTitle('Employees')/Items?$select=ID,FirstName,LastName";
return
baseService.getRequest(query);
};
var addNew = function(employee){
var data = {
__metadata: { 'type': 'SP.Data.EmployeesListItem'
},
FirstName :
employee.firstName,
LastName :
employee.lastName
};
var url = listEndPoint + "/GetByTitle('Employees')/Items";
return
baseService.postRequest(data,url);
};
var getById = function(employeeId){
var query = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employeeId+")?$select=ID,FirstName,LastName";
return
baseService.getRequest(query);
};
var update = function (employee){
var data = {
__metadata: { 'type': 'SP.Data.EmployeesListItem'
},
FirstName :
employee.firstName,
LastName :
employee.lastName
};
var url = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employee.employeeId+")";
return
baseService.updateRequest(data,url);
};
var remove = function(employeeId){
var url = listEndPoint + "/GetByTitle('Employees')/GetItemById("+employeeId+")";
return
baseService.deleteRequest(url);
};
var cancel = function(){
var query = listEndPoint + "/GetByTitle('Employees')/Items?$select=ID,FirstName,LastName";
return
baseService.cancelRequest(query);
};
return{
getAll:getAll,
addNew:addNew,
getById:getById,
update:update,
remove:remove,
cancel:cancel
};
}]);
})();
baseSvc.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp")
.factory("baseSvc", ["$http", "$q", function ($http, $q) {
var baseUrl = _spPageContextInfo.webAbsoluteUrl;
var getRequest = function (query) {
var deferred = $q.defer();
$http({
url: baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var postRequest = function (data, url) {
var deferred = $q.defer();
$http({
url: baseUrl + url,
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest":
document.getElementById("__REQUESTDIGEST").value,
"content-Type": "application/json;odata=verbose"
},
data: JSON.stringify(data)
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var updateRequest = 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);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var deleteRequest = 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);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var cancelRequest = function (query) {
var deferred = $q.defer();
$http({
url: baseUrl + query,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
return {
getRequest: getRequest,
postRequest: postRequest,
updateRequest: updateRequest,
deleteRequest:deleteRequest,
cancelRequest:cancelRequest
};
}]);
})();
app.js:-
---------------------
"use
strict";
(function () {
angular.module("EmployeesApp",
["ngRoute"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/all.html",
controller: "allEmployeesCtrl"
}).when("/addEmployee",
{
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/add.html",
controller: "addEmployeeCtrl"
}).when("/editEmployee/:employeeId", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/edit.html",
controller: "editEmployeeCtrl"
}).when("/cancelEditEmployee/:employeeId", {
templateUrl: "/sites/dev/SiteAssets/employees01/templates/employees/edit.html",
controller: "cancelEditEmployeeCtrl"
});
}]);
})();
add.html:-
---------------------
<h2>Add New</h2>
<hr>
<table class="employees-app-table">
<tr>
<td>First Name</td>
<td>
<input type="text" data-ng-model="employee.firstName">
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" data-ng-model="employee.lastName">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="/sites/dev/SiteAssets/employees01/images/save.png" alt="Save" data-ng-click="addEmployee(employee)">
<input type="image" src="/sites/dev/SiteAssets/employees01/images/cancel.png" alt="Cancel" data-ng-click="cancelEditEmployee(employee)">
</td>
</tr>
</table>
all.html:-
---------------------
<div class="all-employees">
<table>
<tbody>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
<tr data-ng-repeat="employee in employees">
<td>{{employee.FirstName}}</td>
<td>{{employee.LastName}}</td>
<td>
<a href="#/editEmployee/{{employee.ID}}"><img src="/sites/dev/SiteAssets/employees01/images/edit.png" alt="Edit"></a>
<a href="" data-ng-click="removeEmployee(employee)"><img src="/sites/dev/SiteAssets/employees01/images/delete.png" alt="Delete"></a>
</td>
</tr>
</tbody>
</table>
</div>
<a href="#/addEmployee" class="add-new-button">Add New Employee</a>
edit.html:-
---------------------
<h2>Edit</h2>
<hr>
<table class="employees-app-table">
<tr>
<td>First Name</td>
<td><input type="text" data-ng-model="employee.firstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" data-ng-model="employee.lastName"></td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="/sites/dev/SiteAssets/employees01/images/save.png" alt="Save" data-ng-click="editEmployee(employee)">
<input type="image" src="/sites/dev/SiteAssets/employees01/images/cancel.png" alt="Cancel" data-ng-click="cancelEditEmployee(employee)">
</td>
</tr>
</table>
Employees.txt:-
---------------------
<link
href="/sites/dev/SiteAssets/employees01/css/style.css"
rel="stylesheet" type="text/css">
<script
src="/sites/dev/SiteAssets/employees01/lib/angular.min.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/lib/angular-route.min.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/app.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/services/baseSvc.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/services/employees/employees.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/all.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/add.js"
type="text/javascript"></script>
<script
src="/sites/dev/SiteAssets/employees01/js/controllers/employees/edit.js"
type="text/javascript"></script>
<div
data-ng-app="EmployeesApp">
<div data-ng-view
class="employees-app"></div>
</div>
Step 4:-
---------------------
Upload these files into Site Assets.
Step 5:-
---------------------
Create a page and add Content Editor Webpart and
Step 6:-
---------------------
Test the application.
This comment has been removed by a blog administrator.
ReplyDeleteCreating an employee management interface with AngularJS and a custom SharePoint list involves separating the application into controllers, services, and reusable components. The addEmployeeCtrl controller handles the submission of employee data, while the service layer can communicate with the SharePoint list to create new employee records. This structure keeps the application organized and makes CRUD operations easier to maintain.
DeleteFor developers working with modern frontend technologies, Javascript Online Course provides a strong foundation in JavaScript concepts that support client-side application development, API communication, and dynamic interfaces.
For backend API concepts and service-oriented application development, FastAPI Course can help developers understand REST API design and structured client-server communication, which are useful when building applications that manage employee and other business data.
Delete295A7094AE
ReplyDeletehacker kiralama
kiralık hacker
tütün dünyası
hacker bulma
hacker kirala
9EE06A9F85
ReplyDeleteTakipçi Satın Al
Vodka Fiyatları
MMORPG