通过

在 Microsoft Teams 中公开SharePoint 框架 Web 部件

使用SharePoint 框架，可以生成 Web 部件和扩展。 生成 Web 部件时，可以将其公开为 Microsoft Teams 选项卡、 个人应用 或 消息传递扩展。

提示

若要了解如何使用本文中所述的不同概念，请参阅 GitHub 上的 示例 Leads 应用程序 。

将 Web 部件公开为 Microsoft Teams 选项卡

若要将SharePoint 框架客户端 Web 部件作为 Microsoft Teams 选项卡公开，请在 Web 部件的清单中的属性中supportedHosts添加TeamsTab。

在 Web 部件清单中添加到 supportedHosts 属性的 TeamsTab 主机

将 Web 部件公开为 Microsoft Teams 个人应用

若要将 Web 部件公开为 Microsoft Teams 个人应用，请在 Web 部件的清单中的属性中 supportedHosts 添加 TeamsPersonalApp。

在 Web 部件清单中添加到 supportedHosts 属性的 TeamsPersonalApp 主机

提示

同一SharePoint 框架 Web 部件可以在 SharePoint、Microsoft Teams 选项卡和个人 Teams 应用中作为 Web 部件公开。 属性中指定的 supportedHosts 值决定了用户如何使用 Web 部件。

将 Web 部件公开为 Microsoft Teams 消息传递扩展

重要

SharePoint 框架 v1.11 和更高版本支持将 Web 部件公开为 Microsoft Teams 消息传递扩展。

若要将SharePoint 框架 Web 部件公开为消息传递扩展，无需在属性中使用特定主supportedHosts机。 相反，你需要做的就是在SharePoint 框架解决方案composeExtension中扩展团队清单，例如：

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  // trimmed for brevity
  "composeExtensions": [
    {
      "botId": "a349bab7-f895-4d6e-977a-764779833699",
      "canUpdateConfiguration": true,
      "commands": [
        {
          "id": "shareLead",
          "type": "action",
          "title": "Share a lead",
          "description": "Find and share a lead",
          "initialRun": false,
          "fetchTask": false,
          "context": [
            "commandBox",
            "compose"
          ],
          "taskInfo": {
            "title": "Share a lead",
            "width": "1100",
            "height": "665",
            "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}"
          }
        }
      ]
    }
  ]
  // trimmed for brevity
}

关键信息部分是属性中的 taskInfo URL，该 URL 必须与示例中指定的 URL 匹配，并且该 URL 应将componentId查询字符串参数设置为应在消息传递扩展插件中公开的SharePoint 框架 Web 部件的 ID。

SharePoint 框架 Webp 部件作为消息传递扩展公开

响应用户交互

当 Web 部件作为消息传递扩展在 Microsoft Teams 中公开时，你可能想要响应用户交互，例如通过将自适应卡片发布到对话。 这需要使用 任务模块 和 机器人。 任务模块将通知用户触发的事件的机器人，机器人会将数据发布回会话。 但首先，需要检查 Web 部件是否用作消息传递扩展。

若要检查 Web 部件是否被用作消息传递扩展，请检查该属性是否 context._host._teamsManager._appContext.applicationName 设置为 TeamsTaskModuleApplication：

private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
  const host: string = this.props.host._teamsManager._appContext.applicationName;
  if (host !== 'TeamsTaskModuleApplication') {
    return;
  }

  // web part used as a messaging extension
}

查看完整代码

验证 Web 部件是否用作消息传递扩展后，使用任务模块将数据从 Web 部件传递到机器人：

private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
  const host: string = this.props.host._teamsManager._appContext.applicationName;
  if (host !== 'TeamsTaskModuleApplication') {
    return;
  }

  // web part used as a messaging extension
  this.props.teamsContext.tasks.submitTask(selectedLead[0]);
}

查看完整代码

收到通知后，机器人可以处理检索到的数据，并将一些信息发布到会话。

protected async handleTeamsMessagingExtensionSubmitAction(context: TurnContext, action: MessagingExtensionAction): Promise<MessagingExtensionActionResponse> {
  const lead: Lead = action.data;
  let leadChangeIcon: string = "";
  if (lead.change > 0) {
    leadChangeIcon = "🔼 ";
  } else if (lead.change < 0) {
    leadChangeIcon = "🔽 ";
  }

  const leadCard = CardFactory.adaptiveCard({
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    // trimmed for brevity
  });

  await context.sendActivity({ attachments: [leadCard] });

  return Promise.resolve({});
}

查看完整代码

提示

有关生成 Microsoft Teams 消息传递扩展的详细信息，请参阅 Microsoft Teams 文档。 若要查看SharePoint 框架 Web 部件如何作为消息传递扩展公开的示例，请参阅 GitHub 上的示例 Leads 应用程序。

选择在 Microsoft Teams 中公开SharePoint 框架 Web 部件时，可以使用多种选项来将其部署到 Microsoft Teams。

适用于 Microsoft Teams 的 SharePoint 框架解决方案部署选项

部署 SharePoint 框架 (SPFx) 解决方案以在 Microsoft Teams 中使用时，开发人员提供了多种选项。

有关部署选项，请参阅 microsoft Teams SharePoint 框架解决方案的部署选项。

  • Last updated on