Diálogos

  • Artigo

As caixas de diálogo (conhecidas como módulos de tarefa no TeamsJS v1.x) permitem criar experiências pop-up modais no aplicativo teams. No pop-up, você pode:

  • Execute seu próprio código HTML ou JavaScript personalizado.
  • Mostrar um <iframe>widget baseado em como um vídeo do YouTube ou Microsoft Stream.
  • Exibir um cartão adaptável.

As caixas de diálogo são úteis para iniciar e concluir tarefas ou exibir informações avançadas, como vídeos ou painéis do Power Business Intelligence (BI). Uma experiência pop-up geralmente é mais natural para os usuários iniciarem e concluirem tarefas em comparação com uma guia ou uma experiência de bot baseada em conversa.

As caixas de diálogo são criadas na base das guias do Microsoft Teams. Eles são essencialmente uma guia dentro de uma janela pop-up. Eles usam a mesma biblioteca de clientes JavaScript do Microsoft Teams (TeamsJS), portanto, se você criou uma guia, já está familiarizado com a criação de uma caixa de diálogo.

Você pode invocar caixas de diálogo de três maneiras:

  • Guias de canal ou pessoais: usando a biblioteca do TeamsJS, você pode invocar caixas de diálogo de botões, links ou menus em sua guia. Para obter mais informações, confira usando caixas de diálogo em guias.
  • Bots: usando botões em cartões enviados do bot. Isso é útil quando você não exige que todos em um canal vejam o que estão fazendo com um bot. Por exemplo, ao fazer com que os usuários respondam a uma pesquisa em um canal, não é útil ver um registro dessa pesquisa sendo criada. Para obter mais informações, confira usando caixas de diálogo de bots do Teams.
  • Fora do Teams de um link profundo: você também pode criar URLs para invocar uma caixa de diálogo de qualquer lugar. Para obter mais informações, consulte sintaxe de link profundo da caixa de diálogo.

Componentes de uma caixa de diálogo

Veja como é uma caixa de diálogo quando invocada de um bot:

exemplo de caixa de diálogo

Uma caixa de diálogo inclui o seguinte, conforme mostrado na imagem anterior:

  1. Ícone do coloraplicativo.

  2. O nome do shortaplicativo.

  3. O título da caixa de diálogo especificado na title propriedade do objeto DialogInfo.

  4. A caixa de diálogo fecha ou cancela o botão. Se o usuário selecionar esse botão, seu aplicativo receberá um err evento. Para obter mais informações, confira exemplo para enviar o resultado de uma caixa de diálogo.

    Observação

    No momento, não é possível detectar o err evento quando uma caixa de diálogo é invocada de um bot.

  5. O retângulo azul é onde sua página da Web aparece se você estiver carregando sua própria página da Web usando a url propriedade do objeto TaskInfo. Para obter mais informações, consulte Invocar e descartar caixas de diálogo.

  6. Se você estiver exibindo um Cartão Adaptável usando a card propriedade do objeto TaskInfo, o preenchimento será adicionado para você. Para obter mais informações, confira Caixas de diálogo CSS para HTML ou JavaScript.

  7. Os botões de Cartão Adaptável são renderizados depois de selecionar Inscrever-se. Ao usar sua própria página, crie seus próprios botões. Por design, o estilo de botão primário (sólido) é aplicado à última ação raiz em um Cartão Adaptável. Para todas as outras ações, o estilo de botão padrão é aplicado.

Próxima etapa

Invocar e descartar caixas de diálogo

Confira também