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

SP People Picker Validation

-
pplpicker4.Controls.Clear(); ------>   Used to clear the  peoplepikker  control (it means that clearing the user in people  pikker )   validation message fire when user  cliks  in submit button   Change with  PeoplePicker  ID By Using  Inspactelement ......   <script type="text/ javascript " language=" javascript ">               function  CheckReportsTo (source, arguments) {               if (aspnetForm. ctl00_PlaceHolderMain_pplEHOD _downlevelTextBox.value == "")                     arguments.IsValid = false;               else               ...
Read more

Create multiple web parts in one SPFx Solution

-
Image
Here you can create a multiple web parts in one SPFx Solution. Steps Below sSet the Environment from here Step 2 In this way i have created four web parts, i am not adding all the screen shots of web parts.After  Once you run the below command it will generate the .sppkg file cmd : gulp bundle --ship  cmd : gulp package-solution --ship please find the screen shot for your reference Drag and drop this .sppkg file in your apps for SharePoint library either tenant level/site collection level  screen shot below. After install the web part in site content. screen shot below. Here we have installed only one .sppkg file and it is having four web parts if observe the below screen you see all the web parts in this solution. Now in the web part pane you can see all the web parts inside the solution. final out put in the below screen. Smiles a lot its cost nothing...😄😄😄
Read more

SPFX With Graph API To Pull Azure Active Directory Group Users

-
import  {  Version  }  from   '@microsoft/sp-core-library' ; import  {    IPropertyPaneConfiguration ,    PropertyPaneTextField ,    PropertyPaneDropdown }  from   '@microsoft/sp-property-pane' ; import  {  BaseClientSideWebPart  }  from   '@microsoft/sp-webpart-base' ; import  {  escape  }  from   '@microsoft/sp-lodash-subset' ; import   styles   from   './ActiveDirectoryWebpartWebPart.module.scss' ; import   *   as   strings   from   'ActiveDirectoryWebpartWebPartStrings' ; import   *   as   jquery   from   "jquery" ; import  {  SPHttpClientResponse  }  from   '@microsoft/sp-http' ; import  {  SPWeb ,  SPPermission ,  SPSite ,  SPList  }  from   '@microsoft/sp-page-context' ; let   token ; let  ...
Read more