将 Teams 选项卡添加到 SharePoint

通过在 SharePoint 中将 Microsoft Teams 选项卡添加为 SPFx Web 部件,可以在 Microsoft Teams 和 SharePoint 之间获得丰富的集成体验。 本文档介绍如何从 Microsoft Teams 示例应用获取选项卡并在 SharePoint 中使用它。

Teams 和 SharePoint 之间的丰富集成

随着 11 月 Teams 和 SharePoint Framework v.1.7 的发布,开发人员具有两种强大的功能:

SharePoint 中的 Teams 选项卡

使用 SharePoint 框架 v.1.7,可以在 SharePoint 中托管 Teams 选项卡。 当 SharePoint 中托管的选项卡获得类似的完整页面体验时,公开 Teams 选项卡的所有功能,同时保留 SharePoint 网站的上下文和熟悉性。

通过将 Teams 应用引入 SharePoint,在 SharePoint 中创建丰富的应用体验。

屏幕截图显示 SharePoint 视图中的选项卡。

Teams 中的 SharePoint 框架

还可以使用 SharePoint 框架 实现 Teams 选项卡。 SharePoint 框架 Web 部件托管在 SharePoint 中,无需任何外部服务(如 Azure)。 对于 SharePoint 开发人员来说,这大大简化了 Teams 选项卡的开发过程。 有关 Teams 中的 SharePoint 框架的详细信息,请参阅如何在 Teams 中使用 SharePoint 框架

将 SharePoint Web 部件引入 Teams,并让 SharePoint 管理托管。

屏幕截图显示以选项卡的形式公开的 Web 部件。

简介

此处使用的选项卡已托管在 Azure 上,用于专注于所需的集成工作。

所使用的示例应用是人才管理应用程序。 它管理团队中空缺职位候选人的招聘过程。 请构建示例 Teams 应用并将其加载到 Teams 中。 不要创建真正的人才管理应用程序。

此方法的好处

  • 使用现有 Teams 选项卡访问 SharePoint 用户。
  • 将应用清单直接上传到 SharePoint 应用程序目录。 SharePoint 现在支持 Teams 应用程序包
  • 用户在页面上配置选项卡,就像配置任何其他 SharePoint Web 部件一样。
  • 在 Teams 中运行时,选项卡可以访问其上下文

若要将 Teams 选项卡添加到 SharePoint,请执行以下步骤将 Teams 选项卡添加到 SharePoint:

测试示例应用

下载示例应用清单

  1. 打开 Microsoft Teams。

  2. 选择“应用”>“管理应用”>“上传应用”。

  3. 选择“上传自定义应用”。

    屏幕截图显示用于在 Teams 中上传自定义应用的选项。

  4. 要上传的文件位于“下载”文件夹中。 它称为 TalentMgmt-Azure.zip。 下图显示了相应的屏幕:

    屏幕截图显示“下载”文件夹。

  5. 可以看到人才管理应用的安装或许可屏幕。 选择要安装的团队。

  6. 选择“安装”并开始试验应用。

注意

Teams 文件 选项卡中不支持 SharePoint 扩展命令。可以在 Teams 中将 SharePoint 页面、列表或文档库添加为选项卡

在 SharePoint 中使用 Teams 选项卡

  1. 访问 https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx,将 Teams 应用包上传并部署到 SharePoint 应用程序目录。 例如,https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx

  2. 出现提示时,启用“使此解决方案对组织中的所有站点可用”复选框。 下图显示了相应的屏幕:

    屏幕截图显示了“部署”对话框。

  3. 在网站中,通过选择右上角的齿轮按钮,然后选择“ 添加页面”来创建新页面。 下图显示了相应的屏幕:

    屏幕截图显示了Office 365设置选项。

  4. 可以看到 SharePoint 页面创作体验。 将页面命名为“我的 Teams 选项卡”。

  5. 选择 + 按钮打开 Web 部件工具箱,然后选择名为“Contoso HR”的 Teams 选项卡。 Web 部件按字母顺序排序。 如果它是一个长列表,可以使用搜索栏来查找它。 这会在画布中创建包含 Teams 选项卡的 Web 部件。下图显示了选项卡视图:

    显示选项卡视图的屏幕截图。

  6. 完成编辑后,选择“ 发布 ”按钮。

  7. 选择“将页面添加到导航”以在左侧导航栏中快速引用页面。 下图显示了 SharePoint 中的选项卡:

    屏幕截图显示了 SharePoint 中的选项卡。

在 SharePoint 中浏览应用程序页面

发布页面后,可以探索将 Teams 应用转变为 SharePoint 中更完整的体验。 这会将当前页面转换为应用页面,显示正常的 SharePoint 页面布局,其中包含 Teams 选项卡的完整页面体验。

下图显示了 SharePoint 中 Teams 应用的完整体验:

屏幕截图显示了 SharePoint 中的 Teams 应用。

代码示例

示例名称 说明 SPFx
SPFx Web 部件 选项卡、频道和群组的 SPFx Web 部件示例。 View

另请参阅