@microsoft/mgt-spfx

SharePoint Framework library for Microsoft Graph Toolkit

Use the SharePoint Framework library for Microsoft Graph Toolkit to use Microsoft Graph Toolkit in SharePoint Framework solutions.

To prevent multiple components from registering their own set of Microsoft Graph Toolkit components on the page, you should deploy this library to your tenant and reference Microsoft Graph Toolkit components that you use in your solution from this library.

Installation

To load Microsoft Graph Toolkit components from the library, add the @microsoft/mgt-spfx package as a runtime dependency to your SharePoint Framework project:

npm install @microsoft/mgt-spfx

or

yarn add @microsoft/mgt-spfx

Before deploying your SharePoint Framework package to your tenant, you will need to deploy the @microsoft/mgt-spfx SharePoint Framework package to your tenant. You can download the package corresponding to the version of @microsoft/mgt-spfx that you used in your project, from the Releases section on GitHub.

Important: Since there can be only one version of the SharePoint Framework library for Microsoft Graph Toolkit installed in the tenant, before using MGT in your solution, consult with your organization/customer if they already have a version of SharePoint Framework library for Microsoft Graph Toolkit deployed in their tenant and use the same version to avoid issues.

If you need to use a different version of MGT other than the one supplied by the centrally deployed version of mgt-spfx then please refer to the documentation for disambiguation and mgt-spfx-utils.

Usage

When building SharePoint Framework web parts and extensions, reference the Microsoft Graph Toolkit Provider and SharePointProvider from the @microsoft/mgt-spfx package. This will ensure, that your solution will use MGT components that are already registered on the page, rather than instantiating its own. The instantiation process is the same for all web parts no matter which JavaScript framework they use:

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

// [...] trimmed for brevity

export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
  }

  // [...] trimmed for brevity
}

When building web parts using framework other than React, you can load components directly in your web part:

export default class MgtNoFrameworkWebPart extends BaseClientSideWebPart<IMgtNoFrameworkWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.mgtNoFramework}">
        <div class="${styles.container}">
          <div class="${styles.row}">
            <div class="${styles.column}">
              <span class="${styles.title}">No framework webpart</span>
              <mgt-person person-query="me" show-name show-email></mgt-person>
            </div>
          </div>
        </div>
      </div>`;
  }

  // [...] trimmed for brevity
}

If you build web part using React, load only components from the /dist/es6/spfx path in the @microsoft/mgt-react package:

import { Person } from '@microsoft/mgt-react/dist/es6/spfx';

// [...] trimmed for brevity

export default class MgtReact extends React.Component<IMgtReactProps, {}> {
  public render(): React.ReactElement<IMgtReactProps> {
    return (
      <div className={ styles.mgtReact }>
        <Person personQuery="me" />
      </div>
    );
  }
}

Changelog

3.1.3 (2023-10-06)

Bug Fixes

• a11y: mgt-file and mgt-picker visibility issues in dark-mode (#2667) (239bfb0)
• add Group entity to IDynamicPerson type and introduce typeguards to find the entity type (#2688) (b3bc50d)
• add spaces to presence hover text in mgt-person (#2693) (f50e6ab)
• disable todo checkboxes and inputs in read-only mode (#2745) (d19f078)
• ensure batch url resources start with / (#2740) (247f37a)
• ensure msal public client application is initialized (#2702) (b9fcfe7)
• ensure people-picker search works when userIds are supplied(#2736) (a724b05)
• initials rendering in mgt-person (#2764) (882aaf6)
• MgtProfile: Fix handling of null values for educations & work positions (#2717) (ba381c8)
• typing for template props data context (#2754) (c9023c2)
• update mgt-taxonomy-picker colors to match mgt-picker (#2747) (be7add8)