Expor web parts Estrutura do SharePoint no Microsoft Teams

Usando Estrutura do SharePoint, você pode criar web parts e extensões. Ao criar web parts, você pode permitir que elas sejam expostas como uma guia do Microsoft Teams, um aplicativo pessoal ou uma extensão de mensagens.

Dica

Para ver como usar os diferentes conceitos descritos neste artigo, consulte o aplicativo Leads de exemplo no GitHub.

Expor a Web Part como guia do Microsoft Teams

Para expor uma web part Estrutura do SharePoint do lado do cliente como uma guia do Microsoft Teams, no manifesto da Web Part, na supportedHosts propriedade, adicione TeamsTab.

Expor Web Part como aplicativo pessoal do Microsoft Teams

Para expor a Web Part como um aplicativo pessoal do Microsoft Teams, no manifesto da Web Part, na supportedHosts propriedade, adicione TeamsPersonalApp.

Dica

A mesma web part Estrutura do SharePoint pode ser exposta como uma Web Part no SharePoint, guia do Microsoft Teams e um aplicativo pessoal do Teams. Os valores especificados na propriedade decidem como os supportedHosts usuários poderão trabalhar com sua Web Part.

Expor Web Part como extensão de mensagens do Microsoft Teams

Importante

A exposição de web parts como extensão de mensagens do Microsoft Teams tem suporte com Estrutura do SharePoint v1.11 e mais recente.

Para expor sua web part Estrutura do SharePoint como uma extensão de mensagens, você não precisa usar um host específico na supportedHosts propriedade. Em vez disso, tudo o que você precisa fazer é estender o manifesto do teams em sua solução Estrutura do SharePoint com um composeExtension, por exemplo:

{
  "$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
}

A peça chave das informações é a URL na taskInfo propriedade, que deve corresponder à URL especificada no exemplo e que deve ter o componentId parâmetro de cadeia de caracteres de consulta definido como a ID da web part Estrutura do SharePoint que deve ser exposta na extensão de mensagens.

Respondendo à interação do usuário

Quando sua Web Part é exposta no Microsoft Teams como uma extensão de mensagens, talvez você queira responder à interação do usuário, por exemplo, postando um cartão adaptável na conversa. Isso requer o uso de um módulo de tarefa e um bot. O módulo de tarefa notifica o bot do evento que o usuário acionou e o bot postará dados de volta na conversa. Primeiro, no entanto, você precisa verificar se a Web Part é usada como uma extensão de mensagens.

Para verificar se sua Web Part está sendo usada como uma extensão de mensagens, verifique se a context._host._teamsManager._appContext.applicationName propriedade está definida como 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
}

ver código completo

Depois de verificar se a Web Part é usada como uma extensão de mensagens, você usa um módulo de tarefa para passar os dados da Web Part para o bot:

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]);
}

ver código completo

Depois de receber a notificação, o bot pode processar os dados recuperados e postar algumas informações na conversa.

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({});
}

ver código completo

Dica

Para obter mais informações sobre como criar extensões de mensagens do Microsoft Teams, consulte a documentação do Microsoft Teams. Para ver um exemplo de como uma web part Estrutura do SharePoint é exposta como uma extensão de mensagens, consulte o aplicativo Leads de exemplo no GitHub.

Ao optar por expor suas web parts Estrutura do SharePoint no Microsoft Teams, você tem várias opções de como implantá-las no Microsoft Teams.

Opções de implantação para soluções da Estrutura do SharePoint no Microsoft Teams

Os desenvolvedores têm várias opções ao implantar soluções de SPFx (Estrutura do SharePoint) para uso no Microsoft Teams.

Consulte opções de implantação para soluções de Estrutura do SharePoint para o Microsoft Teams para opções de implantação.