Cards v2

Карта

Интерфейс карты, отображаемый в сообщении Google Chat или надстройке Google Workspace.

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

Чтобы узнать, как создавать карты, см. следующую документацию:

Пример: карточное сообщение для приложения Google Chat.

Пример карточки контакта

Чтобы создать образец сообщения-карточки в Google Chat, используйте следующий JSON:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
JSON-представление
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Поля
header

object ( CardHeader )

Заголовок карты. Заголовок обычно содержит ведущее изображение и заголовок. Заголовки всегда отображаются вверху карточки.

sections[]

object ( Section )

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

sectionDividerStyle

enum ( DividerStyle )

Стиль разделителя между разделами.

cardActions[]

object ( CardAction )

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

Поскольку карточки приложений Chat не имеют панели инструментов, cardActions[] не поддерживается приложениями Chat.

Например, следующий JSON создает меню действий карты с Settings » и Send Feedback :

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Название карты. Используется в качестве идентификатора карты при карточной навигации.

Поскольку приложения чата не поддерживают навигацию по карточкам, они игнорируют это поле.

displayStyle

enum ( DisplayStyle )

В надстройках Google Workspace задает свойства отображения peekCardHeader .

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

peekCardHeader

object ( CardHeader )

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

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

Заголовок карты

Представляет заголовок карты. Пример использования приложений Google Chat см. в разделе Заголовок карты .

JSON-представление
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Поля
title

string

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

subtitle

string

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

imageType

enum ( ImageType )

Форма, используемая для обрезки изображения.

imageUrl

string

URL-адрес HTTPS изображения в заголовке карты.

imageAltText

string

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

Тип изображения

Форма, используемая для обрезки изображения.

Перечисления
SQUARE Значение по умолчанию. Применяет к изображению квадратную маску. Например, изображение 4x3 становится 3x3.
CIRCLE Применяет к изображению круговую маску. Например, изображение 4x3 становится кругом диаметром 3.

Раздел

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

JSON-представление
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Поля
header

string

Текст, который отображается вверху раздела. Поддерживает простой текст в формате HTML. Дополнительную информацию о форматировании текста см. в разделах «Форматирование текста в приложениях Google Chat» и «Форматирование текста в надстройках Google Workspace ».

widgets[]

object ( Widget )

Все виджеты в разделе. Должен содержать хотя бы один виджет.

collapsible

boolean

Указывает, является ли этот раздел сворачиваемым.

Сворачиваемые разделы скрывают некоторые или все виджеты, но пользователи могут развернуть раздел, чтобы отобразить скрытые виджеты, нажав «Показать больше» . Пользователи могут снова скрыть виджеты, нажав «Показать меньше» .

Чтобы определить, какие виджеты скрыты, укажите uncollapsibleWidgetsCount .

uncollapsibleWidgetsCount

integer

Количество несворачиваемых виджетов, которые остаются видимыми, даже если раздел свернут.

Например, если раздел содержит пять виджетов и для uncollapsibleWidgetsCount установлено значение 2 , первые два виджета всегда отображаются, а последние три сворачиваются по умолчанию. uncollapsibleWidgetsCount учитывается только в том случае, если collapsible равно true .

Виджет

Каждая карточка состоит из виджетов.

Виджет — это составной объект, который может представлять один из типов текста, изображений, кнопок и других типов объектов.

JSON-представление
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}
Поля
horizontalAlignment

enum ( HorizontalAlignment )

Указывает, выравниваются ли виджеты по левому, правому или центру столбца.

data поля объединения. Виджет может иметь только один из следующих элементов. Вы можете использовать несколько полей виджетов для отображения большего количества элементов. data могут быть только одним из следующих:
textParagraph

object ( TextParagraph )

Отображает текстовый абзац. Поддерживает простой текст в формате HTML. Дополнительную информацию о форматировании текста см. в разделах «Форматирование текста в приложениях Google Chat» и «Форматирование текста в надстройках Google Workspace ».

Например, следующий JSON создает жирный текст:

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object ( Image )

Отображает изображение.

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

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object ( DecoratedText )

Отображает декорированный текстовый элемент.

Например, следующий JSON создает декорированный текстовый виджет, показывающий адрес электронной почты:

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object ( ButtonList )

Список кнопок.

Например, следующий JSON создает две кнопки. Первая — синяя текстовая кнопка, а вторая — кнопка с изображением, которая открывает ссылку:

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object ( TextInput )

Отображает текстовое поле, в которое пользователи могут вводить текст.

Например, следующий JSON создает текстовый ввод для адреса электронной почты:

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

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

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object ( SelectionInput )

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

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

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object ( DateTimePicker )

Отображает виджет, который позволяет пользователям вводить дату, время или дату и время.

