Post
Ask Question

List Joined Teams Using Graph API In SharePoint Framework

In this article, you will see how to list joined Teams using Graph API in SharePoint Framework by performing the following tasks,
  • Prerequisites
  • Create SPFx solution
  • Implement SPFx solution
  • Deploy the solution
  • Approve Graph API Permissions
  • Test the webpart

List joined Teams

 
Get the teams in Microsoft Teamsof which the user is a direct member.
 
Note
Each team redirects to the respective team.
 
List Joined Teams Using Graph API In SharePoint Framework 
 
Prerequisites

Create SPFx solution

 
Open Node.js command prompt.
 
Create a new folder.
 
>md spfx-list-joinedteams
 
Navigate to the folder.
 
>cd spfx-list-joinedteams
 
Execute the following command to create SPFx webpart.
 
>yo @microsoft/sharepoint
 
Enter all the required details to create a new solution as shown below.
 
List Joined Teams Using Graph API In SharePoint Framework 
 
Yeoman generator will perform the scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.
 
>npm shrinkwrap
 
Execute the following command to open the solution in the code editor.
 
>code .
 

Implement SPFx solution

 
Execute the following command to install Microsoft Graph Typings.
 
> npm install @microsoft/microsoft-graph-types
 
Folder Structure
 
List Joined Teams Using Graph API In SharePoint Framework 
 
Open package-solution.json “config\package-solution.json” file and update the code as shown below.
  1. {  
  2.   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",  
  3.   "solution": {  
  4.     "name": "spfx-list-joinedteams-client-side-solution",  
  5.     "id": "2a4704fa-f387-4680-9b54-fe2003b78844",  
  6.     "version": "1.0.0.0",  
  7.     "includeClientSideAssets": true,  
  8.     "isDomainIsolated": false,  
  9.     "webApiPermissionRequests": [  
  10.       {  
  11.         "resource": "Microsoft Graph",  
  12.         "scope": "User.Read.All"  
  13.       },  
  14.       {  
  15.         "resource": "Microsoft Graph",  
  16.         "scope": "User.ReadWrite.All"  
  17.       }  
  18.     ]  
  19.   },  
  20.   "paths": {  
  21.     "zippedPackage": "solution/spfx-list-joinedteams.sppkg"  
  22.   }  
  23. }  
Create a new folder named as “models” inside src\webparts\listJoinedteams folder. Create a new file named as ITeam.ts. Open “src\webparts\listJoinedteams\models\ITeam.ts” file and update the code as shown below.
  1. import { Guid } from '@microsoft/sp-core-library';  
  2.   
  3. export interface ITeam {  
  4.     teamId: Guid;  
  5.     displayName: string;  
  6.     webUrl?: string;  
  7. }  
  8.   
  9. export interface ITeamCollection {  
  10.     value: ITeam[];  
  11. }  
Create a new file named as IListJoinedteamsState.ts under components folder. Open “src\webparts\listJoinedteams\components\IListJoinedteamsState.ts” file and update the code as shown below.
  1. import { ITeam } from '../models/ITeam';  
  2.   
  3. export interface IListJoinedteamsState {  
  4.     joinedTeams?: ITeam[];    
  5. }  
