Abrir conteúdo em várias janelas

O Microsoft Teams fornece vários métodos para abrir o conteúdo do aplicativo em experiências imersivas de tela. O Stageview permite que os usuários adotem multitarefas dentro do Teams, por exemplo, você pode abrir o conteúdo do aplicativo em uma nova janela do Teams com um chat específico no painel lateral. O Stageview foi projetado para:

• Facilite a multitarefa no Teams.
• Colabore com várias janelas no Teams.
• Concentre-se em tarefas específicas em uma grande experiência modal.

Tipos de Stageview

Com base na interface do usuário e na funcionalidade, o Stageview oferece três maneiras de abrir o conteúdo do seu aplicativo:

• Modo de Exibição de Estágio Colaborativo
• Stageview com várias janelas
• Stageview Modal

Modo de Exibição de Estágio Colaborativo

O Modo de Exibição de Estágio Colaborativo permite cenários de multitarefa para o conteúdo do seu aplicativo no Teams. Os usuários podem abrir e exibir o conteúdo do aplicativo em uma nova janela do Teams enquanto são acompanhados por uma conversa no painel lateral. Essa exibição permite um envolvimento significativo com o conteúdo e a colaboração na mesma janela.

Melhor uso: quando o conteúdo é aberto a partir de uma conversa, como chat, canal ou guia de canal.

Stageview com várias janelas

O Stageview Multi-janela é útil para cenários que exigem que um usuário realize multitarefas no Teams sem a necessidade de colaboração. Esse modo de exibição abre o conteúdo do aplicativo em uma nova janela do Teams sem uma conversa no painel lateral, permitindo que os usuários se concentrem em suas tarefas.

Melhor uso: quando o conteúdo é aberto de uma superfície não conversacional, como um aplicativo pessoal.

Stageview Modal

O Stageview Modal é um componente de interface do usuário de tela inteira usado para renderizar o conteúdo do aplicativo dentro da janela principal do Teams. Essa exibição fornece aos usuários uma experiência focada para interagir com o conteúdo do aplicativo. O Stageview Modal é útil para exibir conteúdo avançado que não exige que o usuário realize várias tarefas ao mesmo tempo. É a exibição padrão quando o Stageview colaborativo e o Stageview de várias janelas não são compatíveis.

Invocar Stageview

Você pode invocar o Stageview no Teams por meio de um dos métodos a seguir e configurar a resposta esperada do Stageview. A tabela a seguir fornece a resposta padrão e definida para cada método de invocação do Stageview:

// App Initialize
microsoftTeams.app.initialize();

// User defined function to close the Stageview in Teams
function closeStageView() {
    // Attempt to close the Stageview using close() function
    microsoftTeams.stageView.self.close()
        .then(() => {
            console.log("Stage view closed successfully."); // Log success message
        })
        .catch((error) => {
            console.error("Error closing stage view:", error); // Log error if closing fails
        });
}

Invocar o Stageview Colaborativo do Cartão Adaptável

O Modo de Exibição de Estágio Colaborativo de um Cartão Adaptável permite que os usuários interajam com seu conteúdo enquanto continuam o fluxo da conversa. Se o Stageview Colaborativo for invocado de um JSON de Cartão Adaptável no cliente Web do Teams, ele será aberto em um Modal do Stageview.

As etapas a seguir ajudam você a entender como o Modo de Exibição de Estágio Colaborativo é invocado de um Cartão Adaptável:

1. Quando o usuário compartilha uma URL para um conteúdo do aplicativo em um chat do Teams, o bot recebe uma composeExtensions/queryLink solicitação de invocação. O bot retorna um Cartão Adaptável com o tipo tab/tabInfoAction.

2. Depois que o usuário seleciona o botão de ação no Cartão Adaptável, o Modo de Exibição de Estágio Colaborativo é aberto com base no conteúdo do Cartão Adaptável.

O código JSON a seguir é um exemplo para criar um botão de ação em um Cartão Adaptável:

{
  "type": "Action.Submit",
  "title": "Open",
  "data": {
    "msteams": {
      "type": "invoke",
      "value": {
        "type": "tab/tabInfoAction",
        "tabInfo": {
          "contentUrl": "contentUrl",
          "websiteUrl": "websiteUrl",
          "name": "Sales Report",
          "entityId": "entityId"
        }
      }
    }
  }
}

