Creación de tarjetas adaptativas en Copilot Studio

Domina una forma clara y visual de capturar información con tarjetas adaptativas: interfaces basadas en JSON que se adaptan a Copilot Studio, Outlook, Teams o SharePoint sin necesidad de programar. Con una sola tarjeta puedes guiar al usuario, validar respuestas y devolver resultados consistentes usando variables.

¿Qué son las tarjetas adaptativas y por qué usarlas?

Las tarjetas adaptativas permiten comunicarte con el usuario mediante una interfaz ordenada, con texto estructurado e imágenes. El mismo JSON se adapta automáticamente al contenedor: Copilot Studio, Outlook, Teams o SharePoint. Su objetivo es presentar formularios compactos y coherentes, y compartir capacidades con otros servicios dentro del ecosistema de Microsoft.

• Interfaz visual con imagen, texto y opciones bien presentadas.
• Un único JSON que cada aplicación interpreta para mostrarse correctamente.
• Ideal para formularios, confirmaciones y recopilación de datos clave.
• Reutilizable en varios productos de Microsoft sin cambios en la lógica.

¿Cómo crear y configurar una Microsoft Adaptive Card con Copilot?

Hay dos caminos: diseñarla desde el designer en adaptivecards.microsoft.com/designer, o pedir a Copilot que genere el JSON. En el designer puedes arrastrar una imagen, configurar su URL y agregar textos; luego exportas el JSON. La vía rápida es dictarle a Copilot los campos y opciones; el modelo de código Codex devuelve el JSON listo para copiar y pegar en tu agente.

¿Qué opciones de ejemplo incluye el formulario del hotel?

• Plan de alimentación: solo alojamiento, desayuno incluido, desayuno más cena incluidos, todo incluido.
• Servicios adicionales con selección múltiple: estacionamiento, transporte de aeropuerto, acceso al spa, actividades turísticas.
• Idioma preferido: español, inglés, francés, alemán.

¿Cómo obtener el JSON sin programar?

• Pedir a Copilot: “créame una Microsoft Adaptive Card para nuestro hotel…” con las opciones deseadas.
• Recibir el JSON generado por Codex y usar “copiar código”.
• Pegar el JSON directamente en el nodo de tarjeta adaptativa en Copilot Studio.

¿Cómo integrarla en Copilot Studio y aprovechar variables y confirmaciones?

En Copilot Studio, crea el nodo de tarjeta adaptativa, pega el JSON y usa la vista previa. Puedes editar contenidos, arrastrar elementos y asegurar consistencia entre título y valor de cada opción. Esto facilita recorrer la estructura y mostrar resultados al usuario sin ambigüedad.

• Ajusta títulos y valores para que coincidan exactamente.
• Verifica que la tarjeta incluya un botón de enviar.
• Identifica las salidas como variables: plan de alimentación, idioma preferido y servicios adicionales (por ejemplo, “Additional Services”).

¿Cómo usar variables en preguntas de confirmación?

Después de capturar datos con la tarjeta, formula una pregunta de confirmación tipo test con opciones “sí” y “no”. Inserta variables para personalizar el mensaje: tipo de habitación, fecha de check-in, plan de alimentación, idioma y servicios adicionales. Sustituye los placeholders por las variables existentes para mantener coherencia.

• Inserta la variable de “tipo de habitación”.
• Usa la variable de “fecha del check-in”.
• Muestra el plan de alimentación seleccionado y el idioma elegido.
• Presenta la lista de servicios adicionales capturados.

¿Cómo manejar decisiones y volver a un paso anterior?

Configura la condición: si el usuario responde “no”, regresa al paso anterior desde administración de temas. Selecciona “paso” y el punto donde retomas las preguntas previas a la tarjeta adaptativa. Así cierras el ciclo de corrección cuando haya errores o cambios.

Para avanzar, identifica en tu proyecto qué preguntas conviene convertir en formulario con tarjeta adaptativa y cuáles mantener como preguntas tradicionales. Usa variables para presentar resultados de forma clara y consistente.

¿Qué pregunta transformarías hoy en tarjeta adaptativa y por qué? Cuéntalo en los comentarios y enriquezcamos el flujo entre todos.