在 SharePoint 中将 Microsoft 团队选项卡添加为 SPFx web 部件Adding a Microsoft Teams tab in SharePoint as an SPFx web part


此功能暂处于预览阶段,可能会发生变更。This feature is currently in preview and is subject to change. 不支持在生产环境中使用。It is not supported for use in production environments. 欢迎使用 SharePoint 开发人员文档问题列表提供有关此功能的反馈意见。Your feedback and input around this capability is welcome using the SharePoint Dev Docs issue list.

团队和 SharePoint 之间的丰富集成Rich integration between Teams and SharePoint

在11月发布的团队和 SharePoint Framework 2007 中。With the November release of Teams and SharePoint Framework v. 1.7,开发人员具有两项强大的功能:1.7, developers have two powerful capabilities:

SharePoint 中的团队选项卡Teams tabs in SharePoint

通过 SharePoint Framework 1.7 版,我们现在支持开发人员将其团队选项卡和托管在 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. 作为 SharePoint 中托管的选项卡获取类似的 "整页" 体验,从而公开了 "团队" 选项卡的所有功能,同时保留了 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.

团队中的 SharePoint 框架SharePoint Framework in Teams

您还可以使用 SharePoint 框架实施 Microsoft 团队选项卡。You can also implement your Microsoft Teams tabs using SharePoint Framework. 对于 SharePoint 开发人员,这极大地简化了团队选项卡的开发过程,因为 SharePoint 框架 web 部件托管在 SharePoint 中,无需任何外部服务(如 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. 了解有关在团队中使用 SharePoint 框架的详细信息。Learn more about using the SharePoint Framework in Teams.


这些说明将介绍如何从 Microsoft 团队示例应用中获取一个选项卡,并在 SharePoint 中使用它。These instructions will explain how you can take a tab from a Microsoft Teams sample app and use it in SharePoint. 我们将使用 Azure 上已托管的选项卡,以将重点放在所需的集成工作上。We will be using a tab that's already hosted on Azure in order to focus on the required integration work.

我们正在使用的示例应用是一个人才管理应用程序。The sample app we're using is a Talent Management application. 它管理团队中打开职位的候选人的聘用过程。It manages the hiring process of candidates for open positions in a team. (应用程序本身,尽管它看起来不错,但实际上并不会执行任何操作。(The app itself, while it looks nice, doesn't actually do anything. 我们希望将重点放在团队应用程序上,并将其加载到团队中,而不是创建真实的人才管理应用程序。 ) We want to focus on building a Teams app and loading it into Teams, not create a real talent management application.)

此方法的优点Benefits of this approach

  • 使用现有团队选项卡访问 SharePoint 用户Reach SharePoint users with your existing Teams tab
  • 将您的应用程序清单直接上传到 SharePoint 应用程序目录。Upload your app manifest directly to your SharePoint app catalog. 团队应用程序包 现已由 SharePoint 支持Teams application packages are now supported by SharePoint
  • 最终用户在页面上配置选项卡的方式与任何其他 SharePoint web 部件一样End users configure the tab on a page just like any other SharePoint web part
  • 您的选项卡可以像在团队中运行一样访问其上下文Your tab can access its context just as it can when running inside Teams

步骤1:测试示例应用程序Step 1: Testing the sample app

此处下载示例应用程序清单。Download the sample app manifest from here.

在 Microsoft 团队中,单击左下角的 "存储" 图标,然后在左下角 "上载自定义应用"。In Microsoft Teams, click on the Store icon at the lower left and then "Upload a custom app" at the lower left. 要上载的文件将位于您的 "下载" 文件夹中。它被称为 TalentMgmt-Azure.zip。The file to upload will be located in your Downloads folder; it's called TalentMgmt-Azure.zip. 如果一切正常,你将看到 "人才管理" 应用程序的 "安装/同意" 屏幕。If all goes well, you'll see the install/consent screen for the talent management app. 选择要安装到的团队,然后单击 "安装" 按钮。Choose the team you want to install to and click the Install button. 现在,你可以免费试用该应用。You're now free to experiment with the app.

步骤2:使用 SharePoint 中的 "团队" 选项卡Step 2: Using the Teams tab in SharePoint

通过访问将团队应用程序包上载并部署到 SharePoint 应用程序目录 https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx 中,例如 https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspxUpload 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.

出现提示时,启用 "使此解决方案可用于组织中的所有站点":When prompted, enable "Make this solution available to all sites in the organization":

Sharepoint 视图中的选项卡

在网站中,单击右上角的 "齿轮" 按钮以创建新页面,然后单击 "添加页面":In your site, create a new page by clicking in the gear button at the upper right and then "Add a page":

Sharepoint 视图

你将看到 SharePoint 页面创作体验。You'll see the SharePoint Pages authoring experience. 将页面命名为 "我的团队选项卡"。Name your page "My Teams Tab".

按 "+" 按钮打开 "web 部件工具箱",然后选择名为 "Contoso HR" 的 "团队" 选项卡 () 。Open the web part toolbox by pressing the + button, and select your Teams Tab (named "Contoso HR"). Web 部件按字母顺序排序;如果是较长的列表,则可以使用搜索栏查找它。Web parts are sorted alphabetically; if it's a long list, you can use the search bar to find it. 这将在包含 "团队" 选项卡的画布中创建 web 部件:This will create a web part in the canvas that contains your Teams tab:


完成编辑后,请按 "发布" 按钮。Press the "Publish" button when you are finished editing.

您可能需要单击 "将页面添加到导航" 以快速引用左侧导航栏中的页面:You may want to click "Add page to navigation" to have a quick reference to your page in the left navigation bar:

Sharepoint 图像中的选项卡

步骤3:浏览 SharePoint 中的应用程序页Step 3: Explore App Pages in SharePoint

发布页面后,您可以浏览在 SharePoint 中将团队应用程序转变成更全面的体验Once your page is published, you can explore turning your Teams app into a more complete experience inside SharePoint. 此操作会将当前页面转换为应用程序页面,显示常规 SharePoint 页面布局,并为 "团队" 选项卡提供完整页面体验:This converts the current page into an App Page, showing the normal SharePoint page layout with a full-page experience for the Teams tab:

Sharepoint 中选项卡的图像

更多信息More information