Welcome to the designer blog,
Here we are going to discuss basic CRUD Operations on List Item in SharePoint
2013 & 2016
Step1:
List of REST
request properties used in this article:
1.URL: This is the REST resource endpoint URL.
2. Method/Type (GET, POST):
It’s an HTTP request
method, where GET is for reading operations and POST is for write operations. The
POST can perform updates or delete
operations by giving a DELETE, MERGE verb
in the X-HTTP-Method header.
3. Data/Body:
This will be used in POST requests where we want to send data in the request body.
4. Headers:
X-RequestDigest:
If you aren’t using OAuth to authorize your requests, creating, updating, and deleting SharePoint
X-RequestDigest:
If you aren’t using OAuth to authorize your requests, creating, updating, and deleting SharePoint
entities require the server’s
request form digest value as the value of the X-RequestDigest
header.SharePoint-hosted add-ins can get the value from the #__REQUESTDIGEST
page control
available on the SharePoint page.
Accept:
The Accept header specifies the format of response data from the server. The default format is
The Accept header specifies the format of response data from the server. The default format is
application/atom+xml. Here we will be using
"accept":"application/json;odata=verbose"
which can
be parsed easily.
Content-type:
The Content-type header specifies the format of the data that the client is sending to the server. The
Content-type:
The Content-type header specifies the format of the data that the client is sending to the server. The
default format is
application/atom+xml. Here we will be
using"content-
type":"application/json;odata=verbose".
type":"application/json;odata=verbose".
IF-MATCH:
This will used in POST requests for DELETE, MERGE, or PUT operations for changing lists and
libraries.
It provides a way to verify that the object being changed has not been changed
since it was
last retrieved. Or, lets you specify to overwrite any changes, as shown in the following Ex: "IF-
MATCH":"*".
last retrieved. Or, lets you specify to overwrite any changes, as shown in the following Ex: "IF-
MATCH":"*".
X-HTTP-Method:
This method will be used in POST requests for DELETE, MERGE, or PUT operations.Used to specify
that the request performs an Update or Delete operation. Ex: "X-HTTP-Method":"MERGE
This method will be used in POST requests for DELETE, MERGE, or PUT operations.Used to specify
that the request performs an Update or Delete operation. Ex: "X-HTTP-Method":"MERGE
Usage of the above properties:
Apart from all these properties there is another important object called
“spPageContextInfo”.This is very helpful when writing SP JavaScript code. It’s
a simple object which you can find on every SharePoint page.This object is
containing many properties which we can directly use in our code. Let’s see few
of its properties.
- webServerRelativeUrl
- webAbsoluteUrl
- siteAbsoluteUrl
- serverRequestPath
- layoutsUrl
- webTitle
- webTemplate
- webLanguage
- currentLanguage
- currentCultureName
- userId
- userLoginName
- systemUserKey
- alertsEnabled
- siteServerRelativeUrl Etc.,
Among all the properties
for this article I am going to use siteAbsoluteUrl to get my site url.
Now let’s start working on CRUD operations one by one. We are going to use simple HTML and JavaScript in this article for easy understanding.
In this article I have used a custom list called “EmployeeList” which contains few basic columns as below.
Now let’s start working on CRUD operations one by one. We are going to use simple HTML and JavaScript in this article for easy understanding.
In this article I have used a custom list called “EmployeeList” which contains few basic columns as below.
Step2:
Create a Employee list in SharePoint as below
Step3:
Create an HTML mark-up
with Add, Edit, Delete and update and named as Crud.txt.
And attached the file by adding content editor webpart.
/sites/MyCompany/Style Library/stepbystep/crud.txt
CRUD.TXT - HTML Markup
<html>
<head>
<title></title>
<script type="text/javascript" src="../../MyCompany/Style Library/stepbystep/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"/>
<link href="../../MyCompany/Style Library/stepbystep/css/App.css" rel="stylesheet" />
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../MyCompany/Style Library/stepbystep/App.js"></script>
</head>
<body>
<div class="container">
<div id="row4" class="row nopadding ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-horizontal padLeftRight">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">
<div class="announcment paddingwebpart " style="background:white;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">
<h5 id="BtnAlign">
<a class="addbtn" target="_blank" style="color:white; text-decoration:none" data-target="#ModalForNewProject" data-toggle="modal">New Employee</a>
</h5>
<br>
</div>
<table id="subsiteList" class="table table-striped table-bordered">
<thead>
<tr>
<th>Employee Name</th>
<th>Designation</th>
<th>Address</th>
<th>Email</th>
<th>Blood Group</th>
<th>Emergency Contact</th>
<th>Mobile</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ModalForNewProject" role="dialog" title="Create new Project">
<div class="modal-dialog">
<fieldset>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">
<h5 class="contributtitle">Add Employee Information</h5>
</div>
</fieldset>
<div id="ModelBody">
<div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">
<fieldset id="bodymodal">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtempname" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtdesignation" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">
<input type="text" id="txtemail" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">
<input type="text" id="txtmobile" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">
<input type="text" id="txtbloodgrp" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">
<input type="text" id="txtaddress" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">
<input type="text" id="txtemergency" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-lg-offset-7 col-lg-2 cls-divbtn ">
<input class="cls-savecancel" id="btnsave" type="button" data-dismiss="modal" onclick="createListItem();" value="Submit" />
</div>
<div class="col-lg-2 col-lg-offset-1">
<input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" />
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!-- update modal -->
<div class="modal fade" id="ModalForUpdateEmployee" role="dialog" title="Update New Employee">
<div class="modal-dialog">
<fieldset>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">
<h5 class="contributtitle">Update Employee Information</h5>
</div>
</fieldset>
<div id="ModelBody">
<div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">
<fieldset id="bodymodal">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >Employee Name
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtempnames" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtdesignations" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtemails" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtmobiles"/>
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtbloodgrps" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtaddresss"/>
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact
<span class="red">*</span>
</label>
<label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought" >
<input type="text" id="txtemergencys" />
</label>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
<div class="col-lg-offset-7 col-lg-2 cls-divbtn ">
<input class="cls-savecancel" id="btnupdate" type="button" data-dismiss="modal" onclick="update(uid);" value="Submit" />
</div>
<div class="col-lg-2 col-lg-offset-1">
<input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" />
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!--end-->
</div>
</body>
</html>
Step3:
Writing a
JavaScript function for READ, WRITE,
DELETE and UPDATE in APP.JS
APP.Js
$(document).ready(function(){
getItemsList();
});
var uid;
Edit Function:
function edit(Id) {
var Id;
var urls = _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items(" + Id + ")";
$.ajax({
async: true,
url : urls,
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
},
success: function (data) {
var eName = $('#txtempnames').val(data.d.EmployeeName);
var eDesg = $('#txtdesignations').val(data.d.Designation);
var eEmail = $('#txtemails').val(data.d.Email);
var eMobile = $('#txtmobiles').val(data.d.Mobile);
var eBloodGroup = $('#txtbloodgrps').val(data.d.BloodGroup);
var eComAddress = $('#txtaddresss').val(data.d.CommunicationAddress);
var eEmergency = $('#txtemergencys').val(data.d.EmergencyContact);
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
uid = Id;
}
Update Function:
function update(uid) {
var eName = $('#txtempnames').val();
var eDesg = $('#txtdesignations').val();
var eEmail = $('#txtemails').val();
var eMobile = $('#txtmobiles').val();
var eBloodGroup = $('#txtbloodgrps').val();
var eComAddress = $('#txtaddresss').val();
var eEmergency = $('#txtemergencys').val();
//var urls = appweburl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('EmployeeList')/items('" + uid + "')?@target='" + hostweburl + "'";
var urls = _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items(" + uid + ")";
$.ajax({
type: "POST",
url:urls,
method: "POST",
data: JSON.stringify({
'__metadata': {
'type': 'SP.Data.EmployeeListListItem'
},
'EmployeeName': eName,
'Designation': eDesg,
'Email': eEmail,
'Mobile': eMobile,
'BloodGroup': eBloodGroup,
'CommunicationAddress': eComAddress,
'EmergencyContact': eEmergency
}),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
// "X-RequestDigest": formDigest,
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "MERGE"
},
success: function(data) {
console.log(data);
swal("Item Updated successfully", "success");
if ($.fn.DataTable.isDataTable('#subsiteList')) {
$('#subsiteList').DataTable().destroy();
}
$('#subsiteList tbody').empty();
getItemsList();
},
error: function (error) {
alert(error);
console.log(JSON.stringify(error));
}
})
}
Delete Functions:
function deleteItem(uid) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items("+ uid + ")",
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "DELETE"
},
success: function (data) {
swal("Deleted!", "Item Deleted successfully", "success");
if ($.fn.DataTable.isDataTable('#subsiteList')) {
$('#subsiteList').DataTable().destroy();
}
$('#subsiteList tbody').empty();
getItemsList();
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
}
getItemsList Function:
function getItemsList() {
$.ajax({
async: true,
url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items",
type: "GET",
headers: {"accept": "application/json;odata=verbose"},
success: function (data) {
//if (data.d.results) {
//var object = data.d.results;
data = data.d.results;
$.each(data, function(index, value) {
debugger;
var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>"
+ value.Email + "</td><td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td><td>"
+ value.EmergencyContact + "</td><td>" + value.Mobile +
"</td><td><a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'><img src='../Images/003-edit-document.png'></a></td><td><a href='#' onclick='deleteItem(" + value.Id + ")'><img src='../Images/001-delete.png'></a></td></tr>";
$('.table tbody').append(html); //Append the HTML
});
var table = $('#subsiteList').DataTable({"bDestroy": true }); //initialize the data
},
error: function (xhr,text_status) {
alert(xhr.status + ": " + xhr.statusText);
}
});
}
CreateListItem Function:
function createListItem() {
var url = _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items";
console.log(url);
var eName = $('#txtempname').val();
var eDesg = $('#txtdesignation').val();
var eEmail = $('#txtemail').val();
var eMobile = $('#txtmobile').val();
var eBloodGroup = $('#txtbloodgrp').val();
var eComAddress = $('#txtaddress').val();
var eEmergency = $('#txtemergency').val();
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/Hr/_api/web/lists/getbytitle('EmployeeList')/items",
type: "POST",
// headers: {"accept": "application/json;odata=verbose"},
data : JSON.stringify({
'__metadata': {
'type': 'SP.Data.EmployeeListListItem' // it defines the ListEnitityTypeName
},
//Pass the parameters
'EmployeeName': eName,
'Designation': eDesg,
'Email': eEmail,
'Mobile': eMobile,
'BloodGroup': eBloodGroup,
'CommunicationAddress': eComAddress,
'EmergencyContact': eEmergency
}),
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "POST"
},
success: function (data) {
debugger;
console.log(data);
debugger;
$('#txtempname').val("");
$('#txtdesignation').val("");
$('#txtemail').val("");
$('#txtmobile').val("");
$('#txtbloodgrp').val("");
$('#txtaddress').val("");
$('#txtemergency').val("");
if ($.fn.DataTable.isDataTable('#subsiteList')) {
$('#subsiteList').DataTable().destroy();
}
$('#subsiteList tbody').empty();
getItemsList();
},
error: function (xhr, text_status) {
alert(xhr.status + ": " + xhr.statusText);
}
});
}
Step4:
Enjoy Folks
Taken Reference from below link and developed by my own
Taken Reference from below link and developed by my own
https://www.c-sharpcorner.com/article/basic-crud-operations-on-list-item-in-sharepoint-2013/?authorFollow=true-9b7728-article&name=rajitha-alluri2
No comments:
Post a Comment