Эта страница переведена с помощью Cloud Translation API.

Добавляйте интерактивные элементы пользовательского интерфейса на карточки.

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

Приложения для чата могут использовать следующие интерфейсы чата для создания интерактивных карточек:

Сообщения , содержащие одну или несколько открыток.
«Домашние страницы» — это карточка, которая появляется на вкладке «Главная» в личных сообщениях в приложении «Чат».
Диалоговые окна — это карточки, которые открываются в новом окне из сообщений и с главных страниц сайтов.

Когда пользователи взаимодействуют с карточками, приложения чата могут использовать полученные данные для их обработки и соответствующего ответа. Подробнее см. раздел «Сбор и обработка информации от пользователей Google Chat» .

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

Откройте конструктор карточек.

Предварительные требования

Приложение Google Chat, настроенное на получение и обработку событий взаимодействия . Для создания интерактивного приложения чата выполните одно из следующих быстрых руководств в зависимости от архитектуры приложения , которое вы хотите использовать:

HTTP-сервис с использованием Google Cloud Functions
Google Apps Script
Google Cloud Dialogflow CX
Google Cloud Pub/Sub

Добавить кнопку

Виджет ButtonList отображает набор кнопок. Кнопки могут отображать текст, значок или и текст, и значок одновременно. Каждая Button поддерживает действие OnClick , которое происходит при нажатии пользователем кнопки. Например:

Откройте гиперссылку с помощью OpenLink , чтобы предоставить пользователям дополнительную информацию.
Выполните action , которое запускает пользовательскую функцию, например, вызов API.

Для обеспечения доступности кнопки поддерживают альтернативный текст.

Добавьте кнопку, которая запускает пользовательскую функцию.

Ниже представлена карточка, состоящая из виджета ButtonList с двумя кнопками. Одна кнопка открывает документацию для разработчиков Google Chat в новой вкладке. Другая кнопка запускает пользовательскую функцию goToView() и передает параметр viewType="BIRD EYE VIEW" .

Добавьте кнопку в стиле Material Design.

Ниже представлен набор кнопок, выполненных в различных стилях Material Design.

Чтобы применить стиль Material Design, не используйте атрибут 'color'.

Добавьте кнопку с пользовательским цветом и деактивированную кнопку.

Вы можете запретить пользователям нажимать кнопку, установив значение параметра "disabled": "true" .

Ниже представлена карточка, состоящая из виджета ButtonList с двумя кнопками. Одна кнопка использует поле Color для настройки цвета фона. Другая кнопка деактивирована с помощью поля Disabled , что не позволяет пользователю нажать на кнопку и выполнить функцию.

Добавьте кнопку со значком.

Ниже представлена карточка, состоящая из виджета ButtonList с двумя виджетами Button значков. Одна кнопка использует поле knownIcon для отображения встроенного значка электронной почты Google Chat. Другая кнопка использует поле iconUrl для отображения пользовательского виджета значка .

Добавьте кнопку со значком и текстом.

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

Настройте кнопку для сворачиваемого раздела.

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

Добавить меню переполнения

Overflow menu можно использовать в карточках чата для предоставления дополнительных опций и действий. Оно позволяет добавить больше опций, не перегружая интерфейс карточки, и обеспечить чистый и организованный дизайн.

Добавить список чипсов

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

Сбор информации от пользователей.

В этом разделе объясняется, как добавлять виджеты, собирающие информацию, например, текст или выделенные фрагменты.

Чтобы узнать, как обрабатывать вводимые пользователями данные, см. раздел «Сбор и обработка информации от пользователей Google Chat» .

Собрать текст

Виджет TextInput предоставляет поле, в которое пользователи могут вводить текст. Виджет поддерживает подсказки, которые помогают пользователям вводить стандартизированные данные, и Actions при изменении, которые выполняются при изменении текста в поле ввода, например, при добавлении или удалении текста пользователем.

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

Ниже представлена карточка, состоящая из виджета TextInput :

Соберите даты или время.

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

Ниже представлена карточка, состоящая из трех различных типов виджетов DateTimePicker :

Предоставьте пользователям возможность выбирать товары.

