Guia passo a passo: criando seu primeiro Adaptive Card no MS Teams

By Mirko Peters · 2026-08-12 · Updated 2026-08-29

Que bom ter você de volta ao blog! Se você já se sentiu completamente sobrecarregado com os alertas constantes de chat, as mensagens de canal e os avisos automatizados, você certamente…

Automatically translated with AI from the original post. Read the English original

Titelbild: Step-by-Step Guide: Building Your First Adaptive Card in MS Teams

Bem-vindo de volta ao blog! Se você já se sentiu completamente sobrecarregado com os alertas constantes de chat, as mensagens de canal e os avisos automatizados, certamente não está sozinho. Hoje, os trabalhadores digitais lidam com um volume impressionante de informações, muitas vezes recebendo dezenas de alertas a cada hora. Esse fluxo ininterrupto quebra nosso foco, obriga a constantes trocas de contexto e nos deixa mentalmente esgotados ao final do dia. No nosso episódio do podcast, Build Actionable Teams Notifications with Adaptive Cards, exploramos como você pode transformar completamente sua forma de se comunicar, abandonando alertas estáticos e inúteis e substituindo-os por mensagens inteligentes e interativas.

Hoje, vamos aprofundar essa conversa com uma abordagem prática. Este guia vai orientá-lo no processo de criação do seu primeiro Adaptive Card para o Microsoft Teams. Seja para simplificar aprovações internas, divulgar alertas críticos de incidentes ou apenas tornar o fluxo de trabalho diário da sua equipe mais fluido, dominar os Adaptive Cards é uma das habilidades de maior alavancagem que você pode desenvolver no ecossistema do Microsoft 365. Vamos direto ao ponto e ver o que é preciso para começar.

Entendendo o básico: por que as notificações tradicionais falham

Antes de começarmos a construir, é útil entender o problema central que queremos resolver. A maioria das notificações padrão no Microsoft Teams informa que algo aconteceu, mas não oferece uma forma direta de responder. Imagine que você recebe um alerta informando que um novo pedido de compra precisa da sua aprovação. Com uma notificação de texto comum, você precisa ler o alerta, abrir um navegador, fazer login em outro aplicativo de negócios, navegar até o registro específico e, por fim, clicar em "Aprovar".

Esse percurso de várias etapas quebra sua concentração e consome minutos preciosos. Multiplique essa interrupção por sessenta vezes por hora e sua produtividade desaparece. Os Adaptive Cards resolvem isso trazendo a interface do aplicativo diretamente para dentro da janela do chat. Eles permitem ler dados, preencher campos de formulário e clicar em botões de ação sem sair do cliente do Teams. Para implementar esses cards com sucesso, porém, é preciso entender as ferramentas e os pré-requisitos por trás deles.

Pré-requisitos e ferramentas

Criar Adaptive Cards não exige um grande histórico em desenvolvimento de software, mas você precisa se familiarizar com o conjunto padrão de ferramentas de criação fornecido pela Microsoft. Ter os utilitários certos à mão garante que o processo de design funcione bem, do conceito à implantação.

Recursos essenciais para designers de cards

Adaptive Card Designer: um playground visual no navegador onde você pode arrastar e soltar elementos, visualizar prévias em dispositivos e gerar instantaneamente o esquema JSON subjacente.
Microsoft Teams UI Kit (Figma): essencial para diretrizes de design, temas, padrões de acessibilidade e dimensionamento responsivo em diferentes aplicativos cliente.
Central de documentação oficial: seu guia definitivo para verificar as versões de esquema compatíveis, as ações de card e as restrições de renderização específicas do Teams.
Modelos de exemplo: modelos JSON prontos da comunidade open source que dão um ponto de partida para padrões comuns, como aprovações, enquetes e alertas com mídia rica.

Com o ambiente de design configurado, você está pronto para começar a montar o layout visual e a estrutura de dados do seu card.

Criando um Adaptive Card

Criar um Adaptive Card é, principalmente, um exercício de composição de layout e estrutura JSON. Como os Adaptive Cards usam um esquema independente de plataforma, uma única definição de card pode ser renderizada nativamente em clientes Windows, macOS, iOS, Android e web.

Usando o Adaptive Card Designer

A forma mais fácil de criar seu primeiro card é usando a ferramenta de design baseada na web. Veja um fluxo de trabalho simples para seguir:

