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 solucionarlos.

Usa el Creador de tarjetas para diseñar y obtener una vista previa de las interfaces de usuario y de mensajería de las apps de Chat:

Abre el Creador de tarjetas

Cómo aparecen los errores de la tarjeta

Los errores de las tarjetas se manifiestan de varias maneras:

  • Parte de una tarjeta, como un widget o un componente, no aparece o 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.

A modo de referencia: un mensaje y un diálogo de tarjeta que funcionan y no tienen errores

Antes de examinar los ejemplos de tarjetas con errores, primero considera este mensaje y diálogo de la tarjeta que funciona. Para ilustrar cada error de ejemplo y su corrección, se modifica el JSON de esta tarjeta introduciendo errores.

Mensaje de tarjeta sin errores

Este es el mensaje de la tarjeta que funciona y no tiene errores, en el que se detalla la información de contacto y que cuenta con un encabezado, secciones y widgets, como texto y botones decorados:

Un diálogo sin errores

Este es el diálogo en funcionamiento y sin errores que crea un contacto recopilando 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, las tarjetas se renderizan, pero no aparece la parte que esperabas ver. Las causas probables son las siguientes:

  • Falta un campo JSON obligatorio.
  • Un campo JSON tiene un error de ortografía o tiene mayúsculas de forma incorrecta.

Causa: Falta un campo JSON obligatorio

En este error de ejemplo, falta un campo JSON obligatorio, title. Como resultado, la tarjeta se renderiza, pero no aparecen las partes que se espera que aparezcan. Puede ser difícil predecir cómo se renderizan las tarjetas cuando se omiten los campos obligatorios.

Para corregir este error, agrega el campo JSON obligatorio; en este ejemplo, title.

Para saber si se requiere un campo JSON, consulta la documentación de referencia de tarjetas v2. En este ejemplo, consulta la descripción del campo title en CardHeader.

A continuación, presentamos dos ejemplos:

Ejemplo 1: Especificar subtitle, pero omitir el title obligatorio hace que todo el encabezado aparezca en blanco:

El encabezado de esta tarjeta no se muestra porque falta un campo obligatorio, el título.
Figura 1: El encabezado de esta tarjeta no se muestra porque falta un campo obligatorio, title.

Cómo ver el fragmento JSON de la tarjeta con errores

Error: Falta el campo obligatorio title en header.

    . . .
    "header": {

            "subtitle": "Software Engineer"
          }
    . . .

Consulta el fragmento JSON correcto de la tarjeta

Se corrigió: El campo obligatorio, title, forma parte de la especificación 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 se muestra porque falta un campo obligatorio, el título.
Figura 2: El encabezado de esta tarjeta no muestra el subtítulo porque falta un campo obligatorio, title, pero la imagen se renderiza como se espera.

Cómo ver el fragmento JSON de la tarjeta con errores

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",
          }
    . . .

Consulta el fragmento JSON correcto de la tarjeta

Se corrigió: 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: JSON con errores de ortografía o mayúsculas

En este error de ejemplo, el JSON de la tarjeta incluye todos los campos necesarios, pero un campo, imageUrl, se escribe en mayúsculas de forma incorrecta como imageURL (R mayúscula L mayúscula), lo que genera un error: no se renderiza la imagen a la que apunta.

Para corregir este error y otros similares, 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 se muestra porque falta un campo obligatorio, el título.
Figura 3: El encabezado de esta tarjeta no muestra el subtítulo porque falta un campo obligatorio, title, pero la imagen se renderiza como se espera.

Cómo ver el fragmento JSON de la tarjeta con errores

Error: El campo imageURL tiene mayúsculas de forma incorrecta. 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",
    }
    . . .

Consulta el fragmento JSON correcto de la tarjeta

Se corrigió: El campo imageUrl se capitaliza 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 causas más probables:

Causa: buttonList o cardFixedFooter especificados de forma incorrecta

Si un mensaje o diálogo de la tarjeta incluye un widget ButtonList o un widget CardFixedFooter con botones especificados de forma incorrecta, no se mostrará la tarjeta completa y no aparecerá nada en su lugar. Las especificaciones incorrectas pueden incluir campos faltantes, campos con ortografía incorrecta o en mayúsculas, 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 los widgets ButtonList con la guía de widgets ButtonList.

Ejemplo: En una guía de widgets ButtonList, pasar una acción onClick incompleta en el primer botón evita que se renderice toda la tarjeta.

Cómo ver un fragmento JSON de tarjeta incorrecto

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 correcto de la tarjeta

Se corrigió: 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 bloquea o no se abre

Si un diálogo se cierra de forma inesperada, no se carga o no se abre, es probable que la causa sea 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 CardFixedFooter, es necesario especificar un primaryButton con texto y color. Si omites el primaryButton o lo configuras 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.

Cómo ver un fragmento JSON de tarjeta incorrecto

Error: El objeto fixedFooter no tiene un campo primaryButton especificado, lo que hace que el diálogo no se cargue ni se abra.

    . . .
    "fixedFooter": {

        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .

Cómo ver el fragmento JSON correcto de la tarjeta

Se corrigió: fixedFooter ahora tiene un campo primaryButton especificado, 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 incorrecta de onClick en FixedFooter

En los diálogos con un widget CardFixedFooter, especificar el parámetro de configuración onClick en cualquier botón de forma incorrecta o omitirla 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 onClick especificado correctamente.

Cómo ver un fragmento JSON de tarjeta incorrecto

Error: El objeto primaryButton tiene un campo onClick con un array de "parameters" con un error ortográfico, lo que hace que el diálogo no se cargue ni 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"
          }
        }
      }
    }
    . . .

Cómo ver el fragmento JSON correcto de la tarjeta

Se corrigió: El objeto primaryButton tiene un campo onClick con un array "parameters" 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 TextInput incluya un campo name adecuado. Asegúrate de que cada campo name de la tarjeta sea único.

Cómo ver un fragmento JSON de tarjeta incorrecto

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 JSON correcto de la tarjeta

Se corrigió: textInput ahora tiene un campo name especificado, por lo que el diálogo funciona como se espera.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",
        "name": "contactName"
      }
    }
    . . .

Las acciones de abrir, enviar o cancelar diálogos 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 trabajas con diálogos, es posible que sea porque tu app usa una arquitectura asíncrona, como Cloud Pub/Sub o el método de la API de Create Message.

Para abrir, enviar o cancelar un diálogo, se requiere una respuesta síncrona de una app de Chat con un DialogEventType. Por lo tanto, las apps compiladas con una arquitectura asíncrona no admiten diálogos.

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. Consultar los registros puede ayudarte a encontrar errores en el JSON de la tarjeta o en el código de la app. Los registros incluyen mensajes de error descriptivos para ayudarte a corregirlos.

Si necesitas ayuda para corregir errores de la app de Google Chat, consulta Cómo solucionar problemas y corregir la app de Google Chat y Cómo depurar apps de Chat.