I need to write a webpart, which shows data from the MS Graph.

I wrote this example code

    import { Version } from '@microsoft/sp-core-library';
    import {
    } from '@microsoft/sp-webpart-base';
    import { escape } from '@microsoft/sp-lodash-subset';

    import styles from './HelloWorldWebPart.module.scss';
    import * as strings from 'HelloWorldWebPartStrings';

    export interface IHelloWorldWebPartProps {
      description: string;

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

      public render(): void {

          const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
          // get information about the current user from the Microsoft Graph
            .get((error, user: MicrosoftGraph.User, rawResponse?: any) => {

              // Resulat like
              //  {
              //    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users(displayName,department)/$entity",
              //    "department": "Finance",
              //    "displayName": "Megan Bowen"
              //  }


        this.domElement.innerHTML = `
          <div class="${ styles.helloWorld }"
                  <span class="${ styles.title }">Welcome to SharePoint!</span>

                  <span> Name</span>
                  <span> Deartment</span>


      protected get dataVersion(): Version {
        return Version.parse('1.0');

      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
              header: {
                description: strings.PropertyPaneDescription
              groups: [
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel

But wow I can bring the Department and Name (result form the MS Graph) into the HTML rendering?

When I really understand the MSGraphClient works asynchron. How can I get save, that first the MSGraphClient gets the result and the build the HTLM rendering part?

Thanks for your help Stefan

  • do you want to use a JS framework like React in your webpart ? – Vipul Kelkar Jul 22 '18 at 12:21
  • No, I like to use no JS framework – Stefan Jul 22 '18 at 12:38

If you look at the BaseClientSideWebPart class, you'll find a method you can override protected onInit(): Promise<void>; in you own webpart definition.
it should look like that:

protected async onInit(): Promise<void> {
await super.onInit();
// your code to get your data and affect it to a property of the class

The great thing with the onInit method is that it will execute before rendering your webpart, and display a spinner to the user as long as it's not loaded.
Then in your render method you can simply read the data from the property of your class you affected earlier.


If you are not familiair yet with javascript async, then it would be good to read more about: Await and Promises

That said, there's a tutorial on using the graph in a SPFx project: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/call-microsoft-graph-using-graphhttpclient

And there's also a SharePoint PnP starter kit with lots of samples and best practices: https://github.com/SharePoint/sp-starter-kit. Although these can become quite complex and use React.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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