SPFX CRUD operation code using pnp JS
Implemented Site URL:
https://mercedessaga.sharepoint.com/sites/teja_dev/SitePages/SPFX-CRUD-operation-using-PnP-Js.aspx
CODE
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './SppnpcruddemoWebPart.module.scss';
import * as strings from 'SppnpcruddemoWebPartStrings';
import * as pnp from 'sp-pnp-js';
export interface ISppnpcruddemoWebPartProps {
description: string;
}
export default class SppnpcruddemoWebPart extends BaseClientSideWebPart<ISppnpcruddemoWebPartProps> {
public render(): void {
this.domElement.innerHTML = `
<div>
<h1>Enter Software ID to fetch its details</h1>
<input type='text' id='txtID'/>
<input type='submit' value='Read details' id='btnRead'/>
<br/>
<h1>Create Item in SP List Software Catalog</h1></br>
<table border="1" width="100%">
<tr>
<td><p>Software Title<p></td>
<td><input type='text' id='txtSoftwareTitle'/></td>
</tr>
<tr>
<td><p>Software Name<p></td>
<td>
<input type='text' id='txtSoftwareName'/>
</td>
</tr>
<tr>
<td>
<p>Software Vendor<p>
</td>
<td>
<select id='ddlSoftwareVendor'>
<option value='Microsoft'>Microsoft</option>
<option value='Oracle'>Oracle</option>
<option value='Google'>Google</option>
<option value='IBM'>IBM</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Software Version<p>
</td>
<td>
<input type='text' id='txtSoftwareVersion'/>
</td>
</tr>
<tr>
<td>
<p>Software Description<p>
</td>
<td>
<textarea rows='5' cols='30' id='txtSoftwareDescription'></textarea>
</td>
</tr>
<tr>
<td>
<input type='submit' value='Insert Item' id='btnSubmit'/>
<input type='submit' value='Update Item' id='btnUpdate'/>
<input type='submit' value='Delete Item' id='btnDelete'/>
<input type='submit' value='Show All Item' id='btnReadAll'/>
</td>
</tr>
</table>
<div id='divStatus' class="${styles.divStatusClass}"></div>
<h1>Get All List Items</h1>
<div id='spListData'/>
</div>`;
this.bindEvents();
this.readAllItems();
}
private bindEvents():void {
this.domElement.querySelector('#btnSubmit').addEventListener('click',()=>{
this.addListItem();
});
this.domElement.querySelector('#btnRead').addEventListener('click',()=>{
this.readListItem();
});
this.domElement.querySelector('#btnUpdate').addEventListener('click',()=>{
this.updateListItem();
});
this.domElement.querySelector('#btnReadAll').addEventListener('click',()=>{
this.readAllItems();
});
this.domElement.querySelector('#btnDelete').addEventListener('click',()=>{
this.deleteListItem();
});
}
private addListItem():void {
var softwaretitle = document.getElementById('txtSoftwareTitle')['value'];
var softwarename = document.getElementById('txtSoftwareName')['value'];
var softwareversion = document.getElementById('txtSoftwareVersion')['value'];
var softwarevendor = document.getElementById('ddlSoftwareVendor')['value'];
var softwareDescription = document.getElementById('txtSoftwareDescription')['value'];
const siteurl: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('SoftwareCatalog')/items";
pnp.sp.web.lists.getByTitle("SoftwareCatalog").items.add({
"Title":softwaretitle,
"SoftwareVendor":softwarevendor,
"SoftwareDescription":softwareDescription,
"SoftwareName":softwarename,
"SoftwareVersion":softwareversion
}).then(r=>{
alert("added successfully");
this.clear();
});
}
private readListItem():void {
let id: number = document.getElementById("txtID")["value"];
pnp.sp.web.lists.getByTitle('SoftwareCatalog').items.getById(id).get().then((item:any)=>{
document.getElementById("txtSoftwareTitle")["value"]=item.Title;
document.getElementById("txtSoftwareName")["value"]=item.SoftwareName;
document.getElementById("ddlSoftwareVendor")["value"]=item.SoftwareVendor;
document.getElementById("txtSoftwareVersion")["value"]=item.SoftwareVersion;
document.getElementById("txtSoftwareDescription")["value"]=item.SoftwareDescription;
});
}
private updateListItem():void {
var softwaretitle = document.getElementById('txtSoftwareTitle')['value'];
var softwarename = document.getElementById('txtSoftwareName')['value'];
var softwareversion = document.getElementById('txtSoftwareVersion')['value'];
var softwarevendor = document.getElementById('ddlSoftwareVendor')['value'];
var softwareDescription = document.getElementById('txtSoftwareDescription')['value'];
let id: number = document.getElementById("txtID")['value'];
const siteurl: string = this.context.pageContext.site.absoluteUrl + "/_api/web/lists/getbytitle('SoftwareCatalog')/items("+id+")";
pnp.sp.web.lists.getByTitle('SoftwareCatalog').items.getById(id).update({
"Title":softwaretitle,
"SoftwareVendor":softwarevendor,
"SoftwareDescription":softwareDescription,
"SoftwareName":softwarename,
"SoftwareVersion":softwareversion
}).then(r=>{
alert("Updated successfully");
this.clear();
});
}
private readAllItems():void{
let html: string = '<table border="1" width="100%" style="border-collapse:collapse;">';
html += '<th>ID</th><th>Title</th><th>Vendor</th><th>Description</th><th>Name</th><th>Version</th>';
pnp.sp.web.lists.getByTitle('SoftwareCatalog').items.get().then((items:any[])=>{
items.forEach(function(item){
html += `<tr>
<td>${item.Id}</td>
<td>${item.Title}</td>
<td>${item.SoftwareVendor}</td>
<td>${item.SoftwareDescription}</td>
<td>${item.SoftwareName}</td>
<td>${item.SoftwareVersion}</td>
</tr>`;
});
html += `</table>`;
const allitems : Element = this.domElement.querySelector("#spListData");
allitems.innerHTML = html;
});
}
private deleteListItem():void {
let id: number = document.getElementById("txtID")['value'];
pnp.sp.web.lists.getByTitle('SoftwareCatalog').items.getById(id).delete();
alert("Deleted Successfully");
}
private clear():void {
document.getElementById("txtSoftwareTitle")["value"]='';
document.getElementById("txtSoftwareName")["value"]='';
document.getElementById("txtSoftwareVersion")["value"]='';
document.getElementById("ddlSoftwareVendor")["value"]='';
document.getElementById("txtSoftwareDescription")["value"]='';
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
Comments
Post a Comment