Teams Management using Microsoft Graph API within SPFx

Microsoft Graph API has several REST API to manage different products. Team API is one among them. Graph API uses REST method with JSON format to complete the request.

Create Team v1.0 : V1.0 of the Graph API uses the Microsoft 365 Groups for the creation of Teams. Teams is nothing but an extension of M365 groups. So if you are using v1.0 you need to create Groups first then using the Group ID then create the Teams. The Group you are creating should have minimum of one Owner to it. Also one other issue I often encounter using this API is that the Creation of Team fails with 404 if the Group is created in last 15 min.

Create Team Beta: Using this API you can directly create the Teams. This API is used within my SPFx code.

SPFx Webpart

To create webpart from the scratch use the below command

yo @microsoft/sharepoint `
–solution-name “spfx-teamsManagement” `
–component-name “teams-management” `
–component-description “Manage Teams from SPFx. Create Teams, Create Channel, view all Teams properties.” `
–component-type “webpart” `
–framework “none” `
–environment “spo” `
–package-manager “npm” `


Once the project is created make sure you add the relevant permission needed to execute the Graph API. Open the package-solution.json and insert the below code inside

“webApiPermissionRequests”: [  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.Read.All”  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.ReadWrite.All”  
        “resource”: “Microsoft Graph”,  
        “scope”: “User.ReadBasic.All”  
        “resource”: “Microsoft Graph”,  
        “scope”: “Group.Read.All”  
        “resource”: “Microsoft Graph”,  
        “scope”: “Directory.Read.All”  


My Project uses the below dependencies and types

“dependencies”: {
    “@fortawesome/fontawesome-free”: “^5.13.0”,
    “@microsoft/sp-core-library”: “1.10.0”,
    “@microsoft/sp-property-pane”: “1.10.0”,
    “@microsoft/sp-webpart-base”: “1.10.0”,
    “@microsoft/sp-lodash-subset”: “1.10.0”,
    “@microsoft/sp-office-ui-fabric-core”: “1.10.0”,
    “@types/webpack-env”: “1.13.1”,
    “@types/es6-promise”: “0.0.33”,
    “animate.css”: “^3.7.2”,
    “bootstrap”: “^4.4.1”,
    “jquery”: “^3.4.1”
  “devDependencies”: {
    “@microsoft/microsoft-graph-types”: “^1.13.0”,
    “@microsoft/rush-stack-compiler-3.3”: “0.3.5”,
    “@microsoft/sp-build-web”: “1.10.0”,
    “@microsoft/sp-module-interfaces”: “1.10.0”,
    “@microsoft/sp-tslint-rules”: “1.10.0”,
    “@microsoft/sp-webpart-workbench”: “1.10.0”,
    “@types/bootstrap”: “^4.3.2”,
    “@types/chai”: “3.4.34”,
    “@types/jquery”: “^3.3.34”,
    “@types/mocha”: “2.2.38”,
    “ajv”: “~5.2.2”,
    “gulp”: “~3.9.1”,
    “url-loader”: “^4.1.0”



Get Details about the Teams

Create New Teams



Create New Channel


Source Code:

The full source code is here


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s