Blog MS Team and SharePoint Online Site Association via the MS Team tab RSS Feed

MS Team and SharePoint Online Site Association via the MS Team tab

Aug 30, 2019

SharePoint Framework (SPFx) is an excellent platform for developers allowing them to create client-side applications. From release version 1.8, SPFx has added a beautiful feature in which SPFx webparts can be utilized in MS Teams as a tab. So same web part can be used in SharePoint site as well as in MS Teams for an accurate SharePoint development.

The steps to create such kind of SPFx webpart is already described in our blog. This blog is written to show how to redeploy the existing webpart and utilize the updated webpart in MS Teams. Also, this will portray how the site collection’s list and libraries can be used by performing the CRUD operation.

Let’s first implement CRUD operation with SharePoint list in SPFx web part or MS Teams tab web part.

Table of Content

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

Implementing CRUD operation to list

Implementing CRUD operation to the list will connect your webpart to the list of any site collection of your tenant. This webpart will be consumed in MS Teams tab and hence a connection will be established between MS Teams and SharePoint site collection.

Below are the steps to implement CRUD operation to SharePoint list.

  • 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.

CRUD operation

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

Import the added library

This will allow us to implement CRUD using PnP js.

Note: It is not necessary that you use PnP js. If it is not consumed, then no need to install its library.

  • Next step is to add the textboxes and buttons for implementing the operations.
<br></br>
              <div>
                <input id="LanguageName" placeholder="Enter any language"></input>
                <input id="LanguageId" placeholder="Enter any language id"></input>
              </div>
              <br></br>
              <div>
                <button class="create-Button"><span>Create Item</span></button>
                <button class="retrieve-Button"><span>Retrieve Item</span></button>
                <button class="update-Button"><span>Update Item</span></button>
                <button class="delete-Button"><span>Delete Item</span></button>
              </div>
              <div>
                <table id="tblLanguages" class="table-responsive">
                <thead>
                  <td>	
                    <tr>ID</tr>
                    <tr>Name</tr>
                  </td>
                </thead>
                <tbody id="bodyTableLang">
                </tbody>
                </table>
              </div>

Here two textboxes, four buttons and one table are added. The above code is added inside render() method.

  • After rendering the HTML part, two methods are called as below.
this.setButtonEventHandlers();
this.RenderLanguagesEntries();

this.setButtonEventHandlers() method will bind 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();});
  }

this.RenderLanguagesEntries() will bind the default table by fetching the data from Language list.

private RenderLanguagesEntries(): void
{
  this.table =  <HTMLTableElement> 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);
  });
}

Here, “table” variable already defined globally inside the main class.

Table variable

The output of the webpart will be displayed as shown in below image.

Output of the webpart

  • 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.   

New Item

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

Successful addition

The language will be added inside the list and the below table will be updated.

The code to add item is provided 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: If any error occurs while adding the language, the user will be prompted with the error message.

Error message

  • 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.

Retrieve

Code to retrieve item is provided 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"] = "";
    });
}
  • 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.  

Update the language

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

Change in the table

Code to update item is provided 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"] = "";
  });
}
  • To delete the item, the id for the language to be deleted should be entered. Suppose, here the newly added language “French” is deleted.

Delete the item

  • 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.

Delete the language

Code to delete item is provided 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 us see, how to make changes to code of webpart and redeploy the webpart to Teams. Few steps are to be followed to get those updates in already existing webpart in MS Teams.

Note that we are not changing any version number here. We are just updating the .ts file code.

Follow the below steps after making changes to the code:

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

Generate a GUID

  • Change the id property value to newly generated GUID.

Change the id

  • 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.  

Update .sppkg file

  • 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.  

Deploy

Now, selecting the solution and then clicking “Sync to Teams” option will throw error as “Failed to sync solution to teams” as webpart already existing in MS Teams having the same name.  

Failed to syncWe first need to uninstall and delete it in MS Teams and then again upload the updated solution.

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

Remove the tab

  • Click on the Remove button.

Click on the Remove

Now, again if we try to Sync the updated package in the Apps for SharePoint list, it will throw the same error as we have just removed the tab. We need to uninstall the package from Teams.

  • Navigate to Apps in Teams 

Navigate to Apps

  • Click on delete icon for the webpart.

Click on delete icon

  • Click on uninstall button.  

Click on uninstall

This will remove the webpart from the Apps tab.

After successfully deleting it, again navigating to the Apps for SharePoint list and trying to sync the package will again throw an error. This appears because even we have removed the webpart from Apps, still the webpart exists in MS Teams store of our tenant.

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

Navigate to Store

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

Webpart deployed

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

Delete app

After successfully deleting the webpart, again navigate to App Catalog site of the tenant and try to sync the updated package.

Synced to Teams

The webpart will be successfully synced to Teams. 

To view the updated webpart in Teams, just add the webpart clicking the “+” sign in tabs in any of the teams created and select the webpart that is updated (No need to manually deploy the webpart to Teams if ‘Synced To Teams” option is fully developed).

Add a Tab

  • The updated changes will be reflected in Teams.  

New Updates

Note: To remove the webpart from Teams, we can directly remove it from store. No need to remove it from tabs and Apps.

The CRUD operation will work after integrating the webpart to Teams. Make sure you have created the list in the site collection where the team is created.

Conclusion

From this blog, one can get an idea to utilize the MS Teams in more efficient manner. With the help of MS Teams tab, one can carry out the different operations of the SharePoint Online using single user interface. You can get a basic idea on performing CRUD operation via PnP JS through your MS Team tab and also about updating your existing MS Team Tab. Based upon the requirement, one can develop the SPFx webpart and integrate it into MS Teams to use it effectively as a tab.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

About Tatvasoft

TatvaSoft is a CMMi Level 3 and Microsoft Gold Certified Software Development Company offering custom software development services on diverse technology platforms, like Microsoft, SharePoint, Biztalk, Java, PHP, Open Source, BI, Big Data and Mobile.

Follow Us