Criar uma web part do Microsoft Office SharePoint Online com o Kit de ferramentas do Microsoft Graph

Criar seu projeto de Web Part

Siga as instruções para criar uma nova Web Part. Quando perguntado qual modelo você gostaria de usar, escolha React.

Adicionar os pacotes do Microsoft Graph Toolkit

O Microsoft Graph Toolkit publica vários pacotes necessários para criar uma Web Part da Estrutura do SharePoint. A instalação dos @microsoft/mgt-elementpacotes , @microsoft/mgt-react, @microsoft/mgt-sharepoint-provider, e @microsoft/mgt-spfx-utils instala as dependências necessárias.

npm install @microsoft/mgt-element @microsoft/mgt-react @microsoft/mgt-sharepoint-provider @microsoft/mgt-spfx-utils

Adicionar o Provedor do Microsoft Office SharePoint Online

Os provedores do Kit de ferramentas do Microsoft Graph permitem autenticação e acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. As Web Parts do SharePoint sempre existem em um contexto autenticado porque o usuário é autenticado para acessar a página que hospeda sua web part. Use este contexto para inicializar o provedor do Microsoft Office SharePoint Online.

Primeiro, adicione o provedor à sua web part. Localize o arquivo src\webparts\<your-project>\<your-web-part>.ts na pasta do projeto e adicione a seguinte linha no início do arquivo, logo abaixo das instruções import existentes:

import { Providers } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

Em seguida, inicialize o provedor com o contexto autenticado dentro onInit() do método da web part. No mesmo arquivo, adicione o seguinte código antes da linha public render(): void {:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

Configurar a desambiguação

Para garantir que sua web part funcione se houver várias soluções de web part usando o Microsoft Graph Toolkit em uma única página, você deve usar a desambiguação. Para mais informações, veja a desambiguação.

Primeiro, atualize suas importações e @microsoft/mgt-element adicione uma para o lazyLoadComponent auxiliar.

import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";

Em seguida, atualize o onInit() método da web part raiz para configurar a desambiguação. A cadeia de caracteres usada para desambiguação deve ser exclusiva para sua solução de Estrutura do SharePoint:

protected async onInit(): Promise<void> {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementHelper.withDisambiguation('contoso-hr-solution');
  return super.onInit();
}

Atualizar a importação e renderização do componente React

Primeiro, converta a importação do componente para usar React.lazy. Localize a instrução import <WebPartName> from './components/<WebPartName>; e atualize-a para o seguinte:

const MgtComponent = React.lazy(
  () =>
    import(
      /* webpackChunkName: 'mgt-react-component' */ "./components/<WebPartName>"
    )
);

Em seguida, modifique o método render para usar o lazyLoadComponent auxiliar:

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(MgtComponent, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName
    });

    ReactDom.render(element, this.domElement);
  }

Agora, sua Web Part deve ter esta aparência:

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IReadonlyTheme } from "@microsoft/sp-component-base";
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

import * as strings from "HelloWorldWebPartStrings";
const HelloWorld = React.lazy(
  () =>
    import(
      /* webpackChunkName: 'mgt-react-component' */ "./components/HelloWorld"
    )
);
import { IHelloWorldProps } from "./components/IHelloWorldProps";

export interface IHelloWorldWebPartProps {
  description: string;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = "";

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(HelloWorld, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName,
    });

    ReactDom.render(element, this.domElement);
  }

  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementHelper.withDisambiguation("contoso-hr-solution");
    return super.onInit();
  }
  // [...] trimmed for brevity
}

Adicionar os componentes

Adicione os componentes ao componente React. Localize e abra o src\webparts\<your-project>\components\<your-component>.tsx arquivo e adicione a importação do componente que você deseja usar - neste caso, o Person componente - e atualize o render() método para usar o componente Person. Agora, seu componente deve ter esta aparência:

import * as React from "react";
import type { IHelloWorldProps } from "./IHelloWorldProps";
import { Person } from "@microsoft/mgt-react";

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return <Person personQuery="me" view="twolines" />;
  }
}

Ou se você preferir usar componentes funcionais do React:

import * as React from "react";
import type { IHelloWorldProps } from "./IHelloWorldProps";
import { Person, ViewType } from "@microsoft/mgt-react";

const HelloWorld = (props: IHelloWorldProps): React.ReactElement => (
  <Person personQuery="me" view={ViewType.twolines} />
);

export default HelloWorld;

Criar seu projeto de Web Part

Siga as instruções para criar uma nova Web Part.

Adicionar os pacotes do Microsoft Graph Toolkit

O Microsoft Graph Toolkit publica vários pacotes necessários para criar uma Web Part da Estrutura do SharePoint. Instale os pacotes npm do Microsoft Graph Toolkit usando o seguinte comando:

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

Adicionar o Provedor do Microsoft Office SharePoint Online

Os provedores do Kit de ferramentas do Microsoft Graph permitem autenticação e acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. As Web Parts do SharePoint sempre existem em um contexto autenticado porque o usuário é autenticado para acessar a página que hospeda sua web part. Use este contexto para inicializar o provedor do Microsoft Office SharePoint Online.

Primeiro, adicione o provedor à sua web part. Localize o arquivo src\webparts\<your-project>\<your-web-part>.ts na pasta do projeto e adicione a seguinte linha no início do arquivo, logo abaixo das instruções import existentes:

import { Providers } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

Em seguida, inicialize o provedor com o contexto autenticado dentro onInit() do método da web part. No mesmo arquivo, adicione o seguinte código antes da linha public render(): void {:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

Configurar a desambiguação

Para garantir que sua web part funcione se houver várias soluções de web part usando o Microsoft Graph Toolkit em uma única página, você deve usar a desambiguação. Para mais informações, veja o artigo de desambiguação .

Primeiro, atualize suas importações do @microsoft/mgt-element

import { Providers, customElementHelper } from "@microsoft/mgt-element";

Em seguida, atualize o método para configurar a onInit() desambiguação. A cadeia de caracteres usada para desambiguação deve ser exclusiva para sua solução de Estrutura do SharePoint:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementsHelper.withDisambiguation('contoso-hr-solution');
}

Adicionar os componentes

Agora, você pode começar a adicionar componentes à sua web part. Primeiro, importe as funções de registro relevantes:

import { registerMgtPersonComponent } from "@microsoft/mgt-components";

Chame as funções de registro depois de configurar a desambiguação em seu onInit() método:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementsHelper.withDisambiguation('contoso-hr-solution');
  registerMgtPersonComponent();
}

Adicione os componentes ao HTML dentro do render() método e os componentes usarão o contexto do SharePoint para acessar o Microsoft Graph. Por exemplo, para adicionar o componente Pessoa, seu código se parece com:

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