En esta guía, se describen errores comunes relacionados con las tarjetas que podrías encontrar y cómo solucionarlos.
Usa Card Builder para diseñar mensajes de tarjetas JSON y obtener una vista previa de ellos para apps de Chat:
Abre el Creador de tarjetasCómo aparecen los errores de tarjetas
Los errores de las tarjetas se manifiestan de varias maneras:
- Parte de una tarjeta, como un widget o componente, no aparece ni se renderiza de forma inesperada.
- No aparece toda la tarjeta.
- Se cierra un diálogo, no se abre o no se carga.
Si te encuentras con un comportamiento como este, significa que hay un error con la tarjeta de tu app.
Como referencia: Un mensaje y un diálogo de tarjeta que funcionen y no tengan errores
Antes de examinar ejemplos de tarjetas erróneos, considera este mensaje y diálogo de tarjeta que funcionan. Para ilustrar cada error de ejemplo y su solución, se modifica el JSON de esta tarjeta introduciendo errores.
Un mensaje de tarjeta sin errores
Este es el mensaje de la tarjeta, que funciona y no tiene errores, que detalla la información de contacto que cuenta con un encabezado, secciones y widgets, como texto y botones decorados:
Un diálogo sin errores
Este es el diálogo sin errores que crea un contacto mediante la recopilación información de los usuarios, con un pie de página y widgets editables, como entradas de texto interruptores y botones:
Error: No aparece parte de una tarjeta
A veces, se renderizan tarjetas, pero no aparece parte de una que esperabas ver. estas son las posibles causas:
- Falta un campo JSON obligatorio.
- Un campo JSON está mal escrito o usa las mayúsculas de manera incorrecta.
Causa: Falta un campo JSON obligatorio
En este error de ejemplo, falta el campo JSON obligatorio title
. Como resultado, se renderiza la tarjeta, pero no aparecen partes de ella que se espera que aparezcan. Puede ser difícil predecir cómo se procesan las tarjetas cuando se omiten los campos obligatorios.
Para corregir este error, agrega el campo JSON obligatorio. en este ejemplo, title
.
Para saber si el campo JSON es obligatorio, consulta la documentación de referencia de Cards v2. En este ejemplo, consulta la descripción del campo title
en CardHeader
.
A continuación, presentamos dos ejemplos:
Ejemplo 1: Se especifica subtitle
, pero se omite el title
obligatorio, el encabezado completo queda en blanco:
![El encabezado de esta tarjeta no aparece porque falta un campo obligatorio, el título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=0000&hl=es)
title
).Ver fragmento de JSON de la tarjeta erróneo
Error: Falta el campo obligatorio title
en header
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Ver el fragmento JSON de la tarjeta correcto
Corregida: El campo obligatorio, title
, forma parte de la especificación de header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Ejemplo 2: Especificar subtitle
, imageUrl
, imageType
y imageAltText
, pero omitir el title
obligatorio, hace que la imagen se renderice como se espera, pero no el subtítulo:
![El encabezado de esta tarjeta no aparece porque falta un campo obligatorio, el título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=0000&hl=es)
title
, pero la imagen se renderiza según lo esperado.Ver fragmento de JSON de la tarjeta erróneo
Error: Falta el campo obligatorio title
en header
.
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Ver el fragmento JSON de la tarjeta correcto
Corregida: El campo obligatorio, title
, forma parte de la especificación de header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Causa: JSON escrito o con mayúsculas de forma incorrecta
En este error de ejemplo, el JSON de la tarjeta incluye todos los campos requeridos, pero un campo, imageUrl
, lleva el mayúscula de forma incorrecta imageURL
(mayúscula R
mayúscula L
), lo que genera un error: la imagen a la que apunta no se renderiza.
Para corregir este error, y otros como él, usa el formato JSON correcto. En este caso, imageUrl
es correcto. Si tienes dudas, compara el JSON de la tarjeta con el documento de referencia de la tarjeta.
![El encabezado de esta tarjeta no aparece porque falta un campo obligatorio, el título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=0000&hl=es)
title
, pero la imagen se procesa según lo esperado.Ver fragmento de JSON de la tarjeta erróneo
Error: Las mayúsculas del campo imageURL
no son correctas. Debe ser imageUrl
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Ver el fragmento JSON de la tarjeta correcto
Corregido: Las mayúsculas del campo imageUrl
se escriben correctamente.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Error: No aparece una tarjeta completa
A veces, la tarjeta en sí no aparece. estas son las posibles causas:
- Un widget
ButtonList
no se especificó correctamente. - Un widget
CardFixedFooter
tiene un botón que se especificó de forma incorrecta.
Causa: buttonList
o cardFixedFooter
se especificaron de forma incorrecta.
Si un mensaje o diálogo de tarjeta incluye un widget de ButtonList
especificado incorrectamente o un widget de CardFixedFooter
con botones especificados incorrectamente, no se mostrará toda la tarjeta y no aparecerá nada en su lugar. Las especificaciones incorrectas pueden incluir campos faltantes, campos con letra o mayúsculas incorrectas, o JSON con una estructura incorrecta, como una coma, comillas o llaves faltantes.
Para corregir este error, compara el JSON de la tarjeta con el documento de referencia de la tarjeta. En particular, compara cualquier widget ButtonList
con la guía del widget ButtonList
.
Ejemplo: En una guía del widget ButtonList
, pasar una acción onClick
incompleta en el primer botón evita que se renderice toda la tarjeta.
Ver el fragmento de JSON de la tarjeta erróneo
Error: El objeto onClick
no tiene campos especificados, por lo que no aparece la tarjeta completa.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Ver el fragmento de JSON de la tarjeta correcto
Corregido: El objeto onClick
ahora tiene un campo openLink
, por lo que la tarjeta aparece como se esperaba.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Error: Se cierra, se bloquea o no se abre un diálogo
Si un diálogo se cierra de forma inesperada, no se carga o no se abre, es probable que se deba a un problema con la interfaz de la tarjeta.
Estos son los motivos más comunes:
- El widget
CardFixedFooter
no tieneprimaryButton
. - Un botón del widget
CardFixedFooter
no tiene una acciónonClick
, o su acciónonClick
está especificada de manera incorrecta. - Falta un campo
name
en el widgetTextInput
.
Causa: CardFixedFooter
no tiene primaryButton
En los diálogos con un widget CardFixedFooter
, se requiere especificar una primaryButton
con texto y color. Si se omite primaryButton
o se establece de forma incorrecta, no se mostrará todo el diálogo.
Para corregir este error, asegúrate de que el widget CardFixedFooter
incluya un primaryButton
especificado correctamente.
Ver el fragmento de JSON de la tarjeta erróneo
Error: El objeto fixedFooter
no tiene un campo primaryButton
especificado, lo que hace que el diálogo no se cargue o no se abra.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Ver el fragmento de JSON de la tarjeta correcto
Corregido: fixedFooter
ahora tiene especificado un campo primaryButton
, por lo que el diálogo funciona como se espera.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Causa: Configuración de onClick
incorrecta en FixedFooter
En los diálogos con un widget CardFixedFooter
, si se especifica la configuración onClick
en cualquier botón de forma incorrecta, o si se omite, lo que hace que el diálogo se cierre, no se cargue o no se abra.
Para corregir este error, asegúrate de que cada botón incluya un parámetro de configuración de onClick
especificado correctamente.
Ver el fragmento de JSON de la tarjeta erróneo
Error: El objeto primaryButton
tiene un campo onClick
con un array de "parámetros" mal escrito, lo que hace que el diálogo no se cargue o no se abra.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parrammetters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Ver el fragmento de JSON de la tarjeta correcto
Corregido: El objeto primaryButton
tiene un campo onClick
con un array de "parámetros" escrito correctamente, por lo que el diálogo funciona como se espera.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parameters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Causa: TextInput
no tiene name
Si un diálogo incluye un widget TextInput
que excluye el campo name
, el diálogo no se comporta como se espera. Es posible que se cierre, se abra, pero no se cargue o no se abra.
Para corregir este error, asegúrate de que cada widget de TextInput
incluya un campo name
adecuado. Asegúrate de que cada campo name
de la tarjeta sea único.
Ver el fragmento de JSON de la tarjeta erróneo
Error: El objeto textInput
no tiene un campo name
especificado, lo que hace que el diálogo se cierre, no se cargue o no se abra.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
Ver el fragmento de JSON de la tarjeta correcto
Corregido: textInput
ahora tiene especificado un campo name
, por lo que el diálogo funciona como se espera.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
Las acciones de diálogo para abrir, enviar o cancelar fallan con una arquitectura de app asíncrona.
Si la app de Chat muestra el mensaje de error
Could not load dialog. Invalid response returned by bot.
mientras trabajas con
diálogos, podría deberse a que tu app
usa una arquitectura asíncrona, como
Cloud Pub/Sub o la
método de la API Create Message.
Abrir, enviar o cancelar un diálogo requiere
una respuesta síncrona de una app de Chat con un
DialogEventType
Por lo tanto, las apps no admiten diálogos
compilada con una arquitectura asíncrona.
Como solución alternativa, puedes usar un card message en lugar de un cuadro de diálogo.
Otros errores de tarjetas y diálogos
Si las correcciones que se describen en esta página no resuelven el error relacionado con la tarjeta que experimenta la app, consulta los registros de errores de la app. Consultar los registros puede ayudarte a encontrar errores en el JSON de la tarjeta o en el código de la app, y los registros incluyen mensajes de error descriptivos para ayudarte a corregirlos.
Temas relacionados
Si necesitas ayuda para corregir errores de una app de Google Chat, consulta Cómo solucionar problemas y corregir una app de Google Chat y Cómo depurar apps de Chat.