Например, следующий JSON создает средство выбора даты и времени для планирования встречи:

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object ( Divider )

Отображает горизонтальный разделитель между виджетами.

Например, следующий JSON создает разделитель:

"divider": {
}
grid

object ( Grid )

Отображает сетку с коллекцией элементов.

Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется верхней границей количества элементов, деленной на количество столбцов. Сетка с 10 элементами и 2 столбцами имеет 5 строк. Сетка с 11 элементами и 2 столбцами имеет 6 строк.

Например, следующий JSON создает сетку из двух столбцов с одним элементом:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object ( Columns )

Отображает до 2 столбцов.

Чтобы включить более двух столбцов или использовать строки, используйте виджет Grid ».

Например, следующий JSON создает 2 столбца, каждый из которых содержит текстовые абзацы:

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}

Текстовый абзац

Абзац текста, поддерживающий форматирование. Пример в приложениях Google Chat см. в разделе «Текст» . Дополнительную информацию о форматировании текста см. в разделах «Форматирование текста в приложениях Google Chat» и «Форматирование текста в надстройках Google Workspace ».

JSON-представление
{
  "text": string
}
Поля
text

string

Текст, отображаемый в виджете.

Изображение

Изображение, заданное URL-адресом и может иметь действие onClick . Пример см. в разделе Изображение .

JSON-представление
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Поля
imageUrl

string

URL-адрес HTTPS, на котором размещено изображение.

Например:

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object ( OnClick )

Когда пользователь щелкает изображение, щелчок запускает это действие.

altText

string

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

По щелчку

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

JSON-представление
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Поля

data поля объединения.

data могут быть только одним из следующих:

action

object ( Action )

Если указано, действие запускается этим onClick .

card

object ( Card )

Новая карта помещается в стопку карточек после щелчка, если это указано.

Поддерживается надстройками Google Workspace, но не приложениями Google Chat.

Действие

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

JSON-представление
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Поля
function

string

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

Пример использования см. в разделе Создание интерактивных карточек .

parameters[]

object ( ActionParameter )

Список параметров действия.

loadIndicator

enum ( LoadIndicator )

Указывает индикатор загрузки, который отображается при вызове действия.

persistValues

boolean

Указывает, сохраняются ли значения формы после действия. Значение по умолчанию false .

Если true , значения формы сохраняются после запуска действия. Чтобы позволить пользователю вносить изменения во время обработки действия, установите для LoadIndicator значение NONE . Для сообщений с карточками в приложениях чата необходимо также установить для ResponseType действия значение UPDATE_MESSAGE и использовать тот же cardId из карточки, которая содержала действие.

Если false , значения формы очищаются при запуске действия. Чтобы запретить пользователю вносить изменения во время обработки действия, установите для LoadIndicator значение SPINNER .

interaction

enum ( Interaction )

Необязательный. Требуется при открытии диалога .

Что делать в ответ на взаимодействие с пользователем, например, когда пользователь нажимает кнопку в сообщении с карточкой.

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

Указав interaction , приложение может реагировать особым интерактивным способом. Например, установив для interaction значение OPEN_DIALOG , приложение сможет открыть диалоговое окно . Если указано, индикатор загрузки не отображается.

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

Параметр действия

Список строковых параметров, которые необходимо указать при вызове метода действия. Например, рассмотрим три кнопки повтора: отложить сейчас, отложить один день или отложить на следующей неделе. Вы можете использовать action method = snooze() , передав тип и время повтора в списке строковых параметров.

Дополнительные сведения см. в разделе CommonEventObject .

JSON-представление
{
  "key": string,
  "value": string
}
Поля
key

string

Имя параметра сценария действия.

value

string

Значение параметра.

Индикатор нагрузки

Указывает индикатор загрузки, который отображается при вызове действия.

Перечисления
SPINNER Отображает счетчик, указывающий на загрузку содержимого.
NONE Ничего не отображается.

Взаимодействие

Необязательный. Требуется при открытии диалога .

Что делать в ответ на взаимодействие с пользователем, например, когда пользователь нажимает кнопку в сообщении с карточкой.

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

Указав interaction , приложение может реагировать особым интерактивным способом. Например, установив для interaction значение OPEN_DIALOG , приложение сможет открыть диалоговое окно .

Если указано, индикатор загрузки не отображается.

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

Перечисления
INTERACTION_UNSPECIFIED Значение по умолчанию. action выполняется как обычно.
OPEN_DIALOG

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

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

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

ОпенАс

Когда действие OnClick открывает ссылку, клиент может открыть ее либо как полноразмерное окно (если клиент использует этот фрейм), либо как наложение (например, всплывающее окно). Реализация зависит от возможностей клиентской платформы, и выбранное значение может быть проигнорировано, если клиент его не поддерживает. FULL_SIZE поддерживается всеми клиентами.

