Cómo solucionar problemas y corregir tarjetas y diálogos

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 tarjetas

Có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.
Figura 1: El encabezado de esta tarjeta no se muestra porque falta el campo obligatorio 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.
Figura 2: El encabezado de esta tarjeta no muestra el subtítulo porque falta el campo obligatorio 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.
Figura 3: El encabezado de esta tarjeta no muestra el subtítulo porque falta el campo obligatorio 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:

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:

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.

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.