Create a new folder named as “services” inside src\webparts\listJoinedteams folder. Create a new file named as ListJoinedTeamsService.ts. Open “src\webparts\listJoinedteams\services\ListJoinedTeamsService.ts” file and update the code as shown below.
  1. import { MSGraphClient } from "@microsoft/sp-http";  
  2. import { WebPartContext } from "@microsoft/sp-webpart-base";  
  3. import { ITeam, ITeamCollection } from '../models/ITeam';  
  4.   
  5. export class ListJoinedTeamsService {  
  6.   public context: WebPartContext;  
  7.   
  8.   public setUp(context: WebPartContext): void {  
  9.     this.context = context;  
  10.   }  
  11.   
  12.   public getJoinedTeams(): Promise<ITeam[]> {  
  13.     return new Promise<ITeam[]>((resolve, reject) => {  
  14.       try {  
  15.         // Prepare the output array    
  16.         var teams: Array<ITeam> = new Array<ITeam>();  
  17.   
  18.         this.context.msGraphClientFactory  
  19.           .getClient()  
  20.           .then((client: MSGraphClient) => {  
  21.             client  
  22.               .api("/me/joinedTeams")  
  23.               .select('id,displayName')  
  24.               .get((error: any, teamColl: ITeamCollection, rawResponse: any) => {  
  25.                 // Map the response to the output array    
  26.                 teamColl.value.map((item: any) => {  
  27.                   teams.push({  
  28.                     teamId: item.id,  
  29.                     displayName: item.displayName  
  30.                   });  
  31.                 });  
  32.                 resolve(teams);  
  33.               });  
  34.           });  
  35.       } catch (error) {  
  36.         console.error(error);  
  37.       }  
  38.     });  
  39.   }  
  40.   
  41.   public getTeamWebUrl(teams: ITeam): Promise<any> {  
  42.     return new Promise<any>((resolve, reject) => {  
  43.       try {  
  44.         this.context.msGraphClientFactory  
  45.           .getClient()  
  46.           .then((client: MSGraphClient) => {  
  47.             client  
  48.               .api(`/teams/${teams.teamId}`)  
  49.               .select('webUrl')  
  50.               .get((error: any, team: any, rawResponse: any) => {  
  51.                 resolve(team);  
  52.               });  
  53.           });  
  54.       } catch (error) {  
  55.         console.error(error);  
  56.       }  
  57.     });  
  58.   }  
  59. }  
  60.   
  61. const listJoinedTeamsService = new ListJoinedTeamsService();  
  62. export default listJoinedTeamsService;  
Open “src\webparts\listJoinedteams\ListJoinedteamsWebPart.ts” file and update the following.
  • Import modules
  • Update the OnInit method
Import modules,
  1. import listJoinedTeamsService, {ListJoinedTeamsService} from './services/ListJoinedTeamsService';  
Update the OnInit method,
  1. protected onInit():Promise<void>{  
  2.   return super.onInit().then(() => {  
  3.     listJoinedTeamsService.setUp(this.context);  
  4.   });  
  5. }  
