md ms-graph-client
cd ms-graph-client
yo @microsoft/sharepoint
npm shrinkwrap
code .
npm install @microsoft/microsoft-graph-types --save-dev
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "ms-graph-client-client-side-solution",
"id": "3d05713c-be24-48a5-84c9-02390c5340aa",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"webApiPermissionRequests": [
"resource": "Microsoft Graph",
"scope": "User.ReadBasic.All"
}
]
},
"paths": {
"zippedPackage": "solution/ms-graph-client.sppkg"
import { WebPartContext } from
'@microsoft/sp-webpart-base'
;
export
interface
IConnectWithMsGraphClientProps {
description:
string
context: WebPartContext;
default
class
ConnectWithMsGraphClientWebPart extends BaseClientSideWebPart<IConnectWithMsGraphClientWebPartProps> {
public
render():
void
const
element: React.ReactElement<IConnectWithMsGraphClientProps> = React.createElement(
ConnectWithMsGraphClient,
this
.properties.description,
context:
.context
);
ReactDom.render(element,
.domElement);
.
IUsernfo {
displayName:
mail:
userPrincipalName:
import { IUserInfo } from
'./IUserInfo'
IConnectWithMsGraphClientState {
users: Array<IUserInfo>;
import { MSGraphClient } from
'@microsoft/sp-http'
import *
as
MicrosoftGraph from
'@microsoft/microsoft-graph-types'
import {
autobind,
PrimaryButton,
DetailsList,
DetailsListLayoutMode,
CheckboxVisibility,
SelectionMode
} from
'office-ui-fabric-react'
// Configure the columns for the DetailsList component
let _usersListColumns = [
key:
'displayName'
,
name:
'Display name'
fieldName:
minWidth: 50,
maxWidth: 100,
isResizable:
true
'mail'
'Mail'
'userPrincipalName'
'User Principal Name'
minWidth: 100,
maxWidth: 200,
];
ConnectWithMsGraphClient extends React.Component<IConnectWithMsGraphClientProps, IConnectWithMsGraphClientState> {
constructor(props: IConnectWithMsGraphClientProps, state: IConnectWithMsGraphClientState) {
super(props);
// Initialize the state of the component
.state = {
users: []
};
@autobind
private
getUserDetails():
.props.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient):
=> {
// Get user information from the Microsoft Graph
client
.api(
'users'
)
.version(
"v1.0"
.select(
"displayName,mail,userPrincipalName"
get
((error, result: any, rawResponse?: any) => {
// handle the response
if
(error) {
console.log(error);
return
// Prepare the output array
var users: Array<IUserInfo> =
new
Array<IUserInfo>();
// Map the JSON response to the output array
result.value.map((item: any) => {
users.push({
displayName: item.displayName,
mail: item.mail,
userPrincipalName: item.userPrincipalName,
});
// Update the component state accordingly to the result
.setState(
users: users,
render(): React.ReactElement<IConnectWithMsGraphClientProps> {
(
<div className={styles.connectWithMsGraphClient}>
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>Microsoft Graph</span>
<p className={styles.subTitle}>Consume MS Graph with SPFx!</p>
<p className={styles.description}>{escape(
.props.description)}</p>
<p className={styles.form}>
<PrimaryButton
text=
'Search'
title=
onClick={
.getUserDetails}
/>
</p>
.state.users !=
null
&&
.state.users.length > 0) ?
<DetailsList
items={
.state.users}
columns={_usersListColumns}
setKey=
'set'
checkboxVisibility={CheckboxVisibility.hidden}
selectionMode={SelectionMode.none}
layoutMode={DetailsListLayoutMode.fixedColumns}
compact={
:
</div>
gulp bundle --ship
gulp package-solution --ship