Виджет SelectionInput предоставляет набор выбираемых элементов, таких как флажки, переключатели, переключатели или выпадающее меню. Вы можете использовать этот виджет для сбора заданных и стандартизированных данных от пользователей. Для сбора неопределенных данных от пользователей используйте виджет TextInput .

Виджет SelectionInput поддерживает подсказки, которые помогают пользователям вводить стандартизированные данные, и Actions при изменении, которые выполняются при изменении значения в поле ввода выбора, например, когда пользователь выбирает или отменяет выбор элемента.

Приложения для чата могут получать и обрабатывать значения выбранных элементов. Подробную информацию о работе с полями ввода форм см. в разделе «Обработка информации, введенной пользователями» .

В этом разделе приведены примеры карточек, использующих виджет SelectionInput . В примерах используются различные типы полей ввода разделов:

Флажки
радиокнопки
Переключатели
Выпадающее меню
Меню множественного выбора

Добавить флажок

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

Добавить переключатель

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

Добавить переключатель

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

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

Вы можете динамически заполнять элементы выпадающего меню данными из источников данных в Google Workspace или из внешнего источника данных. Для использования динамических источников данных необходимо указать поле data_source_configs , представляющее собой массив объектов DataSourceConfig . Каждый DataSourceConfig может содержать либо platformDataSource , либо remoteDataSource . В настоящее время поддерживается только один DataSourceConfig .

Заполнение элементов из Google Workspace

Для заполнения элементов данными из источников Google Workspace, таких как пользователи Google Workspace, необходимо указать поле platformDataSource в объекте DataSourceConfig . В отличие от использования статических items , объекты SelectionItem не используются, поскольку эти элементы выбора динамически формируются на основе данных из Google Workspace.

Приведённый ниже код демонстрирует выпадающее меню, в котором отображаются пользователи Google Workspace:

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "contacts",
            "type": "DROPDOWN",
            "label": "Select contact from organization",
            "data_source_configs": [
              {
                "platformDataSource": {
                  "commonDataSource": "USER"
                },
                "min_characters_trigger": 1
              }
            ]
          }
        }
      ]
    }
  ]
}

Заполнение элементов данными из внешнего источника.

Для заполнения данных из стороннего или внешнего источника данных, например, системы управления взаимоотношениями с клиентами (CRM), используется поле remoteDataSource в DataSourceConfig , указывающее функцию, которая возвращает данные из этого источника.

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

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "widgets": [
        {
          "selectionInput": {
            "name": "crm_leads",
            "type": "DROPDOWN",
            "label": "Select CRM Lead",
            "data_source_configs": [
              {
                "remoteDataSource": {
                  "function": "getCrmLeads"
                },
                "min_characters_trigger": 2
              }
            ],
            "items": [
              {
                "text": "Suggested Lead 1",
                "value": "lead-1"
              }
            ]
          }
        }
      ]
    }
  ]
}

Чтобы уменьшить количество запросов к динамическому источнику данных, вы можете включить предлагаемые элементы, которые появляются в выпадающем меню до того, как пользователь начнет вводить текст. Вы также можете настроить выпадающее меню на автозаполнение элементов в зависимости от того, что вводит пользователь, установив параметр min_characters_trigger в DataSourceConfig . Когда пользователь вводит не менее указанного в min_characters_trigger количества символов, запускается функция, указанная в remoteDataSource . Объект события, передаваемый вашей функции, включает ввод пользователя в ключе autocomplete_widget_query .

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

В Google Workspace элементы меню с возможностью множественного выбора можно заполнять из следующих источников данных:

Пользователи Google Workspace : Вы можете добавлять пользователей только в рамках одной организации Google Workspace.
Чат-пространства : Пользователь, вводящий элементы в меню с множественным выбором, может просматривать и выбирать только те пространства, к которым он принадлежит в рамках своей организации Google Workspace.

Для использования источников данных Google Workspace необходимо указать поле platformDataSource . В отличие от других типов ввода для выбора, объекты SelectionItem не указываются, поскольку эти элементы выбора динамически загружаются из Google Workspace.

Следующий код демонстрирует меню с множественным выбором пользователей Google Workspace. Для заполнения списка пользователей поле выбора устанавливает commonDataSource в USER :