Práticas recomendadas para criar um Cartão Adaptável

• A URL do conteúdo deve estar dentro da lista do manifesto do validDomains aplicativo.
• O tipo de solicitação de invocação deve ser composeExtensions/queryLink.
• O invoke fluxo de trabalho deve ser semelhante ao appLinking fluxo de trabalho.
• Eles Action.Submit devem ser configurados Open para manter a consistência.

Se o seu aplicativo não estiver otimizado para funcionar no cliente móvel do Teams, o Stageview para aplicativos publicados por meio da Microsoft Teams Store será aberto em um navegador da Web padrão.

Invocar da API stageView

A API stageView do TeamsJS permite que você abra a janela do Teams em uma experiência Stageview com base no openMode definido. Se a openMode propriedade não estiver definida, a resposta padrão será uma Stageview colaborativa com uma conversa de painel lateral associada. Em uma experiência do Stageview colaborativo, a conversa do painel lateral é o mesmo thread de onde o Stageview foi invocado, como chat ou chat em grupo.

Os códigos a seguir são os exemplos para cada openMode valor na API stageView:

  {
    "appId": "2c19df50-1c3c-11ea-9327-cd28e4b6f7ba",
    "contentUrl": "https://teams-test-tab.azurewebsites.net",
    "title": "Test tab ordering",
    "websiteUrl": "https://teams-test-tab.azurewebsites.net",
    "openMode": "popoutWithChat"
  }

  {
    "appId": "2c19df50-1c3c-11ea-9327-cd28e4b6f7ba",
    "contentUrl": "https://teams-test-tab.azurewebsites.net",
    "title": "Test tab ordering",
    "websiteUrl": "https://teams-test-tab.azurewebsites.net",
    "openMode": "popout"
  }

  {
    "appId": "2c19df50-1c3c-11ea-9327-cd28e4b6f7ba",
    "contentUrl": "https://teams-test-tab.azurewebsites.net",
    "title": "Test tab ordering",
    "websiteUrl": "https://teams-test-tab.azurewebsites.net",
    "openMode": "modal"
  }

Quando openMode não está definido em StageViewParams, a resposta padrão é Stageview Colaborativo.

  {
    "appId": "2c19df50-1c3c-11ea-9327-cd28e4b6f7ba",
    "contentUrl": "https://teams-test-tab.azurewebsites.net",
    "title": "Test tab ordering",
    "websiteUrl": "https://teams-test-tab.azurewebsites.net"
  }

Para obter mais informações sobre a API stageView, consulte o módulo stageView.

Parâmetros da API stageView

Invocar a partir de um link profundo

Para invocar o Stageview por meio de um link profundo de sua guia ou aplicativo pessoal, encapsule o URL do link profundo na API app.openLink(url) e defina a openMode propriedade para que o conteúdo do chat seja aberto. Quando a propriedade openMode não é especificada, a resposta do Stageview de um link profundo é padronizada para o Stageview colaborativo.

Para exibir um chat específico no painel lateral, você deve especificar um threadIdarquivo . Caso contrário, a conversa do painel lateral trará o chat em grupo ou o thread do canal do qual o link profundo é invocado.

Sintaxe

Sintaxe de link profundo para o Stageview colaborativo:

https://teams.microsoft.com/l/stage/{appId}/0?context={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso","openMode":"popoutWithChat","threadId":"threadId"}

Sintaxe de link profundo codificado para o Collaborative Stageview:

https://teams.microsoft.com/l/stage/%7BappId%7D/0?context=%7B%22contentUrl%22:%22contentUrl%22,%22websiteUrl%22:%22websiteUrl%22,%22name%22:%22Contoso%22,%22openMode%22:%22popoutWithChat%22,%22threadId%22:%22threadId%22%7D

Parâmetros de consulta de link profundo

Se você deseja facilitar a multitarefa, aprimorar a colaboração ou fornecer uma experiência de usuário focada, o Stageview tem um modo para atender às suas necessidades.

Perguntas Frequentes

Exemplo de código

Confira também

Criar links detalhados