Guía paso a paso: crear tu primera tarjeta adaptativa en Teams

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

¡Bienvenido de nuevo al blog! Si alguna vez te has sentido completamente abrumado por los avisos constantes de las alertas de chat, los mensajes de canal y las advertencias automatizadas, seguro que…

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

¡Bienvenido de nuevo al blog! Si alguna vez te has sentido completamente abrumado por el constante aviso de las alertas de chat, los mensajes de canal y las advertencias automatizadas, sin duda no eres el único. Hoy en día, los trabajadores digitales manejan un volumen asombroso de información, y a menudo reciben decenas de alertas cada hora. Este flujo ininterrumpido destroza nuestra concentración, nos obliga a cambiar de contexto constantemente y nos deja agotados mentalmente al final del día. En nuestro podcast, Build Actionable Teams Notifications with Adaptive Cards, explicamos cómo puedes transformar por completo tu forma de comunicarte, dejando atrás las alertas estáticas e inútiles y sustituyéndolas por mensajes inteligentes e interactivos.

Hoy vamos a ampliar esa conversación con un enfoque práctico. Esta guía te explicará el proceso de crear tu primera tarjeta adaptativa para Microsoft Teams. Tanto si necesitas agilizar aprobaciones internas, difundir alertas de incidentes críticos o simplemente hacer más fluido el trabajo diario de tu equipo, dominar las tarjetas adaptativas es una de las habilidades con mayor impacto que puedes desarrollar en el ecosistema de Microsoft 365. Vamos directamente a ver qué se necesita para empezar.

Conceptos básicos: por qué fallan las notificaciones tradicionales

Antes de ponernos a construir, conviene entender el problema central que queremos resolver. La mayoría de las notificaciones estándar en Microsoft Teams te indican que ha ocurrido algo, pero no te dan una forma directa de responder. Imagina que recibes una alerta que dice que una nueva orden de compra requiere tu aprobación. Con una notificación de texto estándar, tienes que leer la alerta, abrir un navegador web, iniciar sesión en una aplicación de línea de negocio independiente, navegar hasta el registro específico y, por último, hacer clic en "Aprobar".

Ese recorrido de varios pasos rompe tu concentración y consume minutos valiosos. Multiplica esa interrupción por sesenta veces por hora y tu productividad desaparece. Las tarjetas adaptativas resuelven esto al llevar la interfaz de la aplicación directamente a la ventana del chat. Te permiten leer datos, completar campos de formularios y hacer clic en botones de acción sin salir nunca de tu cliente de Teams. Para implementar estas tarjetas con éxito, sin embargo, necesitas entender las herramientas subyacentes y los requisitos previos necesarios para ponerlas en marcha.

Requisitos previos y herramientas

Crear tarjetas adaptativas no requiere una formación extensa en desarrollo de software, pero sí necesitas familiarizarte con el conjunto estándar de herramientas de creación que ofrece Microsoft. Tener a mano las utilidades adecuadas garantiza que el proceso de diseño avance sin problemas, desde el concepto hasta la implementación.

Recursos esenciales para diseñadores de tarjetas

Adaptive Card Designer: un entorno visual basado en navegador donde puedes arrastrar y soltar elementos, ver vistas previas en vivo de distintos dispositivos y generar al instante el esquema JSON subyacente.
Microsoft Teams UI Kit (Figma): muy útil para las guías de diseño, los temas, los estándares de accesibilidad y el dimensionado adaptable en las distintas aplicaciones cliente.
Centro de documentación oficial: tu guía de referencia para consultar las versiones de esquema compatibles, las acciones de tarjeta y las restricciones de renderizado específicas de Teams.
Plantillas de ejemplo: plantillas JSON preconfiguradas de la comunidad de código abierto que te dan una ventaja inicial con patrones habituales como aprobaciones, encuestas y alertas con contenido multimedia.

Una vez que tengas configurado tu entorno de diseño, estarás listo para empezar a montar la disposición visual y la estructura de datos de tu tarjeta.

Crear una tarjeta adaptativa

Crear una tarjeta adaptativa es, sobre todo, un ejercicio de composición de diseño y estructura JSON. Como las tarjetas adaptativas usan un esquema independiente de la plataforma, una única definición de tarjeta puede renderizarse de forma nativa en clientes de Windows, macOS, iOS, Android y web.

Uso del Adaptive Card Designer

