1. Implementing CRUD operation to list
2. Redeploy webpart in MS Teams
3. Conclusion

• Here, PNP js is used to implement CRUD operation. The first step is to install PnP js libraries. Enter npm install sp-pnp-js –save in command prompt. Make sure you are inside the project directory.

• Import the added library in the .ts file of your webpart.  

• Next step is to add the textboxes and buttons for implementing the operations.

              

                
                
              
              


              

                Create Item
                Retrieve Item
                Update Item
                Delete Item
              
              

                IDName
              

• After rendering the HTML part, two methods are called as below.

this.setButtonEventHandlers();
this.RenderLanguagesEntries();

private setButtonEventHandlers(): void
  {
    const webpart: TeamsTabWebPart = this;

    this.domElement.querySelector('button.create-Button').addEventListener('click', () => {webpart.createItem();});
    this.domElement.querySelector('button.retrieve-Button').addEventListener('click', () => {webpart.retrieveItem();});
    this.domElement.querySelector('button.update-Button').addEventListener('click', () => {webpart.updateItem();});
    this.domElement.querySelector('button.delete-Button').addEventListener('click', () => {webpart.deleteItem();});
  }

private RenderLanguagesEntries(): void
{
  this.table =   document.getElementById("bodyTableLang");
  this.table.innerHTML = "";
  pnp.sp.web.lists.getByTitle('Language').items.get().then((items) => {    
    for(var i=0; i< items.length; i++)
    {
      var id = items[i].ID;
      var langName = items[i].Title;

      var row = this.table.insertRow(i);
      var cell1 = row.insertCell(0);
      cell1.innerHTML = id;
      var cell2 = row.insertCell(1);
      cell2.innerHTML = langName;
    }

  }).catch((error) => {
    alert("Something went wrong " + error);
  });
}

• New item can be added in the list by entering the language name inside the textbox. Here, consider a new language “French” is to be added.   

• After entering the item, clicking on Create Item button will prompt the user with a message of successful addition.  

private createItem(): void
{
  let langName: string = document.getElementById('LanguageName')["value"];
  let web = new Web(this.context.pageContext.web.absoluteUrl);

  pnp.sp.web.lists.getByTitle('Language').items.add({
    Title: langName
  }).then(() =>{
      document.getElementById('LanguageName')["value"] = "";
      document.getElementById('LanguageId')["value"] = "";
      alert("Item added successfully");
      this.RenderLanguagesEntries();
  }).catch((error) =>{
    alert("Something went wrong" + error);
    document.getElementById('LanguageName')["value"] = "";
    document.getElementById('LanguageId')["value"] = "";
  });
}

• To retrieve the language, enter the id for which you want the details. Here, id 6 is added in the textbox and clicking the Retrieve Item button will prompt the user with the language name.

private retrieveItem(): void{
  let langID = document.getElementById('LanguageId')["value"];
    let web = new Web(this.context.pageContext.web.absoluteUrl);

    pnp.sp.web.lists.getByTitle('Language').items.getById(langID).get().then((result) =>{
      alert("Retrieved Item: "+ result.Title);
      document.getElementById('LanguageName')["value"] = "";
      document.getElementById('LanguageId')["value"] = "";
      this.RenderLanguagesEntries();
    }).catch((error) => {
      alert("Something went wrong" + error);
      document.getElementById('LanguageName')["value"] = "";
      document.getElementById('LanguageId')["value"] = "";
    });
}

• To update the language, we need to enter the new language name and the id of the language for which the language is to be updated.
• Here, consider updating Bengali to Croatian.  

• User will be prompt with a message of successful update of language. Clicking on OK will reflect the change in the table.  

private updateItem(): void
{
  let langID = document.getElementById('LanguageId')["value"];
  let langName: string = document.getElementById('LanguageName')["value"];
  let web = new Web(this.context.pageContext.web.absoluteUrl);

  pnp.sp.web.lists.getByTitle('Language').items.getById(langID).update({
    Title: langName
  }).then(() =>{
    alert("Item updated successfully");
    document.getElementById('LanguageName')["value"] = "";
    document.getElementById('LanguageId')["value"] = "";
    this.RenderLanguagesEntries();
  }).catch((error) => {
    alert("Something went wrong" + error);
    document.getElementById('LanguageName')["value"] = "";
    document.getElementById('LanguageId')["value"] = "";
  });
}

• To delete the item, the id for the language to be deleted should be entered. Suppose, here the newly added language “French” is deleted.

• Entering the id of the language and clicking “Delete Item” button will prompt the user for confirmation.
• Clicking OK will delete the language and the table will be updated.

private deleteItem(): void
{
  let boolDelete: boolean = confirm("Are you sure you want to delete item?");
    if(boolDelete)
    {
      let langID = document.getElementById('LanguageId')["value"];
      let web = new Web(this.context.pageContext.web.absoluteUrl);

      pnp.sp.web.lists.getByTitle('Language').items.getById(langID).delete().then(() =>{
        alert("Item deleted successfully");
        document.getElementById('LanguageName')["value"] = "";
        document.getElementById('LanguageId')["value"] = "";
        this.RenderLanguagesEntries();
      }).catch((error) => {
        alert("Something went wrong" + error);
        document.getElementById('LanguageName')["value"] = "";
        document.getElementById('LanguageId')["value"] = "";
        this.RenderLanguagesEntries();
      });
    }
    else{
      return;
    }
}

• Generate a GUID and change “libraryId” property value in .yo-rc.json file to newly generated GUID.

• Change the id property value to newly generated GUID.

• Enter gulp build in command prompt. Make sure you are inside project directory.
• Then enter gulp bundle –ship in the command prompt.
• Then enter gulp package-solution –ship in the command prompt. This steps will update .sppkg file which resides in the solution folder.  

• Upload the package in the Apps for SharePoint list of App Catalog site which will prompt for replacing already existing package.
• Click on replace option.
• Click on Deploy option.  

• Navigate to Teams, and remove the tab having webpart by selecting remove option.  

• Click on the Remove button.

• Navigate to Apps in Teams 

• Click on delete icon for the webpart.

• Click on uninstall button.  

• Navigate to Store by clicking the Store option available in the bottom left corner in Teams.

• The webpart deployed will be found under the tenant name.  

• Click on Delete option available for the webpart.
• Then click on Delete app button.  

• The updated changes will be reflected in Teams.