Как устранять неполадки с карточками и диалоговыми окнами

В этом руководстве описаны распространенные ошибки, связанные с картами, и способы их устранения.

Используйте конструктор карточек, чтобы создавать и просматривать сообщения и пользовательские интерфейсы для приложений Chat:

Как открыть конструктор карточек

Как выглядят ошибки на карточках

Ошибки карт проявляются по-разному:

  • Часть карточки, например виджет или компонент, не показывается или отображается неправильно.
  • Карточка не показывается полностью.
  • Диалоговое окно закрывается, не открывается или не загружается.

Если вы столкнулись с подобной проблемой, значит в карточке приложения есть ошибка.

Пример карточки и диалогового окна без ошибок

Прежде чем рассматривать примеры карточек с ошибками, ознакомьтесь с примером карточки и диалогового окна, которые работают правильно. Чтобы показать, как выглядит каждая ошибка и как ее исправить, мы внесли изменения в JSON этой карточки.

Сообщение о том, что карта не содержит ошибок

Ниже приведен пример карточки с контактной информацией, которая содержит заголовок, разделы и виджеты, такие как форматированный текст и кнопки.

Диалог без ошибок

Ниже приведен пример диалогового окна без ошибок, которое создает контакт, собирая информацию от пользователей, содержит нижний колонтитул и редактируемые виджеты, такие как текстовые поля, переключатели и кнопки:

Ошибка: часть карточки не показывается

Иногда карточки отображаются, но часть их содержимого отсутствует. Это может происходить по следующим причинам:

  • Отсутствует обязательное поле JSON.
  • В поле JSON допущена ошибка в написании или регистре.

Причина: отсутствует обязательное поле JSON

В этом примере ошибки отсутствует обязательное поле JSON title. В результате карточка отображается, но некоторые ее элементы отсутствуют. Если не заполнить обязательные поля, сложно предсказать, как будут отображаться карточки.

Чтобы исправить ошибку, добавьте обязательное поле JSON, в данном случае title.

Чтобы узнать, является ли поле JSON обязательным, ознакомьтесь с справочной документацией по карточкам версии 2. В этом примере описание поля title можно найти на странице CardHeader.

Приведем два примера.

Пример 1. Если указать subtitle, но не указать обязательный элемент title, весь заголовок будет пустым:

Заголовок этой карточки не отображается, поскольку отсутствует обязательное поле "Заголовок".
Рисунок 1. Заголовок этой карточки не показывается, поскольку отсутствует обязательное поле title.

Посмотреть фрагмент кода JSON для карты с ошибкой