La forma más sencilla de crear tu primera tarjeta es usar la herramienta de diseño basada en web. Este es un flujo de trabajo sencillo que puedes seguir:

Accede al Adaptive Card Designer oficial desde tu navegador web.
Selecciona una plantilla inicial, como una notificación básica o un formulario de entrada, para tener una base sólida.
Arrastra y suelta elementos visuales como TextBlock, FactSet, imágenes y ActionSet en tu lienzo.
Configura propiedades como los tamaños de fuente, el espaciado y los títulos de los botones para que coincidan con el estilo de comunicación de tu organización.
Cambia el destino de vista previa a "Microsoft Teams" para comprobar cómo verán la tarjeta tus usuarios finales.
Copia el código JSON generado automáticamente desde el panel de vista de código.

Fundamentos de la estructura JSON

Toda Adaptive Card se basa, en última instancia, en una carga útil JSON estructurada. A continuación tienes un ejemplo sencillo, pensado para principiantes, de un esquema JSON de Adaptive Card que define un saludo básico y un botón de acción:

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

En este fragmento, el objeto raíz especifica el tipo de tarjeta y la versión del esquema. El array body contiene componentes visuales como bloques de texto, mientras que el array actions define botones interactivos, como Action.Submit o Action.OpenUrl, que permiten a los usuarios desencadenar flujos de trabajo en segundo plano.

Enviar tarjetas con bots o Graph API

Una vez que la carga útil JSON esté terminada y probada en el diseñador, el siguiente paso es entregar esa tarjeta directamente a tus usuarios dentro de Microsoft Teams. Tienes varias opciones sólidas de implementación, según tu arquitectura técnica.

Puedes usar Power Automate para integraciones de flujos de trabajo de bajo código, o recurrir a bots personalizados y a Microsoft Graph API para mecanismos de entrega avanzados y de nivel empresarial. Usar una aplicación registrada en Azure AD junto con la API REST de Bot Framework te permite enviar tarjetas interactivas a usuarios concretos o a canales de alta visibilidad de forma automática.

Este es un ejemplo de estructura de carga útil al envolver tu Adaptive Card dentro de un adjunto de mensaje de 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"
          }
        ]
      }
    }
  ]
}

Al conectar esta carga útil a un desencadenador automatizado, como una nueva fila en una lista de SharePoint o una ejecución fallida del sistema en Power Automate, conviertes una alerta pasiva en un aviso activo que facilita la toma de decisiones.

Probar y depurar tarjetas

La implementación siempre debe ir precedida de pruebas rigurosas. Dado que distintos clientes (como la aplicación de escritorio de Teams, las aplicaciones móviles y los clientes de correo de Outlook) renderizan las Adaptive Cards mediante configuraciones de host diferentes, de vez en cuando pueden aparecer errores sutiles de diseño.

Al depurar tus tarjetas, ten en cuenta estas buenas prácticas:

Valida las versiones del esquema: asegúrate de que la versión de tu tarjeta coincida con las funciones que admite la arquitectura actual del cliente de Microsoft Teams.
Comprueba la representación del texto: verifica que el enlace de datos variables se rellena correctamente y que no deja espacios en blanco si un campo de datos está vacío.
Prueba en varios dispositivos: previsualiza tus tarjetas en formatos móviles estrechos para asegurarte de que las columnas y los conjuntos de botones se apilan correctamente, sin saltos de línea incómodos.
Gestiona las acciones de envío: asegúrate de que tu servicio de backend procesa correctamente las cargas útiles JSON que llegan al pulsar los botones interactivos.

Conclusión

Transformar tu experiencia diaria en Microsoft Teams consiste en reducir la fricción y acabar con el ruido digital. Al sustituir alertas estáticas e inútiles por Adaptive Cards dinámicas e interactivas, te permites a ti y a tu equipo actuar con decisión sin cambiar constantemente entre aplicaciones desconectadas. Hoy hemos repasado los mecanismos básicos para diseñar, estructurar e implementar estas tarjetas, pero esto es solo el principio de lo que puedes conseguir.

Para profundizar en estrategias de productividad y descubrir cómo las herramientas modernas pueden transformar tu espacio de trabajo digital, no dejes de escuchar el episodio de podcast complementario, Build Actionable Teams Notifications with Adaptive Cards. Empieza hoy mismo a experimentar con tus propias tarjetas, agiliza tus flujos de trabajo y recupera tu concentración profunda.