0

Using the below SPFx PnP.js code I am doing the CRUD operation in SharePoint online list:

private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}

UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

In the above code AddItem() and UpdateItem() are not working but reading list items and deleting list item are working. I mean I am not able to add new record to the list and update also not getting any errors, getting the successful alert message but it is not adding or updating the items. Any issue with the AddItem() and updateItem() function code....any help will be much appreciated.

Updated

I am not getting any error though it add and update function is not working, by the way I am global administrator.

While clicking on the add button getting the successful alert message but it is not adding, screenshot attached:

enter image description here

Complete code reference:

 import pnp from 'sp-pnp-js';
//import { default as pnp, ItemAddResult } from "sp-pnp-js";
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PnPspCrud.module.scss';
import * as strings from 'pnPspCrudStrings';
import { IPnPspCrudWebPartProps } from './IPnPspCrudWebPartProps';

        export interface ISPList {
      ID: string;
      EmployeeName: string;
      Experience: string;
      Location: string;
    } 

export default class PnPspCrudWebPart extends BaseClientSideWebPart<IPnPspCrudWebPartProps> {


private AddEventListeners() : void{
 document.getElementById('AddItem').addEventListener('click',()=>this.AddItem());
 document.getElementById('UpdateItem').addEventListener('click',()=>this.UpdateItem());
 document.getElementById('DeleteItem').addEventListener('click',()=>this.DeleteItem());
}

 private _getListData(): Promise<ISPList[]> {
 return pnp.sp.web.lists.getByTitle("EmployeeList").items.get().then((response) => {

    return response;
  });

}

 private getListData(): void {

    this._getListData()
      .then((response) => {
        this._renderList(response);
      });
}

private _renderList(items: ISPList[]): void {
  let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
  html += `<th>EmployeeId</th><th>EmployeeName</th><th>Experience</th><th>Location</th>`;
  items.forEach((item: ISPList) => {
    html += `
         <tr>
        <td>${item.ID}</td>
        <td>${item.EmployeeName}</td>
        <td>${item.Experience}</td>
        <td>${item.Location}</td>
        </tr>
        `; 
  });
  html += `</table>`;
  const listContainer: Element = this.domElement.querySelector('#spGetListItems');
  listContainer.innerHTML = html;
}



  public render(): void {
    this.domElement.innerHTML = `

      <div class="parentContainer" style="background-color: lightgrey">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
      <span class="ms-font-xl ms-fontColor-white" style="font-size:28px">Welcome to SharePoint Framework Development using PnP JS Library</span>
      <p class="ms-font-l ms-fontColor-white" style="text-align: left">Demo : SharePoint List CRUD using PnP JS and SPFx</p>
   </div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
   <div style="background-color:Black;color:white;text-align: center;font-weight: bold;font-size:18px;">Employee Details</div>

</div>
<div style="background-color: lightgrey" >
   <form >
      <br>
      <div data-role="header">
         <h3>Add SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeName"  placeholder="EmployeeName"    />
            <input id="Experience"  placeholder="Experience"  />
            <input id="Location"  placeholder="Location"    />
         </div>
         <div></br></div>
         <div >
            <button id="AddItem"  type="submit" >Add</button>
         </div>
      </div>
      <div data-role="header">
         <h3>Update/Delete SharePoint List Items</h3>
      </div>
      <div data-role="main" class="ui-content">
         <div >
            <input id="EmployeeId"   placeholder="EmployeeId"  />
         </div>
         <div></br></div>
         <div >
            <button id="UpdateItem" type="submit" >Update</button>
            <button id="DeleteItem"  type="submit" >Delete</button>
         </div>
      </div>
   </form>
</div>
<br>
<div style="background-color: lightgrey" id="spGetListItems" />
</div>

   `;
this.getListData();
this.AddEventListeners();
  }


AddItem()
{  

     pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
    });
     alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");

}
/* 
AddItem()
{  

  pnp.sp.web.lists.getByTitle('EmployeeList').items.add({    
    EmployeeName : document.getElementById('EmployeeName')["value"],
    Experience : document.getElementById('Experience')["value"],
    Location:document.getElementById('Location')["value"]
   })
.then(addResponse => {
    alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Added !");
})
.catch(addError => alert("An error has occurred:" + JSON.stringify(addError)));

}
*/

/*
private AddItem():void
{
     pnp.sp.web.lists.getByTitle("EmployeeList").items.add({
      EmployeeName : document.getElementById('EmployeeName')["value"],
      Experience : document.getElementById('Experience')["value"],
      Location: document.getElementById('Location')["value"]
  })
  .then((iar: ItemAddResult) => {
      console.log(iar);
  })
  .catch((error:any) => {
      console.log("Error: ", error);
  });

}
*/


UpdateItem()
{  

    var id = document.getElementById('EmployeeId')["value"];
    pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(id).update({
     EmployeeName : document.getElementById('EmployeeName')["value"],
     Experience : document.getElementById('Experience')["value"],
     Location:document.getElementById('Location')["value"]
  });
 alert("Record with Employee Name : "+ document.getElementById('EmployeeName')["value"] + " Updated !");
}

DeleteItem()
{  
     pnp.sp.web.lists.getByTitle("EmployeeList").items.getById(document.getElementById('EmployeeId')["value"]).delete();
     alert("Record with Employee ID : "+ document.getElementById('EmployeeId')["value"] + " Deleted !");
}

  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
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Note:

I am referring this link where complete code is available.

https://www.sharepoint-journey.com/SharePoint-Framework-Development-Create-List-CRUD-WebPart-PnPJS.html

2

Try to use catch in the code snippet to get the exception in the code snippet like below:

import { default as pnp, ItemAddResult } from "sp-pnp-js";
private PnPAddItem():void
{
     pnp.sp.web.lists.getByTitle("Jerry").items.add({
      EmployeeName : document.getElementById('EmployeeName')["value"],
      Experience : document.getElementById('Experience')["value"],
      Location: document.getElementById('Location')["value"]
  })
  .then((iar: ItemAddResult) => {
      console.log(iar);
  })
  .catch((error:any) => {
      console.log("Error: ", error);
  });

}

Try to trace the error in catch for more detailed information and find the cause.

Update: Try to check the detailed response data using Developer Tool to trace the issue:

enter image description here

enter image description here

  • I have tried your code but didn't work ....the strange is Read and Delete is working but Add and Update is not working ....updated the question with screenshot and complete code. – SP Expert Dec 30 '19 at 14:16
  • Read and Delete don't need to pass any request data in the body, so it will work, if the Item Id is valid. Can you check out the Developer Tool to trace the Add, Update Request ? You can get the error message if the request have problem. – Jerry_MSFT Dec 31 '19 at 7:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.