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

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

Диалоговое окно с различными виджетами.
Рисунок 1 : Приложение для чата, открывающее диалоговое окно для сбора контактной информации.

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

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

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

HTTP

Дополнение для Google Workspace, расширяющее функциональность Google Chat. Чтобы создать его, выполните краткое руководство по HTTP .

Apps Script

Дополнение для Google Workspace, расширяющее функциональность Google Chat. Чтобы создать его, выполните действия, описанные в кратком руководстве по Apps Script .

Создавайте формы с помощью карточек.

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

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

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

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

  • Кнопка- виджет, позволяющая пользователям вводить значения, указанные в карточке. После нажатия кнопки приложение чата может обработать полученную информацию .

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

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

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

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

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

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

Для заполнения элементов данными из источников Google Workspace, таких как пользователи Google Workspace, укажите поле platformDataSource в объекте DataSourceConfig . В отличие от других типов ввода выбора, объекты 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
              }
            ]
          }
        }
      ]
    }
  ]
}

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

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

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

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

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

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

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

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

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

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

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

Для использования источников данных Google Workspace укажите поле platformDataSource в виджете SelectionInput . В отличие от других типов ввода выбора, объекты 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
          }
        }
      }
    }
  }
}

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

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

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

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

Node.js

node/chat/selection-input/index.js
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: FUNCTION_URL },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Python

python/chat/selection-input/main.py
'selectionInput': {
  'name': "contacts",
  'type': "MULTI_SELECT",
  'label': "Selected contacts",
  'multiSelectMaxSelectedItems': 3,
  'multiSelectMinQueryLength': 1,
  'externalDataSource': { 'function': FUNCTION_URL },
  # Suggested items loaded by default.
  # The list is static here but it could be dynamic.
  'items': [get_suggested_contact("3")]
}

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Java

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
.setSelectionInput(new GoogleAppsCardV1SelectionInput()
  .setName("contacts")
  .setType("MULTI_SELECT")
  .setLabel("Selected contacts")
  .setMultiSelectMaxSelectedItems(3)
  .setMultiSelectMinQueryLength(1)
  .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  .setItems(List.of(getSuggestedContact("3")))))))))));

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Apps Script

В этом примере отправляется сообщение в виде карточки, возвращая JSON-объект с именем карточки . Вы также можете использовать службу создания карточек Apps Script .

apps-script/chat/selection-input/selection-input.gs
selectionInput: {
  name: "contacts",
  type: "MULTI_SELECT",
  label: "Selected contacts",
  multiSelectMaxSelectedItems: 3,
  multiSelectMinQueryLength: 1,
  externalDataSource: { function: "queryContacts" },
  // Suggested items loaded by default.
  // The list is static here but it could be dynamic.
  items: [getSuggestedContact("3")]
}

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

Получайте данные из интерактивных виджетов.

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

Значения можно получить из объекта commonEventObject.formInputs. WIDGET_NAME , где WIDGET_NAME — это name поля, указанное вами для виджета. Значения возвращаются в виде данных определенного типа для виджета.

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

{
  "commonEventObject": { "formInputs": {
    "contactName": { "stringInputs": {
      "value": ["Kai 0"]
    }},
    "contactBirthdate": { "dateInput": {
      "msSinceEpoch": 1000425600000
    }},
    "contactType": { "stringInputs": {
      "value": ["Personal"]
    }}
  }}
}

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

Виджет ввода формы Тип входных данных Входное значение из объекта события Пример значения
textInput stringInputs event.commonEventObject.formInputs.contactName.stringInputs.value[0] Kai O
selectionInput stringInputs Чтобы получить первое или единственное значение, event.commonEventObject.formInputs.contactType.stringInputs.value[0] Personal
dateTimePicker , принимающий только даты. dateInput event.commonEventObject.formInputs.contactBirthdate.dateInput.msSinceEpoch . 1000425600000

После получения данных приложение «Чат» может выполнить любое из следующих действий:

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

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

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

