@microsoft/mgt-spfx
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    SharePoint Framework library for Microsoft Graph Toolkit

    npm

    SPFx 1.12.1

    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.

    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 components from the @microsoft/mgt-react package:

    import { Person } from '@microsoft/mgt-react';
    
    // [...] 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>
        );
      }
    }

    Install

    npm i @microsoft/mgt-spfx

    DownloadsWeekly Downloads

    1,326

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    725 kB

    Total Files

    15

    Last publish

    Collaborators

    • microsoft1es
    • microsoft-graph-toolkit