Share via

Estender o Outlook e o Office com o Estrutura do SharePoint

  • Artigo

A versão do Estrutura do SharePoint (SPFx) v1.16 adicionou suporte ao SDK do cliente JavaScript do Microsoft Teams v2. O SDK v2 do cliente JavaScript do Microsoft Teams introduziu a capacidade de permitir que aplicativos do Teams sejam executados no Outlook no Office, além do Microsoft Teams.

Com essa melhoria no SPFx v1.16, os desenvolvedores agora podem usar o SPFx para criar aplicativos para Outlook e Office usando o suporte existente para criar aplicativos para o Microsoft Teams.

Importante

A capacidade de executar aplicativos do Microsoft Teams no Outlook e no Office está atualmente em beta com disponibilidade prevista no primeiro semestre do ano civil de 2023.

Importante

Informações essenciais necessárias para o sucesso do usuário

Para testar o uso de aplicativos do Microsoft Teams no Outlook e no Office, incluindo aqueles criados com o SPFx, você deve configurar as preferências de versão do locatário do Microsoft 365 para a versão direcionada. Para obter mais informações sobre como alterar as preferências de lançamento de suas organizações, consulte Configurar as opções de versão Standard ou Targeted.

Leva cinco dias úteis para que as preferências de lançamento do locatário entrem em vigor. Em outras palavras, altere seu locatário da faixa de versão padrão para a faixa de versão de destino no dia 5 do mês, você não poderá testar seus aplicativos do Microsoft Teams criados com o SPFx no Outlook ou Office até o dia 11 do mês.

Criar aplicativos do Microsoft Teams para Outlook e Office

Para criar um novo aplicativo do Microsoft Teams com o SPFx para Outlook e Office, você começa criando primeiro um novo projeto SPFx usando o gerador Yeoman para SharePoint v1.16 ou posterior da mesma maneira que você criaria uma nova Web Part. Para obter mais informações, consulte Criar sua primeira Web Part do lado do cliente do SharePoint.

O Gerador Yeoman do Microsoft Office SharePoint Online solicitará uma série de perguntas. Siga as mesmas diretrizes para criar uma nova Web Part SPFx ao responder a essas perguntas.

Depois que o projeto for criado, atualize a propriedade da supportedHosts Web Part para indicar onde ele pode ser usado. Por exemplo, adicione TeamsTab e/ou TeamsPersonalApp à propriedade te supportedHosts no arquivo ./config/package-solution.json . Para obter mais informações, consulte Criar guias do Microsoft Teams usando Estrutura do SharePoint.

Determinar o host de runtime atual para seu aplicativo

Seu aplicativo pode precisar determinar onde ele está em execução no momento por vários motivos. Por exemplo, os usuários devem ver uma experiência se ela estiver em execução no SharePoint, Microsoft Teams, Outlook ou outro cliente do Office?

Use a propriedade do context SPFx na classe da Web Part e o cliente JavaScript do Microsoft Teams para determinar o cliente de hospedagem. A app.host.name propriedade no cliente JavaScript do Teams contém o nome do host se for Microsoft Teams, Outlook ou Office. Se o objeto de contexto do Microsoft Teams for undefined, a Web Part estará em execução no SharePoint.

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

Criar o pacote de manifesto & de aplicativo do Microsoft Teams

Embora o botão Sincronização com o Teams do Catálogo de Aplicativos do SharePoint Online possa criar automaticamente o manifesto do aplicativo do Microsoft Teams, o pacote de aplicativos e instalá-lo na loja do Microsoft Teams, isso atualmente não dá suporte ao formato de arquivo de manifesto de aplicativo do Microsoft Teams necessário. O arquivo de manifesto do aplicativo Teams deve ser v1.13 ou posterior

A outra opção é criar manualmente o manifesto do aplicativo e o pacote de aplicativos por conta própria e incluí-los no pacote do SharePoint carregado no Catálogo de Aplicativos. Ao selecionar o botão Sincronizar com o Teams no Catálogo de Aplicativos, o SharePoint Online usará o pacote de aplicativos do Teams que você criou e incluiu no pacote do SharePoint.

Observação

