Demo of get Group information using Ms Graph and SPFx
If we need to know that how many groups are available in directory or in which group i am member of.
We need to go to admin center and check there.Now think if we don’t have the administrator access to check the certain things in sharepoint admin.So we stuck to bottle neck or dependent to the person who have the admin access.
Solution:
We can get group related information or membership information using graph API in SharePoint SPfx Webpart.We need to provide access one time then webpart can access the directory to get information using admin consented.
What is Ms Graph?
Microsoft Graph is a developers’ API platform to connect to the data that drives productivity. It’s built on top of Office 365 and allows developers to integrate their services with Azure AD, Excel, Intune, Outlook, One Drive, OneNote, SharePoint, Planner, and other Microsoft products.
Reference Link : Click here
What is SPFx?
The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling.
Reference Link : Click here
See the Sample Demo as below
Click here to get full source code
Get Groups and membership of users
Let’s Start to develop solution
Prerequisites:
Please install below packages in your solution
npm i react-csv
npm i @pnp/spfx-controls-react
Step 1 : Create a SPFx Solution with React Javascript framework using below link
Reference Link : Click here to open
Step 2 : Create Service.ts file and add below methods to connect with Graph Client.
Methods to get the content from the directory using MsGraph
Click here to get source code for service
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { SPHttpClient,MSGraphClient } from "@microsoft/sp-http";
import { arraysEqual } from "office-ui-fabric-react/lib/Utilities";
export class MsGraphService{
public static async GetOrganizationGroups(context:WebPartContext):Promise<any>{
let allGroups:string[] = [];
try {
let client:MSGraphClient = await context.msGraphClientFactory.getClient().then();
let response = await client
.api("/groups")
.version("v1.0")
.select(['description','displayName','groupTypes','mailEnabled','mailNickname','securityEnabled','visibility']).get();
response.value.map((group:any)=>{
allGroups.push(group);
});
} catch (error) {
console.log("MSGraphService.GetOrganizationGroups Error: ", error);
}
console.log("MSGraphService.GetOrganizationGroups Error: ",allGroups);
return allGroups;
}
/**
* Gets all the groups the me is part of using MS Graph API
* @param context context Web part context
*/
public static async GetMyUserGroups(context:WebPartContext):Promise<any[]>{
let groups:string[]=[];
try {
let client:MSGraphClient = await context.msGraphClientFactory.getClient().then();
let response = await client.api('/me/memberOf').version('v1.0')
.select(['groupTypes', 'displayName', 'mailEnabled', 'securityEnabled', 'description'])
.get();
response.value.map((item: any) => {
groups.push(item);
});
} catch (error) {
console.log("MsGraphService.GetMyUserGroups Error: ",error);
}
console.log("MsGraphService.GetMyUserGroups groups : " ,groups);
return groups;
}
}
Step 3 : Create a interfaces to store the output attributes
Create file with name IGroupItem.ts and add below code in it
Click here to get source code
export interface IGroupItem{
name: string;
description: string;
groupTypes: string;
}
export interface IUserItem {
displayName: string;
mail: string;
}
Step 4 : Update <webpart>NameProps.ts file with below code
import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface ICheckGroupMembersProps {
context: WebPartContext;
}
Step 5 : Create a new file with name <webpartName>State.ts and add below code
Click here to get source code
import { IUserItem } from "../../../../Common/IUserItem";
import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
export interface ICheckGroupMembersState {
userItems: IUserItem[];
columns: IColumn[];
memberStatus: string;
loading: boolean;
GroupId:string;
}
Step 6: Open .tsx file and import below modules.
Click here to get source code
import * as React from "react";
import styles from "../ReactGroupSamples.module.scss";
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
import { ICheckGroupMembersProps } from "./CheckGroupMembersProps";
import { ICheckGroupMembersState } from "./CheckGroupMembersState";
import { MsGraphService } from "../../../../Service/MsGraphService";
import { IUserItem } from "../../../../Common/IUserItem";
import { CSVLink } from "react-csv";
// Add below method to call service method from react file.
private _GetGroupMembers = (items:any[]) => {
this.setState({loading:true},async()=>{
let userItems: IUserItem[] = [];
let memberStatus: string = '';
try {
if(items.length > 0){
this.setState({
GroupId:items[0].id.split('|').pop()
});
let users = await MsGraphService.GetGroupMembers(this.props.context,items[0].id.split('|').pop());
if(users.length === 0){
memberStatus = 'The selected group does not have any members';
}
else
{
users.map((user, i) => {
userItems.push({
displayName: user.displayName,
mail: user.mail
});
});
}
}
} catch (error) {
console.log("CheckGroupMembers._GetGroupMembers Error:",error);
}
console.log("CheckGroupMembers._GetGroupMembers Users:",userItems);
this.userItems = userItems;
this.setState({ userItems, memberStatus, loading: false });
});
}
