为 SharePoint Online 和 Microsoft Teams 创建 Web 部件

  • 1 分钟

在本单元中，你将了解如何根据 SharePoint 框架客户端 Web 部件是在 SharePoint 还是 Microsoft Teams 环境中运行，有条件地显示信息。

SharePoint 框架和 Microsoft Teams 上下文

所有 SharePoint 组件（包括客户端 Web 部件）都有权访问当前上下文。 this.context对象提供的上下文，使组件可以访问有关组件正在运行的页面的详细信息。

组件可以使用页面上下文（可从 this.context.pageContext 对象访问）来获取有关当前网站集、网站、页面和用户的信息。

Microsoft 在 SharePoint 框架 v1.8 版本中引入了新上下文，添加了对将客户端 Web 部件部署为 Microsoft Teams 选项卡的支持。 对象this.context.sdks.microsoftTeams是 @microsoft/teams-js 包中可用的对象的引用microsoftTeams。

客户端 Web 部件可以通过检查对象是否设置为值或未定义来检测它是否 microsoftTeams 在 SharePoint 或 Microsoft Teams 中运行。 undefined如果是 ，则组件不在 Microsoft Teams 中运行。

使用 Microsoft Teams 上下文

看看组件如何使用 Microsoft Teams 上下文。

下面的代码示例包含一个方法，该方法构造一条消息，指示 Web 部件是在 SharePoint、Microsoft Teams 还是 Office 选项之一中运行。

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              throw new Error('Unknown host');
          }

          return environmentMessage;
        });
}

摘要

在本单元中，你了解了如何根据 SharePoint 框架客户端 Web 部件是在 SharePoint 还是 Microsoft Teams 环境中运行，有条件地显示信息。