Para obter mais informações sobre como criar manifestos de aplicativo e pacotes de aplicativos do Microsoft Teams manualmente, confira Opções de implantação para soluções de Estrutura do SharePoint para o Microsoft Teams

Criar o manifesto do aplicativo Microsoft Teams

A primeira etapa é criar o manifesto do aplicativo Microsoft Teams.

  1. Crie o seguinte arquivo em seu projeto SPFx: ./teams/manifest.json.
  2. Siga as diretrizes no Microsoft Teams: esquema de manifesto de aplicativo para Teams e Estrutura do SharePoint: opções de implantação para soluções de Estrutura do SharePoint para o Microsoft Teams criar um novo arquivo de manifesto de aplicativo.
  3. Anote especialmente as seguintes propriedades no arquivo manifest.json :

    • manifestVersion: isso deve ser definido como 1.13 ou superior

    • staticTabs e/ou configurableTabs: Verifique se isso segue as diretrizes para usar uma Web Part do SPFx como uma guia do Microsoft Teams.

      Por exemplo, a contentUrl propriedade e qualquer outra propriedade que faça referência a componentes SPFx devem usar os tokens dinâmicos {teamSiteDomain}, {teamSitePath}, . &{locale} Ele também deve fazer referência à ID do componente do SPFx.

      Dica

      Para obter mais informações sobre essas propriedades, consulte Estrutura do SharePoint: Opções de implantação para soluções de Estrutura do SharePoint para o Microsoft Teams, especificamente a seção em Referência dinâmica das URLs do site do SharePoint subjacentes.

Observação

Para saber mais sobre o arquivo de manifesto do aplicativo do Microsoft Teams, confira Microsoft Teams: Esquema de manifesto de aplicativo para o Teams.

Criar o pacote de aplicativos do Microsoft Teams

Depois de criar o manifesto do aplicativo Microsoft Teams, você precisa criar manualmente o pacote de aplicativos. Isso será incluído no arquivo do pacote do SharePoint (*.sppkg) que você carregará no Catálogo de Aplicativos do locatário do SharePoint.

  1. Compacte o conteúdo da pasta ./teams em seu projeto.
  2. Renomeie o pacote ZIP para TeamsSPFxApp.zip.

Importante

O pacote de aplicativos do Microsoft Teams deve ser nomeado TeamsSPFxApp.zip e salvo na pasta ./teams para que essa opção funcione com o botão Sincronizar com o Teams no Catálogo de Aplicativos do locatário.

Implantar o aplicativo Microsoft Teams baseado em SPFx

Depois de criar o pacote de aplicativos, a próxima etapa é implantá-lo e instalá-lo.

Implante o aplicativo no catálogo de aplicativos do locatário.

Em seguida, selecione o aplicativo, selecione a guia Arquivos na faixa de opções e selecione o botão Sincronizar com o Teams para implantar o pacote de aplicativo na loja do Microsoft Teams do locatário.

Observação

Para obter mais informações sobre como empacotar & pacotes do SharePoint na App Store do Microsoft Teams, consulte Estrutura do SharePoint: Opções de implantação para soluções de Estrutura do SharePoint para o Microsoft Teams.

Agora que você implantou o aplicativo no SharePoint, você pode adicioná-lo como uma Web Part a uma página em seus sites do SharePoint:

Painel do Assistente de Liderança do Microsoft Teams no SharePoint

O aplicativo também pode ser instalado no Microsoft Teams. Depois de fazer logon, selecione a opção Aplicativos na navegação vertical esquerda.

Observe que seus aplicativos estão listados na seção Compilar para sua organização :

Painel assistente de liderança do Microsoft Teams – Equipes adicionam opções de aplicativo

Depois de instalar o aplicativo, ele aparecerá na navegação vertical esquerda como um aplicativo fixado:

Painel do Assistente de Liderança do Microsoft Teams – Teams Adicionar aplicativo instalado

Aplicativo de exemplo do Microsoft Teams – Painel do Lead Assist

Você pode seguir o mesmo processo para instalar o aplicativo no Outlook como você executou no Microsoft Teams.

Dica

Para obter mais informações, consulte o exemplo React Painel de Liderança do Teams para um exemplo de trabalho que usa o SPFx para criar um aplicativo do Microsoft Teams para Outlook e Office.