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

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:

Có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:

    . . .
    "header": {

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

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

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

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

    . . .
    {
      "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, 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 tiene primaryButton.
• Un botón del widget CardFixedFooter no tiene una acción onClick, o su acción onClick está especificada de manera incorrecta.
• Falta un campo name en el widget TextInput.

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.

    . . .
    "fixedFooter": {

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

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

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

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

      }
    }
    . . .
    

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