JSON

{
  "selectionInput": {
    "name": "contacts",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 5,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "commonDataSource": "USER"
    }
  }
}

Следующий код демонстрирует меню с множественным выбором для чат-пространств. Для заполнения пространств поле выбора задает значение поля hostAppDataSource . Меню с множественным выбором также устанавливает defaultToCurrentSpace в true , что делает текущее пространство выбором по умолчанию в меню:

JSON

{
  "selectionInput": {
    "name": "spaces",
    "type": "MULTI_SELECT",
    "label": "Selected contacts",
    "multiSelectMaxSelectedItems": 3,
    "multiSelectMinQueryLength": 1,
    "platformDataSource": {
      "hostAppDataSource": {
        "chatDataSource": {
          "spaceDataSource": {
            "defaultToCurrentSpace": true
          }
        }
      }
    }
  }
}

В меню с возможностью множественного выбора также можно заполнять элементы из стороннего или внешнего источника данных. Например, вы можете использовать меню с возможностью множественного выбора, чтобы помочь пользователю выбрать из списка потенциальных клиентов в системе управления взаимоотношениями с клиентами (CRM).

Для использования внешнего источника данных необходимо указать функцию в поле externalDataSource , которая возвращает элементы из этого источника данных.

Чтобы уменьшить количество запросов к внешнему источнику данных, можно включить предлагаемые элементы, которые появляются в меню множественного выбора до того, как пользователи начнут вводить текст. Например, можно заполнить список недавно найденных контактов пользователя. Для заполнения предлагаемых элементов из внешнего источника данных укажите объекты SelectionItem .

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

Node.js

node/selection-input/index.js

Посмотреть на GitHub

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Python

python/selection-input/main.py

Посмотреть на GitHub

'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': "getContacts" },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_contact("3")]
}

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java

Посмотреть на GitHub

.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction("getContacts"))
  .setItems(List.of(getContact("3")))))))))));

Apps Script

apps-script/selection-input/selection-input.gs

Посмотреть на GitHub

selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "getContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getContact("3")]
}

Для внешних источников данных вы также можете использовать автозаполнение элементов, которые пользователи начинают вводить в меню с множественным выбором. Например, если пользователь начинает вводить Atl в меню, отображающем города США, ваше приложение для чата может автоматически предложить Atlanta до того, как пользователь закончит ввод. Вы можете использовать автозаполнение до 100 элементов.

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

Передайте объект события, представляющий взаимодействие пользователя с меню.
Убедитесь, что значение invokedFunction события взаимодействия соответствует функции из поля externalDataSource .
Если функции совпадают, возвращайте предлагаемые элементы из внешнего источника данных. Чтобы предлагать элементы на основе того, что вводит пользователь, получите значение ключа autocomplete_widget_query . Это значение представляет собой то, что пользователь вводит в меню.

Приведенный ниже код выполняет автозаполнение элементов из внешнего источника данных. Используя предыдущий пример, приложение «Чат» предлагает элементы в зависимости от момента срабатывания функции getContacts :

Node.js

node/selection-input/index.js

Посмотреть на GitHub

/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Python

python/selection-input/main.py

Посмотреть на GitHub

def on_widget_update(event: dict) -> dict:
  """Responds to a WIDGET_UPDATE event in Google Chat."""
  if "getContacts" == event.get("common").get("invokedFunction"):
    query = event.get("common").get("parameters").get("autocomplete_widget_query")
    return { 'actionResponse': {
      'type': "UPDATE_WIDGET",
      'updatedWidget': { 'suggestions': { 'items': list(filter(lambda e: query is None or query in e["text"], [
        # The list is static here but it could be dynamic.
        get_contact("1"), get_contact("2"), get_contact("3"), get_contact("4"), get_contact("5")
      # Only return items based on the query from the user
      ]))}}
    }}


def get_contact(id: str) -> dict:
  """Generate a suggested contact given an ID."""
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Java

java/selection-input/src/main/java/com/google/chat/selectionInput/App.java

Посмотреть на GitHub