Update the React component (src\webparts\listJoinedteams\components\ListJoinedteams.tsx),
  1. import * as React from 'react';  
  2. import styles from './ListJoinedteams.module.scss';  
  3. import { IListJoinedteamsProps } from './IListJoinedteamsProps';  
  4. import { IListJoinedteamsState } from './IListJoinedteamsState';  
  5. import { escape } from '@microsoft/sp-lodash-subset';  
  6. import { ITeam, ITeamCollection } from '../models/ITeam';  
  7. import listJoinedTeamsService, { ListJoinedTeamsService } from '../services/ListJoinedTeamsService';  
  8. import { List } from 'office-ui-fabric-react/lib/List';  
  9. import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';  
  10. import { TextField } from 'office-ui-fabric-react/lib/TextField';  
  11. import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from 'office-ui-fabric-react/lib/Styling';  
  12.   
  13. interface IGroupListClassObject {  
  14.   itemCell: string;  
  15.   itemImage: string;  
  16.   itemContent: string;  
  17.   itemName: string;  
  18.   itemIndex: string;  
  19.   chevron: string;  
  20. }  
  21.   
  22. const theme: ITheme = getTheme();  
  23. const { palette, semanticColors, fonts } = theme;  
  24.   
  25. const classNames: IGroupListClassObject = mergeStyleSets({  
  26.   itemCell: [  
  27.     getFocusStyle(theme, { inset: -1 }),  
  28.     {  
  29.       minHeight: 54,  
  30.       padding: 10,  
  31.       boxSizing: 'border-box',  
  32.       borderBottom: `1px solid ${semanticColors.bodyDivider}`,  
  33.       display: 'flex',  
  34.       selectors: {  
  35.         '&:hover': { background: palette.neutralLight }  
  36.       }  
  37.     }  
  38.   ],  
  39.   itemImage: {  
  40.     flexShrink: 0  
  41.   },  
  42.   itemContent: {  
  43.     marginLeft: 10,  
  44.     overflow: 'hidden',  
  45.     flexGrow: 1  
  46.   },  
  47.   itemName: [  
  48.     fonts.xLarge,  
  49.     {  
  50.       whiteSpace: 'nowrap',  
  51.       overflow: 'hidden',  
  52.       textOverflow: 'ellipsis'  
  53.     }  
  54.   ],  
  55.   itemIndex: {  
  56.     fontSize: fonts.small.fontSize,  
  57.     color: palette.neutralTertiary,  
  58.     marginBottom: 10  
  59.   },  
  60.   chevron: {  
  61.     alignSelf: 'center',  
  62.     marginLeft: 10,  
  63.     color: palette.neutralTertiary,  
  64.     fontSize: fonts.large.fontSize,  
  65.     flexShrink: 0  
  66.   }  
  67. });  
  68.   
  69. export default class ListJoinedteams extends React.Component<IListJoinedteamsProps, IListJoinedteamsState> {  
  70.   private _originalItems: ITeam[] = [];  
  71.   constructor(props: IListJoinedteamsProps) {  
  72.     super(props);  
  73.     this.state = {  
  74.       joinedTeams: []  
  75.     };  
  76.   }  
  77.   
  78.   public componentDidMount(): void {  
  79.     this._getJoinedTeams();  
  80.   }  
  81.   
  82.   public render(): React.ReactElement<IListJoinedteamsProps> {  
  83.     const { joinedTeams = [] } = this.state;  
  84.     return (  
  85.       <FocusZone direction={FocusZoneDirection.vertical}>  
  86.         <h1>My Teams</h1>  
  87.         <List items={joinedTeams} onRenderCell={this._onRenderCell} />  
  88.       </FocusZone>  
  89.     );  
  90.   }  
  91.   
  92.   public _getJoinedTeams = (): void => {  
  93.     listJoinedTeamsService.getJoinedTeams().then(result => {  
  94.       this.setState({  
  95.         joinedTeams: result  
  96.       });  
  97.       this._getTeamWebUrl(result);  
  98.     });  
  99.   }  
  100.   
  101.   public _getTeamWebUrl = (teams: any): void => {  
  102.     teams.map(teamItem => (  
  103.       listJoinedTeamsService.getTeamWebUrl(teamItem).then(teamUrl => {  
  104.         if (teamUrl !== null) {  
  105.           this.setState(prevState => ({  
  106.             joinedTeams: prevState.joinedTeams.map(team => team.teamId === teamItem.teamId ? { ...team, webUrl: teamUrl.webUrl } : team)  
  107.           }));  
  108.         }  
  109.       })  
  110.     ));  
  111.   }  
  112.   
  113.   private _onRenderCell(team: ITeam, index: number | undefined): JSX.Element {  
  114.     return (  
  115.       <div className={classNames.itemCell} data-is-focusable={true}>  
  116.         <div className={classNames.itemContent}>  
  117.           <div className={classNames.itemName}>  
  118.             <a href={team.webUrl} target="_blank">{team.displayName}</a>  
  119.           </div>  
  120.         </div>  
  121.       </div>  
  122.     );  
  123.   }  
  124. }  

Deploy the solution

 
Execute the following commands to bundle and package the solution.
 
>gulp bundle --ship
>gulp package-solution --ship
 
Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx
 
Upload the package file (sharepoint\solution\spfx-list-joinedteams.sppkg). Click Deploy.
 
List Joined Teams Using Graph API In SharePoint Framework 
 

Approve Graph API permission

 
Navigate to SharePoint Admin center, click API access in the left navigation. Select the permission requested and click Approve.
 
List Joined Teams Using Graph API In SharePoint Framework
 
List Joined Teams Using Graph API In SharePoint Framework 
 

Test the webpart

 
Navigate to the SharePoint site and add the app.
 
List Joined Teams Using Graph API In SharePoint Framework 
 
Navigate to the page and add the webpart.
 
List Joined Teams Using Graph API In SharePoint Framework 
 

Summary

 
Thus, in this article, you saw how to list joined Teams using Graph API in SharePoint Framework.


Similar Articles