En esta guía, se describen los errores comunes relacionados con las tarjetas que podrías encontrar y cómo corregirlos.
Diseña tarjetas y obtén una vista previa de ellas con el Creador de tarjetas.
Abre el Creador de tarjetasCómo aparecen los errores de tarjeta
Los errores de tarjeta se manifiestan de varias maneras:
- Una parte de una tarjeta, como un widget o componente, no aparece ni se renderiza de forma inesperada.
- No aparece toda la tarjeta.
- Un diálogo se cierra, no se abre o no se carga.
Si observas un comportamiento como este, significa que hay un error con la tarjeta de tu app.
Como referencia: un mensaje y un diálogo de la tarjeta en funcionamiento y sin errores
Antes de examinar los ejemplos erróneos de tarjetas, primero considera este mensaje y diálogo de tarjeta en funcionamiento. Para ilustrar cada error de ejemplo y su solución, el JSON de esta tarjeta se modifica mediante la introducción de errores.
Un mensaje de tarjeta sin errores
Este es el mensaje de tarjeta funcional y sin errores que detalla la información de contacto que incluye un encabezado, secciones y widgets, como texto decorado y botones:
Diálogo sin errores
Este es el diálogo funcional y sin errores que crea un contacto recopilando información de los usuarios, con un pie de página y widgets editables, como interruptores, entradas de texto y botones:
Error: No aparece parte de una tarjeta
En ocasiones, se renderizan las tarjetas, pero no aparece parte de una que esperabas ver. Las causas más probables son las siguientes:
- Falta un campo JSON obligatorio.
- Un campo JSON está mal escrito o con mayúsculas incorrectas.
Causa: Falta un campo JSON obligatorio
En este error de ejemplo, falta un campo JSON obligatorio, title
. Como resultado, se renderiza la tarjeta, pero no aparecen las partes de la tarjeta que debería aparecer. Puede ser difícil predecir cómo se renderizarán las tarjetas cuando se omiten los campos obligatorios.
Para corregir este error, agrega el campo JSON obligatorio; en este ejemplo, title
.
Para saber si un campo JSON es obligatorio, consulta la documentación de referencia de la versión 2 de las tarjetas. En este ejemplo, consulta la descripción del campo title
en CardHeader
.
Estos son dos ejemplos:
Ejemplo 1: Si especificas subtitle
, pero omites el title
obligatorio, el encabezado completo aparecerá en blanco:
![No se muestra el encabezado de esta tarjeta porque falta un campo obligatorio, el título.](https://developers.google.cn/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=7&hl=es)
title
.Ver fragmento JSON de tarjeta erróneo
Error: Falta un campo obligatorio title
en header
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Ver el fragmento JSON correcto de la tarjeta
Corregido: El campo obligatorio, title
, forma parte de la especificación header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Ejemplo 2: Si especificas subtitle
, imageUrl
, imageType
y imageAltText
, pero se omite el title
obligatorio, la imagen se renderizará como se espera, pero no el subtítulo:
![No se muestra el encabezado de esta tarjeta porque falta un campo obligatorio, el título.](https://developers.google.cn/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=7&hl=es)
title
, pero la imagen se renderiza como se espera.Ver fragmento JSON de tarjeta erróneo
Error: Falta un 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 correcto de la tarjeta
Corregido: El campo obligatorio, title
, forma parte de la especificación 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: Error de ortografía o mayúsculas en JSON
En este error de ejemplo, el JSON de la tarjeta incluye todos los campos obligatorios, pero un campo, imageUrl
, está escrito en mayúscula de manera incorrecta como 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 similares, usa el formato JSON correcto. En este caso, imageUrl
es correcto. Si tienes dudas, verifica que el JSON de la tarjeta coincida con el documento de referencia de la tarjeta.
![No se muestra el encabezado de esta tarjeta porque falta un campo obligatorio, el título.](https://developers.google.cn/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=7&hl=es)
title
, pero la imagen se renderiza como se espera.Ver fragmento JSON de tarjeta erróneo
Error: El uso de mayúsculas del campo imageURL
es incorrecto. 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 correcto de la tarjeta
Corregido: El campo imageUrl
usa mayúsculas 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. Las causas más probables son las siguientes:
- Se especificó un widget
ButtonList
de forma incorrecta. - Un widget
CardFixedFooter
tiene un botón especificado de forma incorrecta.
Causa: Se especificó un error buttonList
o cardFixedFooter
de manera incorrecta
Si un mensaje o diálogo de tarjeta incluye un widget de ButtonList
que se especificó de forma incorrecta o un widget de CardFixedFooter
con botones especificados de manera incorrecta, no se mostrará toda la tarjeta y no aparecerá nada en su lugar. Las especificaciones incorrectas podrían incluir campos faltantes, campos mal escritos o con mayúsculas, o bien un JSON con una estructura incorrecta, como falta de comas, comillas o llaves.
Para corregir este error, compara el JSON de la tarjeta con el documento de referencia de la tarjeta. En particular, compara cualquier widget de ButtonList
con la guía de widgets de ButtonList
.
Ejemplo: En una guía del widget de ButtonList
, pasar una acción onClick
incompleta en el primer botón evita que se renderice toda la tarjeta.
Ver fragmento JSON de la tarjeta erróneo
Error: El objeto onClick
no tiene campos especificados, por lo que no aparece toda la tarjeta.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Ver el fragmento JSON de tarjeta correcto
Corrección: El objeto onClick
ahora tiene un campo openLink
, por lo que la tarjeta aparece como se espera.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Error: Un diálogo se cierra, se detiene o no se abre
Si un diálogo se cierra de forma inesperada, no se carga o no se abre, la causa probable es 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 ninguna acciónonClick
, o su acciónonClick
se especificó de forma incorrecta. - Falta un campo
name
en el widgetTextInput
.
Causa: CardFixedFooter
no tiene primaryButton
En los diálogos con un widget de CardFixedFooter
, es necesario especificar un primaryButton
con texto y color. Si omites primaryButton
o la configuras, no se mostrará todo el diálogo.
Para corregir este error, asegúrate de que el widget de CardFixedFooter
incluya un primaryButton
especificado de forma correcta.
Ver fragmento JSON de la tarjeta erróneo
Error: El objeto fixedFooter
no tiene ningún campo primaryButton
especificado, lo que hace que el diálogo no se cargue ni se abra.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Ver el fragmento JSON de tarjeta correcto
Se corrigió: 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 de CardFixedFooter
, se especifica la configuración de onClick
en cualquier botón de forma incorrecta, o 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 fragmento 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 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 JSON de tarjeta correcto
Se corrigió: El objeto primaryButton
tenía 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 fragmento JSON de la tarjeta erróneo
Error: El objeto textInput
no tiene ningún 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 JSON de tarjeta correcto
Se corrigió: 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 apertura, envío o cancelación de diálogo fallan con una arquitectura de app asíncrona.
Si tu app de Chat muestra el mensaje de error Could not load dialog. Invalid response returned by bot.
mientras trabaja con diálogos, puede deberse a que tu app usa una arquitectura asíncrona, como Cloud Pub/Sub o el 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, los diálogos no son compatibles con las apps compiladas con una arquitectura asíncrona.
Como solución alternativa, considera usar un mensaje de tarjeta en lugar de un 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 tu app, consulta los registros de errores de la app. La consulta de los registros puede ayudarte a encontrar errores en el código JSON de la tarjeta o en el código de la app, y los registros incluyen mensajes de error descriptivos que te ayudarán a corregirlos.
Temas relacionados
Si necesitas ayuda para corregir errores de la app de Google Chat, consulta Cómo solucionar problemas y corregir apps de Google Chat y Cómo depurar apps de Chat.