0

I have an SPFx web part and I wish to display the users within a group. I am trying to get their Display Name and other data (Email) but I get null for their Display Name. I do get data for their ID (GUID). thanks P (also including some warnings I get)

protected async getGroupData(): Promise<string> {
    console.log('getGroupData...');

    //const { context } = this.props;
    const client: MSGraphClientV3 = await this.context.msGraphClientFactory.getClient("3");
    const theADUsers: any = await client.api(`/groups/${"group guid"}/members/microsoft.graph.user`)
      .header('ConsistencyLevel', 'eventual')
      //.search('displayName:P')
      .select('displayName,id,mail,surname')
      .orderby('displayName')
      .get();

    console.log(theADUsers);

    return ""
}

odata.context : "https://graph.microsoft.com/v1.0/$metadata#users(displayName,id,mail,surname)" value : Array(15) 0 : displayName : null id : "4d76a6e0-etc" mail : null surname : null

Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(8,10): error @typescript-eslint/no-unused-vars: 'escape' is defined but never used. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(50,18): error @typescript-eslint/no-explicit-any: Unexpected any. Specify a different type. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(53,5): error prefer-const: 'stringToReturn' is never reassigned. Use 'const' instead. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(72,23): error @typescript-eslint/no-explicit-any: Unexpected any. Specify a different type.

1 Answer 1

1

You need to request the User.ReadBasic.All or User.Read.All permission to see the user profile properties.

Using the Graph Explorer, I first tried to get Group members with just Group.Read.All. This was the response:

enter image description here

I then added the User.ReadBasic.All permission and this was the response:

enter image description here

Finally I added the User.Read.All permission and I got back the full profile:

enter image description here

For SharePoint Framework, you need to make the permission requests in config/package-solution.json

enter image description here

You then need to bundle an package the solution and deploy it to the app catalog.

You then need to go to the API access page in the SharePoint Admin Center and approve the permission requests.

enter image description here

Once these steps are complete, you can use MSGraphClientV3 to make calls to the Microsoft Graph. Here's the render() method from asimple example.

import { MSGraphClientV3 } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

// ...

public render(): void {
  this.domElement.innerHTML = `
  <section class="${styles.helloGraph} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
    <div class="${styles.welcome}">
      <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
      <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
      <div>${this._environmentMessage}</div>
      <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
    </div>
    <div>
      <h3>Group Members:</h3>
      <div id="membersContainer"></div>
    </div>
  </section>`;      

  this.context.msGraphClientFactory.getClient('3')
    .then((client: MSGraphClientV3): void => {
      client.api('groups/46b50021-065a-44d3-9a9b-f2fa08084a38/members')
      .get((error: any, response: any, rawResponse?: any) => {
        const members: MicrosoftGraph.User[] = response.value;
        const elem: Element = this.domElement.querySelector("#membersContainer");
        elem.innerHTML = members.map((member) => {
          return `<span>${member.displayName} (${member.mail})</span>`;
        }).join(`<br />`);
      });
    });
}

enter image description here

5
  • Thanks Rob. Do you know where in my SPFx I have to add that? Sep 5, 2022 at 14:15
  • You add permission requests in the config/package-solution.json file and you consent those permission requests in the SharePoint Admin Center after you deploy the package to the app catalog. See the two units on calling the Microsoft Graph in the Use Microsoft Graph & third-party APIs Microsoft Learn module (docs.microsoft.com/en-us/learn/modules/…) for more details. Please note that this module has not yet been updated to use MSGraphClientV3 so the code may not work exactly as shown. Sep 5, 2022 at 14:28
  • Thanks Rob. I tried that and still just getting the GUID. My package-soluution.json now contains ... "webApiPermissionRequests": [ { "resource": "Microsoft Graph", "scope": "Group.Read.All" }, { "resource": "Microsoft Graph", "scope": "User.ReadBasic.All" } , { "resource": "Microsoft Graph", "scope": "User.Read.All" } ], Sep 5, 2022 at 14:31
  • And I approved the requests in the Admin center Sep 5, 2022 at 14:32
  • I just built a sample SPFx web part and things are working as expected. I updated my answer with the basics. Can you try running your code again? Maybe do a hard reload (CTRL +F5) to ensure caching isn't an issue. Sep 5, 2022 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.