Curd Operations using pnp.js
CRUD Opertaions Using pnp-js
Add List Item : Refresh :
Update List Item :
Delete List Item :
Read List Item :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/sites/RD/Style%20Library/AScripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/sites/RD/Style%20Library/AScripts/pnp.js" type="text/javascript"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=OnLoadFunctions&features=es6|always|gated,fetch|always|gated"></script>
<script type="text/javascript">
$(document).ready(function() {
OnLoadFunctions()
$("#btnInsert").on("click",function(e){
InsertListItemPerations();
})
$("#btnUpdate").on("click",function(e){
var itemId=$("#txtUpdate").val();
UpdateListItemOperations(itemId);
$("#txtUpdate").val("");
})
$("#btnRead").on("click",function(e){
var itemId=$("#txtRead").val();
ReadListItemOperations(itemId);
$("#txtRead").val("");
})
$("#btnDelete").on("click",function(e){
var itemId=$("#txtDelete").val();
DeleteListItemOperations(itemId);
$("#txtDelete").val("");
})
$("#btnRefresh").on("click",function(e){
BinfListItemOperations()
$("#txtRead").val("");
$("#txtUpdate").val("");
$("#txtDelete").val("");
$("#ReadMessage").text("");
$("#UpdateMessage").text("");
$("#DeleteMessage").text("");
})
});
function OnLoadFunctions(){
bindSiteTitle();
BinfListItemOperations()
}
function BinfListItemOperations(){
$pnp.sp.web.lists.getByTitle("CRUDList").items
.select('User/Id,User/Title,Title,Technology,Active,Country/Id,Country/Title,HyperLink,ID')
.expand('User,Country')
.get()
.then(listData => {
ConstructHTML(listData)
});
}
function ConstructHTML(data){
var html="<div style='disply-row'>"
html+="<div class='borderCss' style='width:5%'>ID</div>"
html+="<div class='borderCss' style='width:20%'>Title</div>"
html+="<div class='borderCss' style='width:15%'>Technology</div>"
html+="<div class='borderCss' style='width:10%'>CountryId</div>"
html+="<div class='borderCss' style='width:5%'>Active</div>"
html+="<div class='borderCss' style='width:15%'>UserId</div>"
html+="<div class='borderCss' style='width:10%'>HyperLink</div>"
html+="</div>"
$.each(data,function(i,r){
html+="<div style='disply-row'>"
html+="<div class='borderCss' style='width:5%'>"+r.ID+"</div>"
html+="<div class='borderCss' style='width:20%'>"+r.Title+"</div>"
html+="<div class='borderCss' style='width:15%' >"+r.Technology+"</div>"
html+="<div class='borderCss' style='width:10%'>"+r.Country.Title+"</div>"
html+="<div class='borderCss' style='width:5%'>"+r.Active+"</div>"
if(r.User.length>0){
var usrs=""
$.each(r.User,function(i,j){
usrs+=j.Title+","
});
html+="<div class='borderCss' style='width:15%'>"+usrs+"</div>"
}
html+="<div class='borderCss' style='width:10%'><a href='"+r.HyperLink.Url+"'>"+r.HyperLink.Description+"</a></div>"
html+="</div>"
})
$("#ReadMessage").html(html);
}
/********Update List Items usnig pnp-js**********/
function DeleteListItemOperations(ID){
$pnp.sp.web.lists.getByTitle("CRUDList").items.getById(ID).delete().then(r => {
BinfListItemOperations();
document.getElementById("DeleteMessage").innerText = ID+" Item Deleted Successfully";
})
.catch(function(err) {
document.getElementById("DeleteMessage").innerText = "Please Enter ID ";
});
}
/********Update List Items usnig pnp-js**********/
function ReadListItemOperations(ID){
var html="<div style='disply-row'>"
html+="<div class='borderCss' style='width:5%'>ID</div>"
html+="<div class='borderCss' style='width:20%'>Title</div>"
html+="<div class='borderCss' style='width:15%'>Technology</div>"
html+="<div class='borderCss' style='width:10%'>CountryId</div>"
html+="<div class='borderCss' style='width:5%'>Active</div>"
html+="<div class='borderCss' style='width:15%'>UserId</div>"
html+="<div class='borderCss' style='width:10%'>HyperLink</div>"
html+="</div>"
$pnp.sp.web.lists.getByTitle("CRUDList")
.items.getById(ID)
.select('User/Id,User/Title,Title,Technology,Active,Country/Id,Country/Title,HyperLink,ID')
.expand('User,Country')
.get()
.then(r => {
html+="<div style='disply-row'>"
html+="<div class='borderCss' style='width:5%'>"+r.ID+"</div>"
html+="<div class='borderCss' style='width:20%'>"+r.Title+"</div>"
html+="<div class='borderCss' style='width:15%' >"+r.Technology+"</div>"
html+="<div class='borderCss' style='width:10%'>"+r.Country.Title+"</div>"
html+="<div class='borderCss' style='width:5%'>"+r.Active+"</div>"
if(r.User.length>0){
var usrs=""
$.each(r.User,function(i,j){
usrs+=j.Title+","
});
html+="<div class='borderCss' style='width:15%'>"+usrs+"</div>"
}
html+="<div class='borderCss' style='width:10%'><a href='"+r.HyperLink.Url+"'>"+r.HyperLink.Description+"</a></div>"
html+="</div>"
$("#ReadMessage").html(html);
})
.catch(function(err) {
document.getElementById("ReadMessage").innerText = "Please Enter ID";
});
}
/********Update List Items usnig pnp-js**********/
function UpdateListItemOperations(ID){
$pnp.sp.web.lists.getByTitle("CRUDList").items.getById(ID).update({
Title: "My New Item Title Updated"
}).then(r => {
document.getElementById("UpdateMessage").innerText = ID+" Item Updated Successfully";
BinfListItemOperations();
})
.catch(function(err) {
document.getElementById("UpdateMessage").innerText = "Please Enter ID";
});
}
/***********Update List Items usnig pnp-js************/
function InsertListItemPerations() {
$pnp.sp.web.lists.getByTitle("CRUDList").items.add({
Title: "My Item Title",
Technology: "SP2013",
CountryId: 1,
Active:false,
UserId:{
"results": [12]
},
HyperLink: {
"__metadata": { type: "SP.FieldUrlValue" },
Description: "Description",
Url: "https://318studios.sharepoint.com/sites/dev/Style%20Library/DSC_0024.JPG?csf=1&e=3729ff5a8af5402f8158192f61964747"
},
}).then(r => {
BinfListItemOperations();
// this will add an attachment to the item we just created
r.item.attachmentFiles.add("file.txt", "Here is some file content.");
document.getElementById("InsertMessage").innerText = r.data.ID+" Item Created Successfully";
})
.catch(function(err) {
document.getElementById("InsertMessage").innerText = err;
});
}
/******Get the Site Title********/
function bindSiteTitle(){
$pnp.sp.web.select("Title").get()
.then(function(data) {
document.getElementById("divDesc").innerText = data.Title;
})
.catch(function(err) {
document.getElementById("divDesc").innerText = err;
});
// GET /_api/web/lists
$pnp.sp.web.lists.getByTitle("CRUDList").items.get().then(r => {
console.log(r);
})
}
</script>
<style>
.borderCss{
float: left;
border: 1px solid grey;
padding:10px;
display: table-cell;
text-align:center;
}
</style>
Note: I Have used the CRUDList list
Comments