Вы также можете настроить количество символов, которые пользователь должен ввести, прежде чем меню выдаст подсказки. Для меню с множественным выбором установите значение поля multiSelectMinQueryLength . Для выпадающих меню установите значение поля min_characters_trigger в DataSourceConfig .

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

  1. Обработайте объект события , который получает приложение «Чат», когда пользователи вводят текст в меню.
  2. Из объекта события получите значение, которое вводит пользователь, представленное в поле event.commonEventObject.parameters["autocomplete_widget_query"] .
  3. Выполните запрос к источнику данных, используя введенное пользователем значение, чтобы получить один или несколько SelectionItems для предложения пользователю.
  4. Для возврата предлагаемых элементов используйте действие RenderActions , содержащее объект modifyCard .

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

Node.js

node/chat/selection-input/index.js
/**
 * Web app that responds to events sent from a Google Chat space.
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
app.post('/', async (req, res) => {
  // Stores the Google Chat event
  const chatEvent = req.body.chat;

  // Handle user interaction with multiselect.
  if(chatEvent.widgetUpdatedPayload) {
    return res.json(queryContacts(req.body));
  }

  // Replies with a card that contains the multiselect menu.
  return res.json({ hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: FUNCTION_URL },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}});
});

/**
 * Get contact suggestions based on text typed by users.
 *
 * @param {Object} event the event object that contains the user's query
 * @return {Object} suggestions
 */
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("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 selection item in the menu.
 */
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Python

python/chat/selection-input/main.py
@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: The response
  """
  # Stores the Google Chat event
  chatEvent = request.get_json().get('chat')

  # Handle user interaction with multiselect.
  if chatEvent.get('widgetUpdatedPayload') is not None:
    return json.jsonify(query_contacts(request.get_json()))

  # Replies with a card that contains the multiselect menu.
  return json.jsonify({ 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': {
    'message': { 'cardsV2': [{
      'cardId': "contactSelector",
      'card': { 'sections':[{ 'widgets': [{
        'selectionInput': {
          'name': "contacts",
          'type': "MULTI_SELECT",
          'label': "Selected contacts",
          'multiSelectMaxSelectedItems': 3,
          'multiSelectMinQueryLength': 1,
          'externalDataSource': { 'function': FUNCTION_URL },
          # Suggested items loaded by default.
          # The list is static here but it could be dynamic.
          'items': [get_suggested_contact("3")]
        }
      }]}]}
    }]}
  }}}})


def query_contacts(event: dict) -> dict:
  """Get contact suggestions based on text typed by users.

  Args:
      event (Mapping[str, Any]): The event object that contains the user's query

  Returns:
      Mapping[str, Any]: The response with contact suggestions.
  """
  query = event.get("commonEventObject").get("parameters").get("autocomplete_widget_query")
  return { 'action': { 'modifyOperations': [{ 'updateWidget': { 'selectionInputWidgetSuggestions': { 'suggestions': list(
    filter(lambda e: query is None or query in e["text"], [
      # The list is static here but it could be dynamic.
      get_suggested_contact("1"), get_suggested_contact("2"), get_suggested_contact("3"), get_suggested_contact("4"), get_suggested_contact("5")
    # Only return items based on the query from the user
    ])
  )}}}]}}


def get_suggested_contact(id: str) -> dict:
  """Generate a suggested contact given an ID.

  Args:
      id (str): The ID of the contact to return.

  Returns:
      Mapping[str, Any]: The contact formatted as a selection item in the menu.
  """
  return {
    'value': id,
    'startIconUri': "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    'text': "Contact " + id
  }

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Java

java/chat/selection-input/src/main/java/com/google/chat/selectionInput/App.java
@SpringBootApplication
@RestController
// Web app that responds to events sent from a Google Chat space.
public class App {
  private static final String FUNCTION_URL = "your-function-url";

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

  /**
   * Handle requests from Google Chat
   * 
   * @param event the event object sent by Google Chat
   * @return The response to be sent back to Google Chat
   */
  @PostMapping("/")
  @ResponseBody
  public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
    // Stores the Google Chat event
    JsonNode chatEvent = event.at("/chat");

    // Handle user interaction with multiselect.
    if (!chatEvent.at("/widgetUpdatedPayload").isEmpty()) {
      return queryContacts(event);
    }

    // Replies with a card that contains the multiselect menu.
    Message message = new Message().setCardsV2(List.of(new CardWithId()
      .setCardId("contactSelector")
      .setCard(new GoogleAppsCardV1Card()
        .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(new GoogleAppsCardV1Widget()
          .setSelectionInput(new GoogleAppsCardV1SelectionInput()
            .setName("contacts")
            .setType("MULTI_SELECT")
            .setLabel("Selected contacts")
            .setMultiSelectMaxSelectedItems(3)
            .setMultiSelectMinQueryLength(1)
            .setExternalDataSource(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL))
            // Suggested items loaded by default.
            // The list is static here but it could be dynamic.
            .setItems(List.of(getSuggestedContact("3")))))))))));

    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("createMessageAction", new GenericJson() {{
            put("message", message);
          }});
        }});
      }});
    }};
  }

  /**
   * Get contact suggestions based on text typed by users.
   *
   * @param event the event object that contains the user's query.
   * @return The response with contact suggestions.
   */
  GenericJson queryContacts(JsonNode event) throws Exception {
    String query = event.at("/commonEventObject/parameters/autocomplete_widget_query").asText();
    List<GoogleAppsCardV1SelectionItem> suggestions = List.of(
      // The list is static here but it could be dynamic.
      getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("5")
    // Only return items based on the query from the user
    ).stream().filter(e -> query == null || e.getText().indexOf(query) > -1).toList();

    return new GenericJson() {{
      put("action", new GenericJson() {{
        put("modifyOperations", List.of(new GenericJson() {{
          put("updateWidget", new GenericJson() {{
            put("selectionInputWidgetSuggestions", new GenericJson() {{
              put("suggestions", suggestions);
            }});
          }});
        }}));
      }});
    }};
  }

  /**
   * Generate a suggested contact given an ID.
   * 
   * @param id The ID of the contact to return.
   * @return The contact formatted as a selection item in the menu.
   */
  GoogleAppsCardV1SelectionItem getSuggestedContact(String id) {
    return new GoogleAppsCardV1SelectionItem()
      .setValue(id)
      .setStartIconUri("https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png")
      .setText("Contact " + id);
  }
}

Замените FUNCTION_URL на HTTP-адрес конечной точки, которая запрашивает данные из внешнего источника.

Apps Script

В этом примере отправляется сообщение в виде карточки, возвращая JSON-объект с именем карточки . Вы также можете использовать службу создания карточек Apps Script .

apps-script/chat/selection-input/selection-input.gs
/**
* Responds to a Message trigger in Google Chat.
*
* @param {Object} event the event object from Google Chat
* @return {Object} Response from the Chat app.
*/
function onMessage(event) {
  // Replies with a card that contains the multiselect menu.
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    cardsV2: [{
      cardId: "contactSelector",
      card: { sections:[{ widgets: [{
        selectionInput: {
          name: "contacts",
          type: "MULTI_SELECT",
          label: "Selected contacts",
          multiSelectMaxSelectedItems: 3,
          multiSelectMinQueryLength: 1,
          externalDataSource: { function: "queryContacts" },
          // Suggested items loaded by default.
          // The list is static here but it could be dynamic.
          items: [getSuggestedContact("3")]
        }
      }]}]}
    }]
  }}}}};
}

/**
* Get contact suggestions based on text typed by users.
*
* @param {Object} event the event object that contains the user's query
* @return {Object} suggestions
*/
function queryContacts(event) {
  const query = event.commonEventObject.parameters["autocomplete_widget_query"];
  return { action: { modifyOperations: [{ updateWidget: { selectionInputWidgetSuggestions: { suggestions: [
    // The list is static here but it could be dynamic.
    getSuggestedContact("1"), getSuggestedContact("2"), getSuggestedContact("3"), getSuggestedContact("4"), getSuggestedContact("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 selection item in the menu.
*/
function getSuggestedContact(id) {
  return {
    value: id,
    startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
    text: "Contact " + id
  };
}

Перенесите данные на другую карту

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

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

Для переноса данных, введенных из исходной карточки, можно создать виджет button с actionParameters , содержащими name виджета и значение, введенное пользователем, как показано в следующем примере:

Node.js

node/chat/contact-form-app/index.js
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: FUNCTION_URL,
    parameters: [
      { key: "actionName", value: "submitDialog" },
      // Pass input values as parameters for last dialog step (submission)
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

Замените FUNCTION_URL на HTTP-адрес конечной точки, обрабатывающей нажатия кнопок.

Python

python/chat/contact-form-app/main.py
{ 'buttonList': { 'buttons': [{
  'text': "SUBMIT",
  'onClick': { 'action': {
    'function': FUNCTION_URL,
    'parameters': [
      { 'key': "actionName", 'value': "submitDialog" },
      # Pass input values as parameters for last dialog step (submission)
      { 'key': "contactName", 'value': name },
      { 'key': "contactBirthdate", 'value': birthdate },
      { 'key': "contactType", 'value': type }
    ]
  }}
}]}}

Замените FUNCTION_URL на HTTP-адрес конечной точки, обрабатывающей нажатия кнопок.

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
  new GoogleAppsCardV1Button()
    .setText("SUBMIT")
    .setOnClick(new GoogleAppsCardV1OnClick().setAction(new GoogleAppsCardV1Action()
      .setFunction(FUNCTION_URL)
      .setParameters(List.of(
        new GoogleAppsCardV1ActionParameter().setKey("actionName").setValue("submitDialog"),
        // Pass input values as parameters for last dialog step (submission)
        new GoogleAppsCardV1ActionParameter().setKey("contactName").setValue(name),
        new GoogleAppsCardV1ActionParameter().setKey("contactBirthdate").setValue(birthdate),
        new GoogleAppsCardV1ActionParameter().setKey("contactType").setValue(type))))))))))));

Замените FUNCTION_URL на HTTP-адрес конечной точки, обрабатывающей нажатия кнопок.

Apps Script

В этом примере отправляется сообщение в виде карточки, возвращая JSON-объект с именем карточки . Вы также можете использовать службу создания карточек Apps Script .

apps-script/chat/contact-form-app/Code.gs
{ buttonList: { buttons: [{
  text: "SUBMIT",
  onClick: { action: {
    function: "submitDialog",
    // Pass input values as parameters for last dialog step (submission)
    parameters: [
      { key: "contactName", value: name },
      { key: "contactBirthdate", value: birthdate },
      { key: "contactType", value: type }
    ]
  }}
}]}}

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

Ответить на отправленную форму

После получения данных из сообщения в виде карточки или диалога, приложение «Чат» отвечает либо подтверждением получения, либо сообщением об ошибке.

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

Node.js

node/chat/contact-form-app/index.js
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

Python

python/chat/contact-form-app/main.py
return { 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': { 'message': {
  'text': "✅ " + event.get('commonEventObject').get('parameters')["contactName"] + " has been added to your contacts."
}}}}}

Java

java/chat/contact-form-app/src/main/java/com/google/chat/contact/App.java
return new GenericJson() {{
  put("hostAppDataAction", new GenericJson() {{
    put("chatDataAction", new GenericJson() {{
      put("createMessageAction", new GenericJson() {{
        put("message", new Message()
          .setText( "✅ " + event.at("/commonEventObject/parameters/contactName").asText() +
                    " has been added to your contacts."));
      }});
    }});
  }});
}};

Apps Script

В этом примере отправляется сообщение в виде карточки, возвращая JSON-объект с именем карточки . Вы также можете использовать службу создания карточек Apps Script .

apps-script/chat/contact-form-app/Code.gs
return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
  text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
}}}}};

Для обработки и закрытия диалогового окна необходимо вернуть объект RenderActions , указывающий, хотите ли вы отправить подтверждающее сообщение, обновить исходное сообщение или карточку, или просто закрыть диалоговое окно. Инструкции см. в разделе « Закрытие диалогового окна» .

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

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

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