// Responds to a WIDGET_UPDATE event in Google Chat.
Message onWidgetUpdate(JsonNode event) {
  if ("getContacts".equals(event.at("/invokedFunction").asText())) {
    String query = event.at("/common/parameters/autocomplete_widget_query").asText();
    return new Message().setActionResponse(new ActionResponse()
      .setType("UPDATE_WIDGET")
      .setUpdatedWidget(new UpdatedWidget()
        .setSuggestions(new SelectionItems().setItems(List.of(
          // The list is static here but it could be dynamic.
          getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
        // Only return items based on the query from the user
        ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList()))));
  }
  return null;
}

// Generate a suggested contact given an ID.
GoogleAppsCardV1SelectionItem getContact(String id) {
  return new GoogleAppsCardV1SelectionItem()
    .setValue(id)
    .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
    .setText("Contact " + id);
}

Apps Script

apps-script/selection-input/selection-input.gs

Посмотреть на GitHub

/**
 * Responds to a WIDGET_UPDATE event in Google Chat.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app.
 */
function onWidgetUpdate(event) {
  if (event.common["invokedFunction"] === "getContacts") {
    const query = event.common.parameters["autocomplete_widget_query"];
    return { actionResponse: {
      type: "UPDATE_WIDGET",
      updatedWidget: { suggestions: { items: [
        // The list is static here but it could be dynamic.
        getContact("1"), getContact("2"), getContact("3"), getContact("4"), getContact("5")
      // Only return items based on the query from the user
      ].filter(e => !query || e.text.includes(query))}}
    }};
  }
}

/**
 * Generate a suggested contact given an ID.
 *
 * @param {String} id The ID of the contact to return.
 * @return {Object} The contact formatted as a suggested item for selectors.
 */
function getContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Проверьте данные, введенные в карты.

На этой странице объясняется, как проверять данные, вводимые в action карточки и виджеты. Например, вы можете проверить, что текстовое поле ввода содержит текст, введенный пользователем, или что оно содержит определенное количество символов.

Настройте необходимые виджеты для действий.

В рамках action карточки добавьте в список requiredWidgets имена виджетов, необходимых для выполнения действия.

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

Если для действия установлено значение "all_widgets_are_required": "true" , то для выполнения этого действия требуются все виджеты на карточке.

Установите действие `all_widgets_are_required` в многострочном выборе.

JSON

{
  "sections": [
    {
      "header": "Select contacts",
      "widgets": [
        {
          "selectionInput": {
            "type": "MULTI_SELECT",
            "label": "Selected contacts",
            "name": "contacts",
            "multiSelectMaxSelectedItems": 3,
            "multiSelectMinQueryLength": 1,
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "value": "contact-1",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 1",
                "bottomText": "Contact one description",
                "selected": false
              },
              {
                "value": "contact-2",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 2",
                "bottomText": "Contact two description",
                "selected": false
              },
              {
                "value": "contact-3",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 3",
                "bottomText": "Contact three description",
                "selected": false
              },
              {
                "value": "contact-4",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 4",
                "bottomText": "Contact four description",
                "selected": false
              },
              {
                "value": "contact-5",
                "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
                "text": "Contact 5",
                "bottomText": "Contact five description",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

Установите действие `all_widgets_are_required` в dateTimePicker.

JSON

{
  "sections": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "A datetime picker widget with both date and time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_and_time",
            "label": "meeting",
            "type": "DATE_AND_TIME"
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just date:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_date_only",
            "label": "Choose a date",
            "type": "DATE_ONLY",
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textParagraph": {
            "text": "A datetime picker widget with just time:"
          }
        },
        {
          "divider": {}
        },
        {
          "dateTimePicker": {
            "name": "date_time_picker_time_only",
            "label": "Select a time",
            "type": "TIME_ONLY"
          }
        }
      ]
    }
  ]
}

Установите действие `all_widgets_are_required` в выпадающем меню.

JSON

{
  "sections": [
    {
      "header": "Section Header",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 1,
      "widgets": [
        {
          "selectionInput": {
            "name": "location",
            "label": "Select Color",
            "type": "DROPDOWN",
            "onChangeAction": {
              "all_widgets_are_required": true
            },
            "items": [
              {
                "text": "Red",
                "value": "red",
                "selected": false
              },
              {
                "text": "Green",
                "value": "green",
                "selected": false
              },
              {
                "text": "White",
                "value": "white",
                "selected": false
              },
              {
                "text": "Blue",
                "value": "blue",
                "selected": false
              },
              {
                "text": "Black",
                "value": "black",
                "selected": false
              }
            ]
          }
        }
      ]
    }
  ]
}

Настройте проверку данных для текстового поля ввода.

В поле проверки виджета textInput можно указать ограничение по количеству символов и тип ввода для этого текстового поля.

Установите ограничение на количество символов для текстового поля ввода.

JSON

{
  "sections": [
    {
      "header": "Tell us about yourself",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "favoriteColor",
            "label": "Favorite color",
            "type": "SINGLE_LINE",
            "validation": {"character_limit":15},
            "onChangeAction":{
              "all_widgets_are_required": true
            }
          }
        }
      ]
    }
  ]
}

