SPFX CRUD operation code using pnp JS

on




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