Accessing MS Teams From Inside SPFx Web Part

In this article, you will learn how to access MS Teams from inside the SPFx Web Part.

SharePoint Framework

 
SPFx is a framework solution that helps you build custom apps for your SharePoint Modern sites and lets you integrate them on classic sites as well.
 

Why SharePoint Framework?

  • The controls are responsive and accessible by nature.
  • User can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more.
  • User can use client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
Now that we have knowledge of SharePoint Framework, let us see what MS Teams is.
 

Microsoft Teams

 
Teams is a communication tool which helps the members of an organization to communicate effectively with conversational tabs, easily schedule meetings, record calls and upload them on Microsoft Streams for later access.
 
Prerequisites
  • Visual Studio code installed
  • Node version 8.11.3
  • Gulp and Yeoman installed globally

Getting Started

 
From inside the command prompt, create your project folder and switch to it.
 
Accessing MS Teams From Inside SPFX WebPart
 
Then, type the below command in your command terminal.
  1. “yo @microsoft/sharepoint”,
Accessing MS Teams From Inside SPFX WebPart
 
This will prompt you with questions like,
  • What is your solution name? TeamsInSP (you can name as per your choice)
  • Which baseline packages do you want to target for your component(s)? SharePoint Online
  • Where do you want to place the files? Use the Current Folder
  • Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Yes
  • Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? Yes
  • Which type of client-side component to create? WebPart
  • What is your Web part name? TeamsInSP
  • What is your Web part description? TeamsInSP description
  • Which framework would you like to use? React
Wait some time while yeoman creates your project structure and gives you a confirmation message.
 
Accessing MS Teams From Inside SPFX WebPart
 
Run “gulp serve” and check if your localhost pops up.
 
Accessing MS Teams From Inside SPFX WebPart
Now, navigate to here. Search the name of your web part and add it.
 
Accessing MS Teams From Inside SPFX WebPart
After you’ve added your web part successfully, you would see a welcome screen in it. Now, you are good to code further.
 
Accessing MS Teams From Inside SPFX WebPart
For connecting MS Teams from SharePoint, we can use Microsoft Graph API.
 
Microsoft Graph API
 
With Microsoft Graph API you can access data of users present in Microsoft cloud.
 
End point URL: https://graph.microsoft.com
 
We have used pnp/graph to call the Graph REST services.
 
Before proceeding with the code, let us check if the rest services work properly.
 
For this, go here.
 
Accessing MS Teams From Inside SPFX WebPart
 
Make sure to sign in with your Office 365 account.
 
Accessing MS Teams From Inside SPFX WebPart
 
Run a sample query to fetch all the MS teams that you are connected to by typing here.
 
Accessing MS Teams From Inside SPFX WebPart
 

Troubleshooting the errors in the response

 
If you happen to receive a 403-status code in the response don’t panic, click on the “modify permissions”.
 
Accessing MS Teams From Inside SPFX WebPart
 
Enable the following permissions and click approve.
  • User.Read.All
  • User.ReadWrite.All
  • Group.Read.All
  • Group.ReadWrite.All
Accessing MS Teams From Inside SPFX WebPart
 
Accessing MS Teams From Inside SPFX WebPart
 
Run the query again and you’ll be able to see a successful response.
 
Now that our API is working fine, let us integrate with our SPFx web part.
 
To use Graph API services inside SPFx, run
 
“npm install @pnp/graph –save”
 
Accessing MS Teams From Inside SPFX WebPart
 
Move to your <solutionName>WebPart.ts file and Import the library into your application, update OnInit function, and access the root SP object in render,
  1. import { graph } from "@pnp/graph";  
  2.   
  3. export interface ITeamsInSpWebPartProps {  
  4.   description: string;  
  5.   context:any;  
  6. }  
  7.   
  8. export default class TeamsInSpWebPart extends BaseClientSideWebPart<ITeamsInSpWebPartProps> {  
  9.   
  10.   
  11.   public onInit(): Promise<void> {  
  12.     return super.onInit().then(_ => {  
  13.     graph.setup({  
  14.       spfxContext: this.context  
  15.     });  
  16.     });  
  17.   }  
 Now modify the render method to get all the teams and add another Batching function to loop through each of its webUrl for redirection.
 
  1. public async render(): Promise<void> {  
  2.    let array = [];  
  3.    const myJoinedTeams = await graph.me.joinedTeams.get();  
  4.    this.domElement.innerHTML = `Loading...`;  
  5.    myJoinedTeams.map((res) => {  
  6.      array.push(this.Batching(res.id));  
  7.    });  
  8.    Promise.all(array).then((res)=>{  
  9.            this.domElement.innerHTML = `Groups: <ul>${  
  10.              res.map(g =>  
  11.          `<li><a href='${g.webUrl}'>${g.displayName}</a></li>`  
  12.        )  
  13.        .join("")  
  14.      }</ul>`;  
  15.    })  
  16.  }  
  17.  private async Batching(res) {  
  18.    const team = await graph.teams.getById(`${res}`).get();  
  19.    return team;  
  20.  }  
 
 
If you switch to your workbench.aspx you can see list of your teams being rendered on the DOM which on clicking takes you to that particular Team.
 
Accessing MS Teams From Inside SPFX WebPart
 
We have got our MS Teams inside SPFX, we’ll customize it to look more pleasing for the end-user.
 
Add a little bit of CSS Touch to do the magic,
 
Accessing MS Teams From Inside SPFX WebPart
 

Deployment

 
So far, we have our application running locally from “https://<tenant>.sharepoint.com/_layouts/15/workbench.aspx”. To move it to production,
 
Go to your package-solution.json file inside the config folder and insert the following piece of code.
  1. "webApiPermissionRequests": [  
  2.       {  
  3.         "resource""Microsoft Graph",  
  4.         "scope""User.Read.All"  
  5.   
  6.       },  
  7.       {  
  8.         "resource""Microsoft Graph",  
  9.         "scope":"User.ReadWrite.All"  
  10.       },  
  11.       {  
  12.         "resource""Microsoft Graph",  
  13.         "scope""Group.Read.All"  
  14.   
  15.       },  
  16.       {  
  17.         "resource""Microsoft Graph",  
  18.         "scope":"Group.ReadWrite.All"  
  19.       }  
  20.     ]  
  21.   },  
These are the permissions to be enabled organization wide for our application to work.
 
Do a “gulp bundle –ship”
 
Accessing MS Teams From Inside SPFX WebPart
 
and finally, run “gulp package-solution –ship”
 
Accessing MS Teams From Inside SPFX WebPart
 
You can upload the .sppkg file inside the sharepoint/solution folder to your app catalog.
 
Before adding this web part to any site, switch to “https://<Tenant>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/home” and click “API Management”
 
Accessing MS Teams From Inside SPFX WebPart
 
You can see the Permissions that are required for our application in the being listed under “Pending Approvals” 
 
Accessing MS Teams From Inside SPFX WebPart
 
Approve them and just add the web part to any of your modern sites and Play with it.
 
The complete solution looks like this:
 
Accessing MS Teams From Inside SPFX WebPart
 
On clicking the cards, we get redirected to that particular team, 
 
Accessing MS Teams From Inside SPFX WebPart
 
Congrats -- we have successfully integrated our SPFx web part with Teams.
 
You can refer here for specific API service according to your requirements.