Поддерживается надстройками Google Workspace, но не приложениями Google Chat.

Перечисления
FULL_SIZE Ссылка открывается в полноразмерном окне (если клиент использует именно этот фрейм).
OVERLAY Ссылка открывается в виде наложения, например всплывающего окна.

При Закрытии

Что делает клиент, когда ссылка, открытая действием OnClick , закрывается.

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

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

Поддерживается надстройками Google Workspace, но не приложениями Google Chat.

Перечисления
NOTHING Значение по умолчанию. Карта не перезагружается; Ничего не произошло.
RELOAD

Перезагружает карту после закрытия дочернего окна.

При использовании в сочетании с OpenAs.OVERLAY дочернее окно действует как модальное диалоговое окно, а родительская карточка блокируется до тех пор, пока дочернее окно не закроется.

УкрашенныйТекст

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

JSON-представление
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Поля
icon
(deprecated)

object ( Icon )

Устарело в пользу startIcon .

startIcon

object ( Icon )

Значок отображается перед текстом.

topLabel

string

Текст, который появляется над text . Всегда обрезает.

text

string

Необходимый. Первичный текст.

Поддерживает простое форматирование. Дополнительную информацию о форматировании текста см. в разделах «Форматирование текста в приложениях Google Chat» и «Форматирование текста в надстройках Google Workspace ».

wrapText

boolean

Настройка переноса текста. Если true , текст переносится и отображается в нескольких строках. В противном случае текст обрезается.

Применяется только к text , а не к topLabel и bottomLabel .

bottomLabel

string

Текст, который отображается под text . Всегда заворачивается.

onClick

object ( OnClick )

Это действие запускается, когда пользователи нажимают topLabel или bottomLabel .

Полевой control Союза. Кнопка, переключатель, флажок или изображение, которое отображается справа от текста в виджете decoratedText . control может быть только одним из следующих:
button

object ( Button )

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

switchControl

object ( SwitchControl )

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

endIcon

object ( Icon )

Значок, отображаемый после текста.

Поддерживает встроенные и пользовательские значки.

Икона

Значок, отображаемый в виджете на карточке. Пример использования приложений Google Chat см. в разделе Значок .

Поддерживает встроенные и пользовательские значки.

JSON-представление
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Поля
altText

string

Необязательный. Описание значка, используемого для специальных возможностей. Если не указано, предоставляется значение Button по умолчанию. Рекомендуется установить полезное описание того, что отображает значок, и, если применимо, что он делает. Например, A user's account portrait или Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat .

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

imageType

enum ( ImageType )

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

icons полей Союза. Значок, отображаемый в виджете на карте. icons могут быть только одним из следующих:
knownIcon

string

Отобразите один из встроенных значков Google Workspace.

Например, чтобы отобразить значок самолета, укажите AIRPLANE . Для автобуса укажите BUS .

Полный список поддерживаемых значков см. в разделе «Встроенные значки» .

iconUrl

string

Отображение пользовательского значка, размещенного по URL-адресу HTTPS.

Например:

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Поддерживаемые типы файлов: .png и .jpg .

Кнопка

Текст, значок или кнопка с текстом и значком, которую пользователи могут нажать. Пример использования приложений Google Chat см. в разделе Список кнопок .

Чтобы сделать изображение интерактивной кнопкой, укажите Image (а не ImageComponent ) и установите действие onClick .

JSON-представление
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Поля
text

string

Текст, отображаемый внутри кнопки.

icon

object ( Icon )

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

color

object ( Color )

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

Если параметр не установлен, фон изображения будет белым, а цвет шрифта — синим.

Для красного, зеленого и синего значение каждого поля представляет собой число float , которое можно выразить двумя способами: как число от 0 до 255, разделенное на 255 (153/255), или как значение от 0 до 255. 1 (0,6). 0 представляет отсутствие цвета, а 1 или 255/255 представляет полное присутствие этого цвета по шкале RGB.

При необходимости установите alpha , которая задает уровень прозрачности с помощью этого уравнения:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Для alpha значение 1 соответствует сплошному цвету, а значение 0 соответствует полностью прозрачному цвету.

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

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object ( OnClick )

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

disabled

boolean

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

altText

string

Альтернативный текст, используемый для специальных возможностей.

Установите описательный текст, который позволит пользователям узнать, что делает кнопка. Например, если кнопка открывает гиперссылку, вы можете написать: «Открывает новую вкладку браузера и переходит к документации для разработчиков Google Chat по адресу https://developers.google.com/chat» .

Цвет

