Kit de ressources Microsoft Graph dans les solutions SharePoint Framework

  • Article

Utilisez le Kit de ressources Microsoft Graph dans vos solutions SharePoint Framework.

Importante

Le @microsoft/mgt-spfx package a été abandonné. Utilisez la levée d’ambiguïté pour vos composants WebPart SharePoint Framework.

Installation

Pour charger les composants du Kit de ressources Microsoft Graph à partir de la bibliothèque, ajoutez les @microsoft/mgt-elementpackages , @microsoft/mgt-componentset @microsoft/mgt-sharepoint-provider en tant que dépendance d’exécution à votre projet SharePoint Framework :

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

ou

yarn add @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

Utilisation

Lorsque vous créez des composants WebPart et des extensions SharePoint Framework, référencez le Kit de ressources customElementsHelperMicrosoft Graph , Provideret SharePointProvider à partir de @microsoft/mgt-element et @microsoft/mgt-sharepoint-provider. Si vous n’utilisez pas React, vous devez également importer les fonctions d’inscription de composant à partir de @microsoft/mgt-components packages.

Pour les solutions non React

import { customElementsHelper, Providers } from '@microsoft/mgt-element';
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

// [...] trimmed for brevity

export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementsHelper.withDisambigutaion('contoso-hr-solution');
    registerMgtPersonComponent();
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <mgt-contoso-hr-solution-person person-query="me"></mgt-person>
      </div>`;
  }

  // [...] trimmed for brevity
}

React

Si vous créez un composant WebPart à l’aide de React, vous pouvez utiliser le @microsoft/mgt-react package et ignorer l’inscription manuelle des composants. Toutefois, veillez à charger paresseux votre composant React à partir du composant WebPart pour utiliser la levée d’ambiguïté.

// [...] trimmed for brevity
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";


// Async import of component that imports the React Components
const MgtReact = React.lazy(
  () =>
    import(/* webpackChunkName: 'mgt-react-component' */ "./components/MgtReact")
);

// set the disambiguation before initializing any web part
customElementHelper.withDisambiguation("mgt-demo-client-side-solution");

export default class MgtDemoWebPart extends BaseClientSideWebPart<IMgtDemoWebPartProps> {
  // set the global provider
  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    return super.onInit();
  }

  public render(): void {
    const element = lazyLoadComponent(MgtReact, {
      description: this.properties.description
    });

    ReactDom.render(element, this.domElement);
  }
// [...] trimmed for brevity
}

Dans les composants React sous-jacents, le composant Microsoft Graph Toolkit peut être utilisé directement.

import { Person } from '@microsoft/mgt-react';
import { ViewType } from '@microsoft/mgt-components';

// [...] trimmed for brevity

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

Importante

Assurez-vous que votre classe de composant WebPart racine n’importe pas de ressources du Kit de ressources Microsoft Graph à partir de @microsoft/mgt-react. Ceux-ci doivent être importés uniquement à l’intérieur des composants React chargés paresseux.

Configurer webpack

Pour générer votre composant WebPart, vous devez mettre à jour la configuration SharePoint Framework webpack pour gérer correctement javaScript moderne avec chaînage facultatif et fusion nullish via des transformations Babel supplémentaires.

! [IMPORTANT] Si vous ne configurez pas webpack pour traiter javaScript moderne, vous ne pourrez pas créer de composants WebPart qui utilisent le Kit de ressources Microsoft Graph.

Installer des packages Babel

Pour gérer correctement les dépendances qui émettent du code ES2021, ajoutez un chargeur babel et certaines transformations en tant que dépendances de développement au projet.

npm i --save-dev babel-loader@8.3.0 @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-logical-assignment-operators

Modifier la configuration webpack

SharePoint Framework fournit un modèle d’extensibilité pour modifier la configuration webpack utilisée pour regrouper les composants WebPart. Recherchez et ouvrez gulpfile.js. Ajoutez le code suivant au-dessus de la ligne qui contient build.initialize(require('gulp'));:

const path = require("path");
const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`
];
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /\.js$/,
      // only run on lit packages
      include: resourcePath => 
        litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });
    return generatedConfiguration;
  }
});

Contenu connexe