Adicionando uma guia do Microsoft Teams no SharePoint como uma Web Part SPFxAdding a Microsoft Teams tab in SharePoint as an SPFx web part

Importante

Este recurso atualmente está em versão prévia e está sujeito a alterações.This feature is currently in preview and is subject to change. Não há suporte para uso em ambientes de produção.It is not supported for use in production environments. Agradecemos por seus comentários sobre essa funcionalidade na lista de problemas de documentos de desenvolvimento do SharePoint.Your feedback and input around this capability is welcome using the SharePoint Dev Docs issue list.

Integração avançada entre o Teams e o SharePointRich integration between Teams and SharePoint

Com a edição de novembro do Teams e do SharePoint Framework v.With the November release of Teams and SharePoint Framework v. 1,7, os desenvolvedores têm dois recursos avançados:1.7, developers have two powerful capabilities:

Guias do teams no SharePointTeams tabs in SharePoint

Com o SharePoint Framework v. 1.7, estamos dando suporte à capacidade dos desenvolvedores de usar suas guias de equipes e hospedá-lo no SharePoint.With SharePoint Framework v.1.7, we’re now supporting the ability for developers to take their Teams tabs and host it in SharePoint. Como guias hospedados no SharePoint, obtenha uma experiência de "página inteira" semelhante, expondo todos os recursos das guias do teams enquanto mantém o contexto e a familiaridade de um site do SharePoint.As Tabs hosted in SharePoint get a similar "full page" experience, exposing the all the features of Teams tabs while retaining the context and familiarity of a SharePoint site.

Estrutura do SharePoint no TeamsSharePoint Framework in Teams

Você também pode implementar suas guias do Microsoft Teams usando o SharePoint Framework.You can also implement your Microsoft Teams tabs using SharePoint Framework. Para desenvolvedores do SharePoint, isso simplifica significativamente o processo de desenvolvimento para guias do teams porque as Web Parts da estrutura do SharePoint são hospedadas no SharePoint sem necessidade de serviços externos, como o Azure.For SharePoint developers, this significantly simplifies the development process for Teams tabs because SharePoint Framework web parts are hosted within SharePoint without any need for external services such as Azure. Saiba mais sobre como usar a estrutura do SharePoint no Microsoft Teams.Learn more about using the SharePoint Framework in Teams.

IntroduçãoIntroduction

Estas instruções explicarão como você pode obter uma guia de um aplicativo de exemplo do Microsoft Teams e usá-lo no SharePoint.These instructions will explain how you can take a tab from a Microsoft Teams sample app and use it in SharePoint. Usaremos uma guia que já está hospedada no Azure para se concentrar no trabalho de integração necessário.We will be using a tab that's already hosted on Azure in order to focus on the required integration work.

O aplicativo de exemplo que estamos usando é um aplicativo de gerenciamento de talento.The sample app we're using is a Talent Management application. Ele gerencia o processo de contratação de candidatos para posições abertas de uma equipe.It manages the hiring process of candidates for open positions in a team. (O próprio aplicativo, embora pareça bom, não faz nada.(The app itself, while it looks nice, doesn't actually do anything. Queremos nos concentrar na criação de um aplicativo do Teams e carregá-lo no Microsoft Teams, não criar um aplicativo de gerenciamento de talento real.We want to focus on building a Teams app and loading it into Teams, not create a real talent management application.)

Benefícios dessa abordagemBenefits of this approach

  • Acessar os usuários do SharePoint com sua guia do teams existenteReach SharePoint users with your existing Teams tab
  • Carregue o manifesto do aplicativo diretamente no catálogo de aplicativos do SharePoint.Upload your app manifest directly to your SharePoint app catalog. Os pacotes de aplicativos do Microsoft Teams agora são compatíveis com o SharePointTeams application packages are now supported by SharePoint
  • Os usuários finais configuram a guia em uma página assim como qualquer outra Web Part do SharePointEnd users configure the tab on a page just like any other SharePoint web part
  • Sua guia pode acessar seu contexto assim que possível ao executar o no TeamsYour tab can access its context just as it can when running inside Teams

Etapa 1: testar o aplicativo de exemploStep 1: Testing the sample app

Baixe o manifesto do aplicativo de exemplo aqui.Download the sample app manifest from here.

No Microsoft Teams, clique no ícone do repositório no canto inferior esquerdo e, em seguida, em "carregar um aplicativo personalizado" no canto inferior esquerdo.In Microsoft Teams, click on the Store icon at the lower left and then "Upload a custom app" at the lower left. O arquivo a ser carregado estará localizado na pasta downloads; Ele é chamado de TalentMgmt-Azure.zip.The file to upload will be located in your Downloads folder; it's called TalentMgmt-Azure.zip. Se tudo correr bem, você verá a tela de instalação/consentimento para o aplicativo de gerenciamento de talento.If all goes well, you'll see the install/consent screen for the talent management app. Escolha a equipe que você deseja instalar e clique no botão instalar.Choose the team you want to install to and click the Install button. Agora você está livre para experimentar o aplicativo.You're now free to experiment with the app.

Etapa 2: usar a guia Teams no SharePointStep 2: Using the Teams tab in SharePoint

Carregue e implante seu pacote de aplicativos do teams no seu catálogo de aplicativos do SharePoint https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx , por exemplo, https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx .Upload and deploy your Teams app package to your SharePoint App Catalog by visiting https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx, e.g. https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx.

Quando solicitado, habilite "tornar esta solução disponível para todos os sites na organização":When prompted, enable "Make this solution available to all sites in the organization":

Guias no modo de exibição do SharePoint

Em seu site, crie uma nova página clicando no botão de engrenagem no canto superior direito e, em seguida, "adicionar uma página":In your site, create a new page by clicking in the gear button at the upper right and then "Add a page":

Modo de exibição do SharePoint

Você verá a experiência de criação de páginas do SharePoint.You'll see the SharePoint Pages authoring experience. Nomeie a página "guia minhas equipes".Name your page "My Teams Tab".

Abra a caixa de ferramentas da Web Part pressionando o botão + e selecione sua guia Teams (chamada "contoso HR").Open the web part toolbox by pressing the + button, and select your Teams Tab (named "Contoso HR"). As Web Parts são classificadas em ordem alfabética; Se for uma lista longa, você poderá usar a barra de pesquisa para encontrá-la.Web parts are sorted alphabetically; if it's a long list, you can use the search bar to find it. Isso criará uma Web Part na tela de desenho que contém a guia de suas equipes:This will create a web part in the canvas that contains your Teams tab:

Exibição de guia

Pressione o botão "publicar" ao concluir a edição.Press the "Publish" button when you are finished editing.

Talvez você queira clicar em "Adicionar página à navegação" para ter uma referência rápida à página na barra de navegação esquerda:You may want to click "Add page to navigation" to have a quick reference to your page in the left navigation bar:

Guia na imagem do SharePoint

Etapa 3: explorar as páginas do aplicativo no SharePointStep 3: Explore App Pages in SharePoint

Depois que a página for publicada, você poderá explorar a ativação do aplicativo do Microsoft Teams para uma experiência mais completa dentro do SharePoint.Once your page is published, you can explore turning your Teams app into a more complete experience inside SharePoint. Isso converte a página atual em uma página de aplicativo, mostrando o layout de página normal do SharePoint com uma experiência de página inteira para a guia Teams:This converts the current page into an App Page, showing the normal SharePoint page layout with a full-page experience for the Teams tab:

Imagem de guias no SharePoint

Mais informaçõesMore information