Acesse o Adaptive Card Designer oficial no seu navegador.
Selecione um modelo inicial, como uma notificação básica ou um formulário de entrada, para ter uma base sólida.
Arraste e solte elementos visuais, como TextBlocks, FactSets, imagens e ActionSets, para a sua tela.
Configure propriedades como tamanhos de fonte, espaçamento e títulos de botões para alinhar o cartão ao estilo de comunicação da sua organização.
Altere o destino de visualização para "Microsoft Teams" para verificar como o cartão será exibido para os seus usuários finais.
Copie o código JSON gerado automaticamente no painel de exibição de código.

Noções básicas da estrutura JSON

Todo Adaptive Card é, em última instância, alimentado por uma carga JSON estruturada. A seguir, um exemplo simples e fácil de entender para iniciantes, de um esquema JSON de Adaptive Card que define uma saudação básica e um botão de ação:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to your first adaptive card!",
      "size": "Medium",
      "weight": "Bolder"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Acknowledge"
    }
  ]
}

Neste trecho, o objeto raiz especifica o tipo de cartão e a versão do esquema. O array body contém componentes visuais, como blocos de texto, enquanto o array actions define botões interativos, como Action.Submit ou Action.OpenUrl, que permitem que os usuários disparem fluxos de trabalho em segundo plano.

Envie cartões com bots ou pela API do Graph

Depois que a sua carga JSON estiver finalizada e testada no designer, o próximo passo é entregar esse cartão diretamente aos seus usuários dentro do Microsoft Teams. Há algumas opções robustas de implantação, dependendo da sua arquitetura técnica.

Você pode usar o Power Automate para integrações de fluxos de trabalho low-code, ou utilizar bots personalizados e a API do Microsoft Graph para mecanismos de entrega avançados, de nível corporativo. Usar um aplicativo registrado no Azure AD junto com a API REST do Bot Framework permite enviar cartões interativos automaticamente para usuários específicos ou canais de alta visibilidade.

Veja a seguir um exemplo de estrutura de carga ao encapsular o seu Adaptive Card em um anexo de mensagem do Bot Framework:

{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
          {
            "type": "TextBlock",
            "text": "New Service Request Pending Review"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Approve"
          },
          {
            "type": "Action.Submit",
            "title": "Reject"
          }
        ]
      }
    }
  ]
}

Ao conectar essa carga a um gatilho automatizado, como uma nova linha em uma lista do SharePoint ou uma execução com falha no Power Automate, você transforma um alerta passivo em um estímulo ativo para tomada de decisão.

Teste e depure os cartões

A implantação deve sempre ser precedida de testes rigorosos. Como diferentes clientes (como o aplicativo de desktop do Teams, os aplicativos móveis e os clientes de e-mail do Outlook) renderizam os Adaptive Cards por meio de configurações de host exclusivas, pequenos erros de layout podem aparecer ocasionalmente.

Ao depurar os seus cartões, tenha em mente estas boas práticas:

Valide as versões do esquema: garanta que a versão do cartão corresponda aos recursos suportados pela arquitetura atual do cliente do Microsoft Teams.
Verifique a renderização de texto: confirme que a vinculação de dados variáveis é preenchida corretamente e não resulta em espaços em branco quando um campo de dados está vazio.
Teste em vários dispositivos: visualize os seus cartões em telas móveis estreitas para garantir que as colunas e os conjuntos de botões se ajustem bem, sem quebras de linha desajeitadas.
Trate as ações de envio: certifique-se de que o seu serviço de back-end processe corretamente as cargas JSON recebidas, disparadas pelos botões de interação do usuário.

Conclusão

Transformar a sua rotina diária no Microsoft Teams é uma questão de reduzir atritos e cortar o ruído digital. Ao substituir alertas estáticos e pouco úteis por Adaptive Cards dinâmicos e interativos, você capacita a si mesmo e a sua equipe a agir com decisão, sem alternar o tempo todo entre aplicativos desconectados. Hoje, percorremos as mecânicas básicas de criar, estruturar e implantar esses cartões, mas isso é apenas o começo do que você pode alcançar.

Para se aprofundar em estratégias de produtividade e descobrir como ferramentas modernas podem transformar o seu espaço de trabalho digital, não deixe de ouvir o episódio complementar do podcast, Build Actionable Teams Notifications with Adaptive Cards. Comece a testar os seus próprios cartões personalizados hoje, simplifique os seus fluxos de trabalho e recupere o seu foco profundo!