Представляет цвет в цветовом пространстве RGBA. Это представление предназначено для простоты преобразования в цветовые представления на разных языках и обратно, а не для компактности. Например, поля этого представления можно тривиально передать конструктору java.awt.Color в Java; его также можно тривиально передать методу +colorWithRed:green:blue:alpha UIColor в iOS; и, приложив немного усилий, его можно легко отформатировать в строку CSS rgba() в JavaScript.

На этой справочной странице нет информации об абсолютном цветовом пространстве, которое следует использовать для интерпретации значения RGB, например sRGB, Adobe RGB, DCI-P3 и BT.2020. По умолчанию приложения должны использовать цветовое пространство sRGB.

Когда необходимо определить равенство цветов, реализации, если не указано иное, рассматривают два цвета как равные, если все их значения красного, зеленого, синего и альфа отличаются не более чем 1e-5 .

Пример (Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Пример (iOS/Obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Пример (JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
JSON-представление
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Поля
red

number

Количество красного цвета в цвете как значение в интервале [0, 1].

green

number

Количество зеленого цвета в цвете как значение в интервале [0, 1].

blue

number

Количество синего цвета в цвете как значение в интервале [0, 1].

alpha

number

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

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Это означает, что значение 1,0 соответствует сплошному цвету, тогда как значение 0,0 соответствует полностью прозрачному цвету. При этом используется сообщение-оболочка, а не простой скаляр с плавающей запятой, чтобы можно было отличить значение по умолчанию от значения, которое не установлено. Если этот параметр опущен, этот цветовой объект отображается как сплошной цвет (как если бы значению альфа было явно присвоено значение 1,0).

SwitchControl

Либо переключатель в стиле тумблера, либо флажок внутри виджета decoratedText .

Поддерживается только в виджете decoratedText .

JSON-представление
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Поля
name

string

Имя, по которому виджет переключения идентифицируется в событии ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

value

string

Значение, введенное пользователем и возвращаемое как часть события ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

selected

boolean

Если true , переключатель выбран.

onChangeAction

object ( Action )

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

controlType

enum ( ControlType )

Как переключатель отображается в пользовательском интерфейсе.

Тип управления

Как переключатель отображается в пользовательском интерфейсе.

Перечисления
SWITCH Тумблерный переключатель.
CHECKBOX Устарело в пользу CHECK_BOX .
CHECK_BOX Флажок.

Список кнопок

Список кнопок, расположенных горизонтально. Пример использования приложений Google Chat см. в разделе Список кнопок .

JSON-представление
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Поля
buttons[]

object ( Button )

Массив кнопок.

Ввод текста

Поле, в котором пользователи могут вводить текст. Поддерживает предложения и действия при изменении. Пример использования приложений Google Chat см. в разделе Ввод текста .

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

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

JSON-представление
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "placeholderText": string
}
Поля
name

string

Имя, по которому идентифицируется ввод текста в событии ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, который появляется над полем ввода текста в пользовательском интерфейсе.

Укажите текст, который поможет пользователю ввести информацию, необходимую вашему приложению. Например, если вы спрашиваете чье-то имя, но вам конкретно нужна фамилия, напишите surname вместо name .

Требуется, если hintText не указан. В противном случае необязательно.

hintText

string

Текст, который появляется под полем ввода текста, предназначен для помощи пользователям, предлагая им ввести определенное значение. Этот текст всегда виден.

Требуется, если label не указана. В противном случае необязательно.

value

string

Значение, введенное пользователем и возвращаемое как часть события ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

type

enum ( Type )

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

onChangeAction

object ( Action )

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

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

initialSuggestions

object ( Suggestions )

Рекомендуемые значения, которые могут ввести пользователи. Эти значения появляются, когда пользователи щелкают внутри поля ввода текста. По мере того, как пользователи вводят текст, предлагаемые значения динамически фильтруются в соответствии с тем, что набрали пользователи.

Например, поле ввода текста для языка программирования может предлагать Java, JavaScript, Python и C++. Когда пользователи начинают вводить Jav , список предложений фильтруется и показывает только Java и JavaScript .

Предлагаемые значения помогают пользователям вводить значения, понятные вашему приложению. Говоря о JavaScript, некоторые пользователи могут вводить javascript , а другие java script . Предложение JavaScript может стандартизировать взаимодействие пользователей с вашим приложением.

Если указано, TextInput.type всегда имеет SINGLE_LINE , даже если для него установлено значение MULTIPLE_LINE .

autoCompleteAction

object ( Action )

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

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

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

Поддерживается надстройками Google Workspace, но не приложениями Google Chat.

placeholderText

string

Текст, который появляется в поле ввода текста, когда поле пусто. Используйте этот текст, чтобы предложить пользователям ввести значение. Например, Enter a number from 0 to 100 .

Поддерживается приложениями Google Chat, но не надстройками Google Workspace.

Тип

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

Если указан параметр initialSuggestions , type всегда является SINGLE_LINE , даже если для него установлено значение MULTIPLE_LINE .

Перечисления
SINGLE_LINE Поле ввода текста имеет фиксированную высоту в одну строку.
MULTIPLE_LINE Поле ввода текста имеет фиксированную высоту в несколько строк.

Действия рендеринга

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

Поля
action

Action

Действие

Поля
navigations[]

Navigation

Нажмите или обновите отображаемые карты.

Добавьте новую карту в стопку (перейдите вперед).

navigations: {
  pushCard: CARD
}

Замените верхнюю карту новой картой.

navigations: {
  updateCard: CARD
}

Предложения

Рекомендуемые значения, которые могут ввести пользователи. Эти значения появляются, когда пользователи щелкают внутри поля ввода текста. По мере того, как пользователи вводят текст, предлагаемые значения динамически фильтруются в соответствии с тем, что набрали пользователи.

Например, поле ввода текста для языка программирования может предлагать Java, JavaScript, Python и C++. Когда пользователи начинают вводить Jav , список предложений фильтруется для отображения Java и JavaScript .

Предлагаемые значения помогают пользователям вводить значения, понятные вашему приложению. Говоря о JavaScript, некоторые пользователи могут вводить javascript , а другие java script . Предложение JavaScript может стандартизировать взаимодействие пользователей с вашим приложением.

Если указано, TextInput.type всегда имеет SINGLE_LINE , даже если для него установлено значение MULTIPLE_LINE .

JSON-представление
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Поля
items[]

object ( SuggestionItem )

Список предложений, используемых для автозаполнения рекомендаций в полях ввода текста.

ПредложениеItem

Одно предлагаемое значение, которое пользователи могут ввести в поле ввода текста.

JSON-представление
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Поля

content поля объединения.

content может быть только одним из следующих:

text

string

Значение предлагаемого ввода в поле ввода текста. Это эквивалентно тому, что пользователи вводят сами.

ВыборВвод

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

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

Чтобы собирать неопределенные или абстрактные данные от пользователей, используйте виджет TextInput .

JSON-представление
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
Поля
name

string

Имя, которое идентифицирует ввод выбора в событии ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, который появляется над полем ввода выбора в пользовательском интерфейсе.

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

type

enum ( SelectionType )

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

items[]

object ( SelectionItem )

Массив выбираемых элементов. Например, массив переключателей или флажков. Поддерживает до 100 элементов.

onChangeAction

object ( Action )

Если указано, форма отправляется при изменении выбора. Если не указано, необходимо указать отдельную кнопку, которая отправляет форму.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

multiSelectMaxSelectedItems

integer

Для меню с множественным выбором — максимальное количество элементов, которые может выбрать пользователь. Минимальная стоимость — 1 шт. Если не указано, по умолчанию используется 3 элемента.

multiSelectMinQueryLength

integer

Для меню с множественным выбором — количество текстовых символов, которые пользователь вводит перед тем, как приложение Chat запросит автозаполнение и отобразит предлагаемые элементы в меню.

Если не указано, по умолчанию используется 0 символов для статических источников данных и 3 символа для внешних источников данных.

Поле объединения multi_select_data_source . Только приложения для чата. Для меню с множественным выбором — источник данных, который заполняет элементы выбора. multi_select_data_source может быть только одним из следующих:
externalDataSource

object ( Action )

Внешний источник данных, например реляционная база данных.

platformDataSource

object ( PlatformDataSource )

Источник данных из Google Workspace.

Тип выбора

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

Каждый вход выбора поддерживает один тип выбора. Например, сочетание флажков и переключателей не поддерживается.

Перечисления
CHECK_BOX Набор флажков. Пользователи могут установить один или несколько флажков.
RADIO_BUTTON Набор радиокнопок. Пользователи могут выбрать один переключатель.
SWITCH Набор переключателей. Пользователи могут включить один или несколько переключателей.
DROPDOWN Выпадающее меню. Пользователи могут выбрать один пункт из меню.
MULTI_SELECT

Поддерживается приложениями Chat, но не надстройками Google Workspace.

Меню множественного выбора для статических или динамических данных. В строке меню пользователи выбирают один или несколько элементов. Пользователи также могут вводить значения для заполнения динамических данных. Например, пользователи могут начать вводить название чат-группы Google, и виджет автоматически предложит это пространство.

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

  • Статические данные: элементы указываются в виджете как объекты SelectionItem . До 100 позиций.
  • Данные Google Workspace. Элементы заполняются с использованием данных из Google Workspace, например о пользователях Google Workspace или чат-группах Google.
  • Внешние данные. Элементы заполняются из внешнего источника данных за пределами Google Workspace.

Примеры реализации меню с множественным выбором см. на странице виджета SelectionInput .

Элемент выбора

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

JSON-представление
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
Поля
text

string

Текст, который идентифицирует или описывает элемент для пользователей.

value

string

Значение, связанное с этим элементом. Клиент должен использовать это значение в качестве входного значения формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

selected

boolean

Выбран ли элемент по умолчанию. Если входные данные выбора принимают только одно значение (например, для переключателей или раскрывающегося меню), установите это поле только для одного элемента.

startIconUri

string

В меню с множественным выбором URL-адрес значка отображается рядом с text полем элемента. Поддерживает файлы PNG и JPEG. Должен быть URL-адрес HTTPS . Например, https://developers.google.com/chat/images/quickstart-app-avatar.png .

bottomText

string

Для меню с множественным выбором — текстовое описание или метка, отображаемая под text полем элемента.

ПлатформаИсточник данных

Только приложения для чата. Для виджета SelectionInput , использующего меню с множественным выбором, — источник данных из Google Workspace. Используется для заполнения элементов в меню с множественным выбором.

JSON-представление
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Поля
Поле объединения data_source . Источник данных. data_source может быть только одним из следующих:
commonDataSource

enum ( CommonDataSource )

Источник данных, общий для всех приложений Google Workspace, например пользователей в организации Google Workspace.

hostAppDataSource

object ( HostAppDataSourceMarkup )

Источник данных, уникальный для хост-приложения Google Workspace, например пространства в Google Chat.

Общий источник данных

Только приложения для чата. Источник данных, общий для всех приложений Google Workspace .

Перечисления
UNKNOWN Значение по умолчанию. Не используйте.
USER Пользователи Google Workspace. Пользователь может просматривать и выбирать пользователей только из своей организации Google Workspace.

HostAppDataSourceMarkup

Только приложения для чата. Для виджета SelectionInput , использующего меню с множественным выбором, — источник данных из приложения Google Workspace. Источник данных заполняет элементы выбора для меню множественного выбора.

JSON-представление
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
Поля
Поле объединения data_source . Приложение Google Workspace, которое заполняет элементы для меню с множественным выбором. data_source может быть только одним из следующих:
chatDataSource

object ( ChatClientDataSourceMarkup )

Источник данных из Google Chat.

ChatClientDataSourceMarkup

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

JSON-представление
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
Поля
source поля Союза. Источник данных Google Chat. source может быть только одним из следующих:
spaceDataSource

object ( SpaceDataSource )

Пространства Google Chat, участником которых является пользователь.

ПространствоИсточник Данных

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

JSON-представление
{
  "defaultToCurrentSpace": boolean
}
Поля
defaultToCurrentSpace

boolean

Если установлено значение true , меню множественного выбора выбирает текущее пространство Google Chat в качестве элемента по умолчанию.

DateTimePicker

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

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

JSON-представление
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Поля
name

string

Имя, по которому DateTimePicker идентифицируется в событии ввода формы.

Подробные сведения о работе с входными данными формы см. в разделе Получение данных формы .

label

string

Текст, предлагающий пользователям ввести дату, время или дату и время. Например, если пользователи планируют встречу, используйте метку, например Appointment date или Appointment date and time .

type

enum ( DateTimePickerType )

Поддерживает ли виджет ввод даты, времени или даты и времени.

valueMsEpoch

string ( int64 format)

Значение по умолчанию, отображаемое в виджете, в миллисекундах с момента эпохи Unix .

Укажите значение в зависимости от типа средства выбора ( DateTimePickerType ):

  • DATE_AND_TIME : календарная дата и время в формате UTC. Например, чтобы представить 1 января 2023 года в 12:00 по всемирному координированному времени, используйте 1672574400000 .
  • DATE_ONLY : календарная дата в 00:00:00 UTC. Например, чтобы представить 1 января 2023 года, используйте 1672531200000 .
  • TIME_ONLY : время в формате UTC. Например, чтобы представить 12:00, используйте 43200000 (или 12 * 60 * 60 * 1000 ).
timezoneOffsetDate

integer

Число, представляющее смещение часового пояса от UTC в минутах. Если установлено, valueMsEpoch отображается в указанном часовом поясе. Если этот параметр не установлен, значение по умолчанию соответствует настройке часового пояса пользователя.

onChangeAction

object ( Action )

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

DateTimePickerType

Формат даты и времени в виджете DateTimePicker . Определяет, могут ли пользователи вводить дату, время или дату и время одновременно.

Перечисления
DATE_AND_TIME Пользователи вводят дату и время.
DATE_ONLY Пользователи вводят дату.
TIME_ONLY Пользователи вводят время.

Разделитель

Этот тип не имеет полей.

Отображает разделитель между виджетами в виде горизонтальной линии. Пример использования приложений Google Chat см. в разделе Разделитель .

Например, следующий JSON создает разделитель:

"divider": {}

Сетка

Отображает сетку с коллекцией элементов. Элементы могут включать только текст или изображения. Для адаптивных столбцов или для включения большего количества текста или изображений используйте Columns . Пример использования приложений Google Chat см. в разделе Grid .

Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется элементами, разделенными столбцами. Сетка с 10 элементами и 2 столбцами имеет 5 строк. Сетка с 11 элементами и 2 столбцами имеет 6 строк.

Например, следующий JSON создает сетку из двух столбцов с одним элементом:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
JSON-представление
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Поля
title

string

Текст, который отображается в заголовке сетки.

items[]

object ( GridItem )

Элементы, отображаемые в сетке.

borderStyle

object ( BorderStyle )

Стиль границы, применяемый к каждому элементу сетки.

columnCount

integer

Количество столбцов, отображаемых в сетке. Значение по умолчанию используется, если это поле не указано, и это значение по умолчанию различается в зависимости от того, где отображается сетка (диалоговое окно или сопутствующий текст).

onClick

object ( OnClick )

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

Гридитем

Представляет элемент в макете сетки. Элементы могут содержать текст, изображение или и текст, и изображение.

JSON-представление
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Поля
id

string

Заданный пользователем идентификатор для этого элемента сетки. Этот идентификатор возвращается в параметрах обратного вызова onClick родительской сетки.

image

object ( ImageComponent )

Изображение, которое отображается в элементе сетки.

title

string

Название элемента сетки.

subtitle

string

Подзаголовок элемента сетки.

layout

enum ( GridItemLayout )

Макет, используемый для элемента сетки.

Компонент изображения

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

JSON-представление
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Поля
imageUri

string

URL-адрес изображения.

altText

string

Метка доступности изображения.

cropStyle

object ( ImageCropStyle )

Стиль обрезки, применяемый к изображению.

borderStyle

object ( BorderStyle )

Стиль границы, применяемый к изображению.

СтильОбрезки Изображения

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

Например, вот как применить соотношение сторон 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
JSON-представление
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Поля
type

enum ( ImageCropType )

Тип урожая.

aspectRatio

number

Соотношение сторон, которое будет использоваться, если тип кадрирования — RECTANGLE_CUSTOM .

Например, вот как применить соотношение сторон 16:9:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

ТипОбрезки Изображения

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

Перечисления
IMAGE_CROP_TYPE_UNSPECIFIED Не используйте. Неопределенные.
SQUARE Значение по умолчанию. Применяет квадратную обрезку.
CIRCLE Применяет круговую обрезку.
RECTANGLE_CUSTOM Применяет прямоугольную обрезку с настраиваемым соотношением сторон. Установите пользовательское соотношение сторон с aspectRatio .
RECTANGLE_4_3 Применяет прямоугольную обрезку с соотношением сторон 4:3.

BorderStyle

Параметры стиля границы карточки или виджета, включая тип и цвет границы.

JSON-представление
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Поля
type

enum ( BorderType )

Тип границы.

strokeColor

object ( Color )

Цвета, которые будут использоваться, если тип BORDER_TYPE_STROKE .

cornerRadius

integer

Угловой радиус границы.

Тип границы

Представляет типы границ, применяемые к виджетам.

Перечисления
BORDER_TYPE_UNSPECIFIED Не используйте. Неопределенные.
NO_BORDER Значение по умолчанию. Без границ.
STROKE Контур.

GridItemLayout

Представляет различные параметры макета, доступные для элемента сетки.

Перечисления
GRID_ITEM_LAYOUT_UNSPECIFIED Не используйте. Неопределенные.
TEXT_BELOW Заголовок и подзаголовок отображаются под изображением элемента сетки.
TEXT_ABOVE Заголовок и подзаголовок отображаются над изображением элемента сетки.

Столбцы

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

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

Столбцы отображаются рядом. Вы можете настроить ширину каждого столбца, используя поле HorizontalSizeStyle . Если ширина экрана пользователя слишком узкая, второй столбец переносится ниже первого:

  • В Интернете второй столбец переносится, если ширина экрана меньше или равна 480 пикселям.
  • На устройствах iOS второй столбец переносится, если ширина экрана меньше или равна 300 pt.
  • На устройствах Android второй столбец переносится, если ширина экрана меньше или равна 320 dp.

Чтобы включить более двух столбцов или использовать строки, используйте виджет Grid ».

Поддерживается приложениями Chat, но не надстройками Google Workspace.

JSON-представление
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Поля
columnItems[]

object ( Column )

Массив столбцов. Вы можете включить до двух столбцов в карточку или диалог.

Столбец

Колонка.

JSON-представление
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Поля
horizontalSizeStyle

enum ( HorizontalSizeStyle )

Указывает, как столбец заполняет ширину карточки.

horizontalAlignment

enum ( HorizontalAlignment )

Указывает, выравниваются ли виджеты по левому, правому или центру столбца.

verticalAlignment

enum ( VerticalAlignment )

Указывает, выравниваются ли виджеты по верху, низу или центру столбца.

widgets[]

object ( Widgets )

Массив виджетов, включенных в столбец. Виджеты отображаются в том порядке, в котором они указаны.

Горизонтальныйразмерстиль

Указывает, как столбец заполняет ширину карточки. Ширина каждого столбца зависит как от HorizontalSizeStyle , так и от ширины виджетов внутри столбца.

Перечисления
HORIZONTAL_SIZE_STYLE_UNSPECIFIED Не используйте. Неопределенные.
FILL_AVAILABLE_SPACE Значение по умолчанию. Столбец заполняет доступное пространство до 70 % ширины карты. Если для обоих столбцов установлено значение FILL_AVAILABLE_SPACE , каждый столбец заполняет 50 % пространства.
FILL_MINIMUM_SPACE Столбец занимает минимально возможное пространство и не более 30 % ширины карты.

Горизонтальное выравнивание

Указывает, выравниваются ли виджеты по левому, правому или центру столбца.

Перечисления
HORIZONTAL_ALIGNMENT_UNSPECIFIED Не используйте. Неопределенные.
START Значение по умолчанию. Выравнивает виджеты по начальному положению столбца. Для макетов слева направо — выравнивание по левому краю. Для макетов с направлением письма справа налево выравнивается по правому краю.
CENTER Выравнивает виджеты по центру столбца.
END Выравнивает виджеты по конечному положению столбца. Для макетов слева направо виджеты выравниваются по правому краю. Для макетов с направлением справа налево виджеты выравниваются по левому краю.

Вертикальное выравнивание

Указывает, выравниваются ли виджеты по верху, низу или центру столбца.

Перечисления
VERTICAL_ALIGNMENT_UNSPECIFIED Не используйте. Неопределенные.
CENTER Значение по умолчанию. Выравнивает виджеты по центру столбца.
TOP Выравнивает виджеты по верху столбца.
BOTTOM Выравнивает виджеты по нижней части столбца.

Виджеты

Поддерживаемые виджеты, которые можно включить в столбец.

JSON-представление
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}
Поля

data поля объединения.

data могут быть только одним из следующих:

textParagraph

object ( TextParagraph )

Виджет TextParagraph .

image

object ( Image )

Виджет Image .

decoratedText

object ( DecoratedText )

Виджет DecoratedText .

buttonList

object ( ButtonList )

Виджет ButtonList .

textInput

object ( TextInput )

Виджет TextInput .

selectionInput

object ( SelectionInput )

Виджет SelectionInput .

dateTimePicker

object ( DateTimePicker )

Виджет DateTimePicker .

РазделительСтиль

Стиль разделителя карты. В настоящее время используется только для разделителей между разделами карты.

Перечисления
DIVIDER_STYLE_UNSPECIFIED Не используйте. Неопределенные.
SOLID_DIVIDER Вариант по умолчанию. Создайте сплошной разделитель между разделами.
NO_DIVIDER Если установлено, разделитель между разделами не отображается.

КартаДействие

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

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

JSON-представление
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Поля
actionLabel

string

Метка, которая отображается как элемент меню действий.

onClick

object ( OnClick )

Действие onClick для этого элемента действия.

КартаFixedFooter

Постоянный (прикрепленный) нижний колонтитул, который появляется внизу карточки. Пример использования приложений Google Chat см. в разделе «Нижний колонтитул карты» .

Установка fixedFooter без указания primaryButton или secondaryButton вызывает ошибку.

Поддерживается дополнениями Google Workspace и приложениями Chat. В приложениях чата вы можете использовать фиксированные нижние колонтитулы в диалогах , но не в сообщениях-карточках .

JSON-представление
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Поля
primaryButton

object ( Button )

Основная кнопка фиксированного нижнего колонтитула. Кнопка должна быть текстовой с заданным текстом и цветом.

secondaryButton

object ( Button )

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

Стиль отображения

В надстройках Google Workspace определяет способ отображения карточки.

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

Перечисления
DISPLAY_STYLE_UNSPECIFIED Не используйте. Неопределенные.
PEEK Заголовок карты отображается внизу боковой панели, частично закрывая текущую верхнюю карту стопки. При нажатии на заголовок карточка помещается в стопку карточек. Если у карты нет заголовка, вместо него используется сгенерированный заголовок.
REPLACE Значение по умолчанию. Карта отображается путем замены вида верхней карты в стопке карт.