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

En esta guía, se describen los errores comunes relacionados con las tarjetas que puedes encontrar y cómo corregirlos.

Usa Card Builder para diseñar y obtener una vista previa de la mensajería y las interfaces de usuario para las apps de Chat:

Cómo aparecen los errores de tarjetas

Los errores de tarjetas se manifiestan de varias maneras:

• No aparece parte de una tarjeta, como un widget o un componente, o se renderiza de una manera inesperada.
• No aparece la tarjeta completa.
• 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 funcionan y no tienen errores

Antes de examinar ejemplos de tarjetas erróneas, primero considera este mensaje y diálogo de tarjeta que funcionan. Para ilustrar cada error de ejemplo y su corrección, se modifica el JSON de esta tarjeta mediante la introducción de errores.

Un mensaje de tarjeta sin errores

Este es el mensaje de tarjeta que funciona y no tiene errores, y que detalla la información de contacto que incluye un encabezado, secciones y widgets, como texto decorado y botones:

Un diálogo sin errores

Este es el diálogo que funciona y no tiene errores, y que crea un contacto mediante la recopilación de información de los usuarios, que incluye un pie de página y widgets editables, como entrada de texto, interruptores y botones:

Error: No aparece parte de una tarjeta

A veces, las tarjetas se renderizan, pero no aparece parte de una tarjeta que esperabas ver. Las causas probables son las siguientes:

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

Causa: Falta un campo JSON obligatorio

En este ejemplo de error, falta un campo JSON obligatorio, title. Como resultado, la tarjeta se renderiza, pero no aparecen las partes de la tarjeta 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 un campo JSON es obligatorio o no, 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: Si se especifica subtitle, pero se omite el title obligatorio, todo el encabezado aparece en blanco:

    . . .
    "header": {

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

    . . .
    "header": {
            "title": "Sasha",
            "subtitle": "Software Engineer"
          }
    . . .
    

Ejemplo 2: Si se especifican subtitle, imageUrl, imageType y imageAltText, pero se omite el title obligatorio, la imagen se renderiza como se espera, pero no el subtítulo:

    . . .
    "header": {

            "subtitle": "Software Engineer",
            "imageUrl":
            "https://developers.google.com/chat/images/quickstart-app-avatar.png",
            "imageType": "CIRCLE",
            "imageAltText": "Avatar for Sasha",
          }
    . . .
    

    . . .
    "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 de uso de mayúsculas

En este ejemplo de error, el JSON de la tarjeta incluye todos los campos necesarios, pero un campo, imageUrl, tiene un error de uso de mayúsculas, ya que se escribe imageURL (con R y L mayúsculas), lo que provoca 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. En caso de duda, compara el JSON de la tarjeta con el documento de referencia de la tarjeta.

    . . .
    "header": {
      "title": "Sasha",
      "subtitle": "Software Engineer",
      "imageURL":
      "https://developers.google.com/chat/images/quickstart-app-avatar.png",
      "imageType": "CIRCLE",
      "imageAltText": "Avatar for Sasha",
    }
    . . .
    

    . . .
    "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, no aparece la tarjeta en sí. Las causas 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ó buttonList o cardFixedFooter de forma incorrecta

Si un mensaje o diálogo de tarjeta incluye un widget ButtonList especificado de forma incorrecta o un widget CardFixedFooter con botones especificados de forma incorrecta, no se muestra la tarjeta completa y no aparece nada en su lugar. Las especificaciones incorrectas podrían incluir campos faltantes, campos con errores de ortografía o de uso de mayúsculas, o JSON con una estructura incorrecta, como una coma, comilla o llave faltante.

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 impide que se renderice la tarjeta completa.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {


              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .
    

    . . .
    {
      "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 un diálogo, 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 su interfaz de tarjeta.

Estos son los motivos más comunes:

• El CardFixedFooter widget no tiene primaryButton.
• Un botón en el CardFixedFooter widget no tiene una acción onClick, o su acción onClick se especificó de forma incorrecta.
• A TextInput widget le falta un campo name.

Causa: CardFixedFooter no tiene primaryButton

En los diálogos con un CardFixedFooter widget, es necesario especificar un primaryButton con texto y color. Si se omite el primaryButton o se configura de forma incorrecta, se impide que aparezca todo el diálogo.

Para corregir este error, asegúrate de que el widget CardFixedFooter incluya un primaryButton especificado correctamente.

    . . .
    "fixedFooter": {

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

    . . .
    "fixedFooter": {
      "primaryButton": {
        "text": "Submit",
        "color": {
          "red": 0,
          "blue": 1,
          "green": 0
        },
        "onClick": {
          . . .
      },
      "secondaryButton": {
        . . .
        }
      }
    }
    . . .
    

Causa: Configuración 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 se omite, el diálogo se cierra, no se carga o no se abre.

Para corregir este error, asegúrate de que cada botón incluya una configuración onClick especificada correctamente.

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

    . . .
    "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 TextInput widget 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.

    . . .
    {
      "textInput": {
        "label": "Name",
        "type": "SINGLE_LINE",

      }
    }
    . . .
    

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

Las acciones de apertura, envío o cancelación de 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 se deba a que 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. En consecuencia, los diálogos no son compatibles con las apps compiladas con una arquitectura asíncrona architecture.

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, y los registros incluyen mensajes de error descriptivos para ayudarte a corregirlos.

Temas relacionados

Para obtener ayuda para corregir errores de la app de Google Chat, consulta Soluciona problemas y corrige errores de la app de Google Chat y Depura apps de Chat.