Задайте тип ввода для текстового поля ввода.

JSON

{
  "sections": [
    {
      "header": "Validate text inputs by input types",
      "collapsible": true,
      "uncollapsibleWidgetsCount": 2,
      "widgets": [
        {
          "textInput": {
            "name": "mailing_address",
            "label": "Please enter a valid email address",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "EMAIL"
            },
            "onChangeAction": {
              "all_widgets_are_required": true
            }
          }
        },
        {
          "textInput": {
            "name": "validate_integer",
            "label": "Please enter a number",
              "type": "SINGLE_LINE",
            "validation": {
              "input_type": "INTEGER"
            }
          }
        },
        {
          "textInput": {
            "name": "validate_float",
            "label": "Please enter a number with a decimal",
            "type": "SINGLE_LINE",
            "validation": {
              "input_type": "FLOAT"
            }
          }
        }
      ]
    }
  ]
}

Устранение неполадок

Когда приложение или карточка Google Chat выдает ошибку, интерфейс чата отображает сообщение «Что-то пошло не так» или «Не удалось обработать ваш запрос». Иногда интерфейс чата не отображает никаких сообщений об ошибке, но приложение или карточка чата выдает неожиданный результат; например, сообщение на карточке может не появиться.

Хотя сообщение об ошибке может не отображаться в пользовательском интерфейсе чата, подробные сообщения об ошибках и данные журнала доступны для исправления ошибок, если включено ведение журнала ошибок для приложений чата. Для получения помощи по просмотру, отладке и исправлению ошибок см. раздел «Устранение неполадок и исправление ошибок Google Chat» .

Предварительные требования

Добавить кнопку

Добавьте кнопку, которая запускает пользовательскую функцию.

Добавьте кнопку в стиле Material Design.

Добавьте кнопку с пользовательским цветом и деактивированную кнопку.

Добавьте кнопку со значком.

Добавьте кнопку со значком и текстом.

Настройте кнопку для сворачиваемого раздела.

Добавить меню переполнения

Добавить список чипсов

Сбор информации от пользователей.

Собрать текст

Соберите даты или время.

Предоставьте пользователям возможность выбирать товары.

Добавить флажок

Добавить переключатель

Добавить переключатель

Добавить выпадающее меню

Динамическое заполнение выпадающих меню

Заполнение элементов из Google Workspace

JSON

Заполнение элементов данными из внешнего источника.

JSON

Добавить меню с возможностью множественного выбора

JSON

JSON

Node.js

Python

Java

Apps Script

Node.js

Python

Java

Apps Script

Проверьте данные, введенные в карты.

Настройте необходимые виджеты для действий.

Установите действие all_widgets_are_required в многострочном выборе.

JSON

Установите действие all_widgets_are_required в dateTimePicker.

JSON

Установите действие all_widgets_are_required в выпадающем меню.

JSON

Настройте проверку данных для текстового поля ввода.

Установите ограничение на количество символов для текстового поля ввода.

JSON

Задайте тип ввода для текстового поля ввода.

JSON

Устранение неполадок

Связанные темы

Установите действие `all_widgets_are_required` в многострочном выборе.

Установите действие `all_widgets_are_required` в dateTimePicker.

Установите действие `all_widgets_are_required` в выпадающем меню.