Another name for SharePoint Framework is SPFx. It is a supreme platform especially for developers as it enables them to create client-side applications. SPFx has integrated an alluring feature commencing from release version 1.8. This feature enables SPFx webparts to be employed in MS Teams as a tab. This way, the same webpart can be employed in the SharePoint site along with MS teams. The end result is precise SharePoint app development.

In the forthcoming sections of this blog, we have provided certain steps to create this kind of SPFx web part. Through this write-up, we want to showcase the best way to deploy a prevailing webpart and employ the updated web part in MS Teams. On top of this, we will also let you know the best way to utilize the site collection’s libraries and list by executing the CRUD operation.

This piece of content has specifically been divided into two parts:

1. Executing CRUD operation to list
2. Redeploy webpart in MS teams

Let’s look at the two in detail.

Executing CRUD Operation to List

Executing CRUD operation to the list will interlink your webpart to the list of any site collection of your tenant. This webpart will be utilized in the MS Teams tab which will result in an established connection between MS Teams and SharePoint site collection.

Let’s now divert our attention to the steps to execute CRUD operation to SharePoint list:
You need to employ PnP js to execute CRUD operation. The very first step is to install PnP js libraries. Insert npm install sp-pnp-js -save in command prompt. Ensure that you are present inside the project directory.

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

This will enable us to execute CRUD employing PnP js. 

Note: It is not mandatory for you to employ PnP js, in case it is not consumed, then there will be no need to install its library.

Next, add the text boxes and buttons for executing the operations.

              

                
                
              
              

              

                Create Item
                Retrieve Item
                Update Item
                Delete Item
              
              

                IDName
              

You will see two text boxes, four buttons, and a table added. The above code is integrated inside the render() method.

Once the rendering of the HTML part is over, the two methods are called as:

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

this.setButtonEventHandlers() method will secure the methods to the buttons.

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

On the other hand, this.RenderLanguagesEntries() will secure the default table by fetching the data from the Language list.

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 {
    alert("Something went wrong " + error);
  });
}

Here, “table” variable is already defined on a global basis inside the main class.

The output of the webpart will be displayed in the form mentioned below.

You can even add a new item in the list by inserting the language name inside the textbox. For example, let’s assume that you wish to add “French” language.

Once you have inserted the item, click on the “Create item” button. This will prompt the user with an alert of successful integration.

This way, the language will be integrated inside the list and the below-mentioned table will be updated. 

Note: We have already provided the code to add an item below.

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

Note: In case of any error while adding the language, the user will get an alert with the error message.

If you wish to retrieve the language, insert the ID for which you wish to get the details. Here, we have added id6 in the textbox. By clicking on the “Retrieve Item” button, the user will get an alert with the language name.

We have even provided the code to retrieve the item given below.

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

If you wish to update the language, enter the new language name and ID of the language for which the language needs to be updated. 

For example, let’s consider you wish to update from the “Bengali” language to the “Croatian” language.

Once that is done, the user will receive an alert of the successful update of language. Once he/she clicks on “OK” the change will reflect on the table. 

We have even provided the code to update the item given below:

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

If you wish to delete the item, the ID for the language to be deleted for should be entered. For example, you wish to delete the newly added language “French”.

Once you enter the ID of the language and click the “Delete Item” button, it will ask the user for confirmation.

If you click on “OK” it will delete the language and the table will be updated.

We have even provided the code to delete the item given below.

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

Redeploy webpart in MS teams

Let’s now divert our attention to the different ways to make alterations to the code of webpart and redeploy the webpart to Teams. There are a few steps to be taken in order to get these updates in the already present webpart in MS Teams.

We are not altering any version here. The only thing that we are doing is updating the .ts file code.

These are some of the steps to be taken once the changes have been made to the code:
Create a GUID and alter “libraryId” property value in .yo-rc.json file to newly created GUID.

Alter the id property value to newly created GUID.

Insert gulp build in command prompt. Ensure that you are present inside the project directory.
Then insert gulp bundle -ship in the command prompt.
Next, insert gulp package-solution -ship in the command prompt. After these steps, .sppkg file will get updated which is present in the solution folder.

Next, upload the package in the Apps for SharePoint list of App Catalog site. This will alert the user to replace the already present package.

Click on the “replace” option.

Click on the “Deploy” option.

Now, select the solution and then click the “Sync to Teams” option. This will result in an error titled “Failed to sync solution to teams”. The reason being, webpart is already present in MS Teams with the same name.

First of all, try to uninstall and delete it in the MS Team. Then, upload the updated solution again.

Go to Teams, and get rid of the tab that consists of webpart by selecting the “Remove” option.

Next, click on “Remove” button.

Now if you try to sync the updated package again in the Apps for SharePoint list, you are likely to get the same error since we have removed the tab. It is, therefore, important to uninstall the package from Teams.

Go to Apps in Teams.

Hit on the “delete” icon for the webpart.

Next, hit on the “Uninstall” button.

This will get rid of the webpart from the Apps tab.

Once it has been successfully deleted, again go to the Apps for SharePoint list and try to sync the package again. It will once again throw an error. The reason being, we have already removed the webpart from apps, but the webpart still exists in MS Teams store of our tenant.

Go to the store by clicking the “Store” option which is located at the bottom left corner in Teams.

Next, the webpart deployed will be found under the tenant name.

Hit the “Delete” option available on the webpart.

Then click on the “Delete app” button.

Once you have successfully deleted the webpart, go to App Catalog site of the tenant once again and try to sync the updated package.

The webpart will sync to Teams successfully.

To see the updated webpart in Teams, simply add the webpart by clicking the “+” sign in tabs in any of the teams created. Then opt the webpart that is updated.

Note:There is no need to manually deploy the webpart to Teams in case “Sync to Teams” alternative is fully developed.

The updated changes will get reflected in Teams.

Note: It is possible to get rid of the webpart from Teams by removing it from the store. There is no need to delete it from tabs and Apps.

The CRUD operation will function after the successful integration of webpart to Teams. Ensure that you have created the list in the site collection where the team is created. 

Final Words

These are some of the ways to get the most out of MS teams in a more efficient manner. In order to get the most of SPFx solutions, it is important to affiliate with a reputed Microsoft SharePoint development company and hire SharePoint developers who are talented enough to take your SharePoint development solutions to the pinnacle of success!

Sources For Images and Coding