SPFx Webpart and MSGraphClient

%3CLINGO-SUB%20id%3D%22lingo-sub-217692%22%20slang%3D%22en-US%22%3ESPFx%20Webpart%20and%20MSGraphClient%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-217692%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3EI%20need%20to%20write%20a%20webpart%2C%20which%20shows%20data%20from%20the%20MS%20Graph.%3C%2FP%3E%3CP%3EI%20wrote%20this%20example%20code%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-core-library'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EBaseClientSideWebPart%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EIPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-webpart-base'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Eescape%3C%2FSPAN%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'%40microsoft%2Fsp-lodash-subset'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'.%2FHelloWorldWebPart.module.scss'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'HelloWorldWebPartStrings'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Einterface%3C%2FSPAN%3E%20%3CSPAN%3EIHelloWorldWebPartProps%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edescription%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Eexport%3C%2FSPAN%3E%20%3CSPAN%3Edefault%3C%2FSPAN%3E%20%3CSPAN%3Eclass%3C%2FSPAN%3E%20%3CSPAN%3EHelloWorldWebPart%3C%2FSPAN%3E%20%3CSPAN%3Eextends%3C%2FSPAN%3E%20%3CSPAN%3EBaseClientSideWebPart%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EIHelloWorldWebPartProps%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Epublic%3C%2FSPAN%3E%20%3CSPAN%3Erender%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3Eclient%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EMSGraphClient%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EserviceScope%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econsume%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3EMSGraphClient%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EserviceKey%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20get%20information%20about%20the%20current%20user%20from%20the%20Microsoft%20Graph%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eclient%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eapi%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'%2Fme%2F%3F%24select%3DdisplayName%2Cdepartment'%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eget%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eerror%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Euser%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EMicrosoftGraph%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EUser%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3ErawResponse%3C%2FSPAN%3E%3CSPAN%3E%3F%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20Resulat%20like%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20%22%40odata.context%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fgraph.microsoft.com%2Fv1.0%2F%24metadata%23users(displayName%2Cdepartment)%2F%24entity%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgraph.microsoft.com%2Fv1.0%2F%24metadata%23users(displayName%2Cdepartment)%2F%24entity%3C%2FA%3E%22%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20%22department%22%3A%20%22Finance%22%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20%22displayName%22%3A%20%22Megan%20Bowen%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%2F%2F%20%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EdomElement%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EinnerHTML%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E%60%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CDIV%20class%3D%22%26quot%3B%26lt%3B%2FSPAN%22%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EhelloWorld%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CSPAN%20class%3D%22%26quot%3B%26lt%3B%2FSPAN%22%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%20%3CSPAN%3Estyles%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Etitle%3C%2FSPAN%3E%20%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%22%26gt%3BWelcome%20to%20SharePoint!%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CSPAN%3E%20Name%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CSPAN%3E%20Deartment%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3E%3C%2FSPAN%3E%3C%2FDIV%3E%60%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3Eget%3C%2FSPAN%3E%20%3CSPAN%3EdataVersion%3C%2FSPAN%3E%3CSPAN%3E()%3A%20%3C%2FSPAN%3E%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%20%3CSPAN%3EVersion%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eparse%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'1.0'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CSPAN%3Eprotected%3C%2FSPAN%3E%20%3CSPAN%3EgetPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E()%3A%20%3C%2FSPAN%3E%3CSPAN%3EIPropertyPaneConfiguration%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ereturn%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Epages%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Eheader%3A%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Edescription%3A%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EPropertyPaneDescription%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Egroups%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupName%3A%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EBasicGroupName%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EgroupFields%3A%3C%2FSPAN%3E%3CSPAN%3E%20%5B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EPropertyPaneTextField%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'description'%3C%2FSPAN%3E%3CSPAN%3E%2C%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Elabel%3A%3C%2FSPAN%3E%20%3CSPAN%3Estrings%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EDescriptionFieldLabel%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EBut%20wow%20I%20can%20bring%20the%20Department%20and%20Name%20(result%20form%20the%20MS%20Graph)%20into%20the%20HTML%20rendering%3F%3C%2FP%3E%3CP%3EWhen%20I%20really%20understand%20the%20MSGraphClient%20works%20asynchron.%20How%20can%20I%20get%20save%2C%20that%20first%20the%20MSGraphClient%20gets%20the%20result%20and%20the%20build%20the%20HTLM%20rendering%20part%3F%3C%2FP%3E%3CP%3EThanks%20for%20your%20help%3CBR%20%2F%3EStefan%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-217692%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECode%20Samples%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EOffice%20365%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPatterns%20and%20Practices%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Contributor

Hello,

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 {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} 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
client
.api('/me/?$select=displayName,department')
.get((error, user: MicrosoftGraph.User, rawResponse?: any) => {
 
// Resulat like
// {
// "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>

</div>`;
}

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

0 Replies