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

Post a Comment

Popular posts from this blog

My Interview Experience

-
 CTS Is thier any other way to host webjobs insted of Azure? What is the another way to send Email in online insted of timer job? What is the Default item limit with out top parameter? How can you pull the items more than 5000 thousand Threshhold value of list in online and 2016 and 2013 How to we get Personor Grup field How do we set Status icons in a list using Column Formating Explain about Timer job? What is Content Type? what if i add more colomuns in parent content type does this reflect in child Content Type? How can we set as default master? How do you move the document from one libray to another lib what class u used in your coding How to you run SP Security.reunwith elivated privilages in SharePoint Designer CGI How do Filter Managed Metadata filed falue in RestAPI How do you get multiple users in PersonorUser Group Fiels using Rest API, How do you get Description filed value in RestAPI can we write camel querries in Rest API how do you pass camel querry in Rest api What is t
Read more

React Checkbox Control SPFx

-
Interface Step 1 export   interface   ITechnologies {      technology ?: chkTechnology [],      checkboxSlectedValues ?: string } export   interface   chkTechnology {      name : string ,      isChecked : boolean ,      lable : string ,      cssClass ?: any } .tsx file Step 2 import  {  Label  }  from   'office-ui-fabric-react/lib/Label' import  {  Checkbox  }  from   'office-ui-fabric-react/lib/Checkbox' ; import  {  ITechnologies ,  chkTechnology  }  from   './ICheckBoxControlstates' Step 3 public   constructor ( prop :  ICheckBoxControlProps ,  any ) {      super ( prop );      this . state  = {        checkboxSlectedValues :   "" ,        technology :  [         {            lable :   "Sharepoint" ,            name :   "Sharepoint" ,            isChecked :   false ,            cssClass :   styles . chkControl         },         {            lable :   "SPFx" ,            name :   "SPFx" ,            isChecked
Read more