Ошибка: в header отсутствует обязательное поле title.

    . . .
    "header": {

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

Как посмотреть правильный фрагмент кода JSON для карты

Исправлено. Обязательное поле title является частью спецификации header.

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

Пример 2. Если указать subtitle, imageUrl, imageType и imageAltText, но не добавить обязательное свойство title, изображение будет отображаться правильно, а субтитры – нет:

Заголовок этой карточки не отображается, поскольку отсутствует обязательное поле "Заголовок".
Рисунок 2. Заголовок этой карточки не содержит подзаголовок, поскольку отсутствует обязательное поле title, но изображение отображается правильно.

Посмотреть фрагмент кода JSON для карты с ошибкой

Ошибка: в header отсутствует обязательное поле title.

    . . .
    "header": {

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

Как посмотреть правильный фрагмент кода JSON для карты

Исправлено. Обязательное поле title является частью спецификации header.

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

Причина: неправильно написанный или оформленный JSON-код

В этом примере ошибки JSON карточки содержит все необходимые поля, но одно из них, imageUrl, написано с ошибкой: imageURL (заглавная буква R, заглавная буква L). Из-за этого возникает ошибка: изображение, на которое указывает поле, не отображается.

Чтобы исправить эту и другие подобные ошибки, используйте правильный формат JSON. В этом случае imageUrl – правильный ответ. Если вы не уверены, проверьте JSON-код карточки по справочной документации.

Заголовок этой карточки не отображается, поскольку отсутствует обязательное поле "Заголовок".
Рисунок 3. Заголовок этой карточки не содержит подзаголовок, поскольку отсутствует обязательное поле title, но изображение отображается корректно.

Посмотреть фрагмент кода JSON для карты с ошибкой

Ошибка: поле imageURL написано с ошибкой. Оно должно быть imageUrl.

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

Как посмотреть правильный фрагмент кода JSON для карты

Исправлено: поле imageUrl теперь написано с заглавной буквы.

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

Ошибка: не отображается вся карточка

Иногда карточка не появляется. Вот возможные причины:

  • Виджет ButtonList указан неправильно.
  • В виджете CardFixedFooter неправильно указана кнопка.

Причина: неправильно указан атрибут "цена" buttonList или "цена со скидкой" cardFixedFooter

Если в сообщении или диалоговом окне карточки неправильно указан виджет ButtonList или виджет CardFixedFooter с неправильно указанными кнопками, карточка не будет показана, а на ее месте ничего не появится. Неправильные спецификации могут включать отсутствующие поля, поля с ошибками в написании или регистре, а также неправильно структурированный код JSON, например с отсутствующей запятой, кавычкой или фигурной скобкой.

Чтобы устранить эту ошибку, проверьте JSON-код карты по справочной документации по картам. В частности, сравните все виджеты ButtonList с руководством по виджетам ButtonList.

Пример. В руководстве по виджетам ButtonList передача неполного действия onClick в первой кнопке приводит к тому, что вся карточка не отрисовывается.

Как посмотреть фрагмент JSON для ошибочной карточки

Ошибка: в объекте onClick не указаны поля, поэтому карточка не показывается.

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


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

Как посмотреть правильный фрагмент кода JSON для карточки

Исправлено. Теперь у объекта onClick есть поле openLink, поэтому карточка отображается корректно.

    . . .
    {
      "buttonList": {
        "buttons": [
          {
            "text": "Share",
            "onClick": {
              "openLink": {
                "url": "https://example.com/share",
              }
            }
          },
          {
            "text": "Edit",
            "onClick": {
              "action": {
                "function": "goToView",
                "parameters": [
                  {
                    "key": "viewType",
                    "value": "EDIT",
                  }
                ],
              }
            }
          },
        ],
      },
    }
    . . .

Ошибка: диалоговое окно закрывается, зависает или не открывается

Если диалоговое окно неожиданно закрывается, не загружается или не открывается, скорее всего, проблема связана с интерфейсом карточки.

Ниже приведены самые распространенные причины.

Причина: у CardFixedFooter нет primaryButton.

В диалоговых окнах с виджетом CardFixedFooter необходимо указать primaryButton с текстом и цветом. Если не указать primaryButton или указать его неправильно, диалоговое окно не появится.

Чтобы устранить эту ошибку, убедитесь, что в виджете CardFixedFooter правильно указан элемент primaryButton.

Как посмотреть фрагмент JSON для ошибочной карточки

Ошибка: в объекте fixedFooter не указано поле primaryButton, из-за чего диалоговое окно не загружается или не открывается.

    . . .
    "fixedFooter": {

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

Как посмотреть правильный фрагмент кода JSON для карточки

Исправлено: теперь в fixedFooter указано поле primaryButton, поэтому диалоговое окно работает правильно.

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

Причина: неправильное значение атрибута "onClick" в файле FixedFooter

В диалоговых окнах с виджетом CardFixedFooter неправильно указать или не указать параметр onClick для любой кнопки, из-за чего диалоговое окно закроется, не загрузится или не откроется.

Чтобы исправить эту ошибку, убедитесь, что для каждой кнопки задано правильное значение параметра onClick.

Как посмотреть фрагмент JSON для ошибочной карточки

Ошибка: в объекте primaryButton есть поле onClick с массивом `parameters`, в котором допущена ошибка. Из-за этого диалоговое окно не загружается или не открывается.

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

Как посмотреть правильный фрагмент кода JSON для карточки

Исправлено: объект primaryButton содержит поле onClick с массивом `parameters`, в котором нет ошибок, поэтому диалоговое окно работает правильно.

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

Причина: у TextInput нет name.

Если в диалоговом окне есть виджет TextInput, который исключает поле name, диалоговое окно работает не так, как ожидается. Оно может закрыться, открыться, но не загрузиться, или не открыться.

Чтобы исправить эту ошибку, убедитесь, что каждый виджет TextInput содержит подходящее поле name. Убедитесь, что каждое поле name в карточке уникально.

Как посмотреть фрагмент JSON для ошибочной карточки

Ошибка: в объекте textInput не указано поле name. Из-за этого диалоговое окно закрывается, не загружается или не открывается.

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

      }
    }
    . . .

Как посмотреть правильный фрагмент кода JSON для карточки

Исправлено: теперь в textInput указано поле name, поэтому диалоговое окно работает правильно.

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

Диалоговое окно открывается, отправляется или закрывается с ошибкой при асинхронной архитектуре приложения

Если при работе с диалоговыми окнами приложение Chat возвращает сообщение об ошибке Could not load dialog. Invalid response returned by bot., возможно, оно использует асинхронную архитектуру, например Cloud Pub/Sub или метод API Create Message.

Чтобы открыть, отправить или отменить диалоговое окно, требуется синхронный ответ от приложения Chat с объектом RenderActions (например, action.navigations с pushCard или endNavigation). Поэтому диалоговые окна не поддерживаются приложениями, созданными с использованием асинхронной архитектуры.

В качестве временного решения попробуйте использовать сообщение-карточку вместо диалогового окна.

Другие ошибки на карточках и в диалоговых окнах

Если описанные на этой странице способы не помогли устранить ошибку, связанную с картой, запросите журналы ошибок приложения. Запросы к журналам помогают находить ошибки в коде приложения или JSON-файле карточки. В журналах содержатся описательные сообщения об ошибках, которые помогают их устранять.

Чтобы устранить неполадки с приложением Google Chat, ознакомьтесь со статьями Как устранять неполадки с приложением Google Chat и Как отлаживать приложения Chat.

Приложения Chat, не являющиеся дополнениями: устранение неполадок с карточками и диалоговыми окнами

Следующая документация относится к приложениям Chat, которые не являются дополнениями Google Workspace. Чтобы перенести приложение Chat, которое не является дополнением, ознакомьтесь со статьей Как преобразовать приложение Chat в дополнение Google Workspace.

Для приложений Chat, которые не являются дополнениями, открытие, отправка или отмена диалогового окна требует синхронного ActionResponse с DialogEventType.