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” `
–skip-feature-deployment

 

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”  
      }  
    ]

Dependencies

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

Screens

 

Get Details about the Teams


Create New Teams

 


 

Create New Channel

 

Source Code:

The full source code is here

https://github.com/msisgreat/spfx/tree/master/spfx-teamsManagement

YouTube

Leave a Reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s