Cards v2

Kartu

Antarmuka kartu yang ditampilkan di pesan Google Chat atau add-on Google Workspace.

Kartu mendukung tata letak yang ditentukan, elemen UI interaktif seperti tombol, dan media kaya seperti gambar. Gunakan kartu untuk menyajikan informasi mendetail, mengumpulkan informasi dari pengguna, dan memandu pengguna untuk melakukan langkah berikutnya.

Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Untuk mempelajari cara membuat kartu, lihat dokumentasi berikut:

• Untuk aplikasi Google Chat, lihat Mendesain komponen kartu atau dialog.
• Untuk add-on Google Workspace, lihat Antarmuka berbasis kartu.

Catatan: Anda dapat menambahkan hingga 100 widget per kartu. Widget apa pun di luar batas ini akan diabaikan. Batas ini berlaku untuk pesan kartu dan dialog di aplikasi Google Chat, serta kartu di add-on Google Workspace.

Contoh: Pesan kartu untuk aplikasi Google Chat

Untuk membuat pesan kartu contoh di Google Chat, gunakan JSON berikut:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/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": "[e-mail]"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "[phone]"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}

Representasi JSON
{ "header": { object (CardHeader) }, "sections": [ { object (Section) } ], "sectionDividerStyle": enum (DividerStyle), "cardActions": [ { object (CardAction) } ], "name": string, "fixedFooter": { object (CardFixedFooter) }, "displayStyle": enum (DisplayStyle), "peekCardHeader": { object (CardHeader) } }

Kolom
header	object (CardHeader) Header kartu. Header biasanya berisi gambar di awal dan judul. Header selalu muncul di bagian atas kartu.
sections[]	object (Section) Berisi kumpulan widget. Setiap bagian memiliki header opsionalnya sendiri. Bagian dipisahkan secara visual oleh pemisah garis. Untuk contoh di aplikasi Google Chat, lihat Menentukan bagian kartu.
sectionDividerStyle	enum (DividerStyle) Gaya pemisah antara header, bagian, dan footer.
cardActions[]	object (CardAction) Tindakan kartu. Tindakan ditambahkan ke menu toolbar kartu. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat. Misalnya, JSON berikut membuat menu tindakan kartu dengan opsi Settings dan 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 Nama kartu. Digunakan sebagai ID kartu dalam navigasi kartu. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
fixedFooter	object (CardFixedFooter) Footer tetap yang ditampilkan di bagian bawah kartu ini. Menetapkan fixedFooter tanpa menentukan primaryButton atau secondaryButton akan menyebabkan error. Untuk aplikasi Chat, Anda dapat menggunakan footer tetap dalam dialog, tetapi tidak dalam pesan kartu. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
displayStyle	enum (DisplayStyle) Di add-on Google Workspace, menetapkan properti tampilan peekCardHeader. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
peekCardHeader	object (CardHeader) Saat menampilkan konten kontekstual, header kartu intip berfungsi sebagai placeholder sehingga pengguna dapat berpindah maju antara kartu halaman beranda dan kartu kontekstual. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

CardHeader

Merepresentasikan header kartu. Untuk contoh di aplikasi Google Chat, lihat Menambahkan header.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "title": string, "subtitle": string, "imageType": enum (ImageType), "imageUrl": string, "imageAltText": string }

Kolom
title	string Wajib. Judul header kartu. Header memiliki tinggi tetap: jika judul dan subjudul ditentukan, masing-masing akan menempati satu baris. Jika hanya judul yang ditentukan, judul akan menempati kedua baris.
subtitle	string Subjudul header kartu. Jika ditentukan, akan muncul di barisnya sendiri di bawah title.
imageType	enum (ImageType) Bentuk yang digunakan untuk memangkas gambar. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
imageUrl	string URL HTTPS gambar di header kartu.
imageAltText	string Teks alternatif gambar ini yang digunakan untuk aksesibilitas.

ImageType

Bentuk yang digunakan untuk memangkas gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
SQUARE	Nilai default. Menerapkan mask persegi ke gambar. Misalnya, gambar 4x3 menjadi 3x3.
CIRCLE	Menerapkan mask melingkar ke gambar. Misalnya, gambar 4x3 menjadi lingkaran dengan diameter 3.

Bagian

Bagian berisi kumpulan widget yang dirender secara vertikal dalam urutan yang ditentukan.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "header": string, "widgets": [ { object (Widget) } ], "collapsible": boolean, "uncollapsibleWidgetsCount": integer, "collapseControl": { object (CollapseControl) } }

Kolom
header	string Teks yang muncul di bagian atas suatu bagian. Mendukung teks berformat HTML sederhana. Untuk mengetahui informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di add-on Google Workspace.
widgets[]	object (Widget) Semua widget di bagian. Harus berisi minimal satu widget.
collapsible	boolean Menunjukkan apakah bagian ini dapat diciutkan. Bagian yang dapat diciutkan menyembunyikan beberapa atau semua widget, tetapi pengguna dapat meluaskan bagian untuk menampilkan widget yang tersembunyi dengan mengklik Tampilkan lebih banyak. Pengguna dapat menyembunyikan widget lagi dengan mengklik Tampilkan lebih sedikit. Untuk menentukan widget mana yang disembunyikan, tentukan uncollapsibleWidgetsCount.
uncollapsibleWidgetsCount	integer Jumlah widget yang tidak dapat diciutkan yang tetap terlihat meskipun bagian diciutkan. Misalnya, jika bagian berisi lima widget dan uncollapsibleWidgetsCount disetel ke 2, dua widget pertama akan selalu ditampilkan dan tiga widget terakhir akan diciutkan secara default. uncollapsibleWidgetsCount dipertimbangkan hanya jika collapsible adalah true.
collapseControl	object (CollapseControl) Opsional. Tentukan tombol luaskan dan ciutkan bagian. Tombol ini hanya akan ditampilkan jika bagian dapat diciutkan. Jika kolom ini tidak disetel, tombol default akan digunakan.

Widget

Setiap kartu terdiri dari widget.

Widget adalah objek komposit yang dapat merepresentasikan salah satu dari teks, gambar, tombol, dan jenis objek lainnya.

Representasi 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) }, "carousel": { object (Carousel) }, "chipList": { object (ChipList) } // End of list of possible types for union field data. }

Kolom
horizontalAlignment	enum (HorizontalAlignment) Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom.
Kolom gabungan data. Widget hanya dapat memiliki salah satu item berikut. Anda dapat menggunakan beberapa kolom widget untuk menampilkan lebih banyak item. data hanya dapat berupa salah satu dari berikut:
textParagraph	object (TextParagraph) Menampilkan paragraf teks. Mendukung teks berformat HTML sederhana. Untuk mengetahui informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di add-on Google Workspace. Misalnya, JSON berikut membuat teks tebal: "textParagraph": { "text": " <b>bold text</b>" }
image	object (Image) Menampilkan gambar. Misalnya, JSON berikut membuat gambar dengan teks alternatif: "image": { "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
decoratedText	object (DecoratedText) Menampilkan item teks yang dihiasi. Misalnya, JSON berikut membuat widget teks berhias yang menampilkan alamat email: "decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "[e-mail]", "bottomLabel": "This is a new Email address!", "switchControl": { "name": "has_send_welcome_email_to_sasha", "selected": false, "controlType": "CHECKBOX" } }
buttonList	object (ButtonList) Daftar tombol. Misalnya, JSON berikut membuat dua tombol. Yang pertama adalah tombol teks biru dan yang kedua adalah tombol gambar yang membuka link: "buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
textInput	object (TextInput) Menampilkan kotak teks yang dapat digunakan pengguna untuk mengetik. Misalnya, JSON berikut membuat input teks untuk alamat email: "textInput": { "name": "mailing_address", "label": "Mailing Address" } Sebagai contoh lain, JSON berikut membuat input teks untuk bahasa pemrograman dengan saran statis: "textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
selectionInput	object (SelectionInput) Menampilkan kontrol pilihan yang memungkinkan pengguna memilih item. Kontrol pilihan dapat berupa kotak centang, tombol pilihan, tombol akses, atau menu dropdown. Misalnya, JSON berikut membuat menu dropdown yang memungkinkan pengguna memilih ukuran: "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) Menampilkan widget yang memungkinkan pengguna memasukkan tanggal, waktu, atau tanggal dan waktu. Misalnya, JSON berikut membuat pemilih tanggal dan waktu untuk menjadwalkan janji temu: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": 796435200000 }
divider	object (Divider) Menampilkan pembagi garis horizontal di antara widget. Misalnya, JSON berikut membuat pemisah: "divider": { }
grid	object (Grid) Menampilkan petak dengan kumpulan item. Petak mendukung sejumlah kolom dan item. Jumlah baris ditentukan oleh batas atas jumlah item dibagi dengan jumlah kolom. Petak dengan 10 item dan 2 kolom memiliki 5 baris. Petak dengan 11 item dan 2 kolom memiliki 6 baris. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace. Misalnya, JSON berikut membuat petak 2 kolom dengan satu item: "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) Menampilkan hingga 2 kolom. Untuk menyertakan lebih dari 2 kolom, atau untuk menggunakan baris, gunakan widget Grid. Misalnya, JSON berikut membuat 2 kolom yang masing-masing berisi paragraf teks: "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" } } ] } ] }
carousel	object (Carousel) Carousel berisi kumpulan widget bertingkat. Misalnya, ini adalah representasi JSON dari carousel yang berisi dua paragraf teks. { "widgets": [ { "textParagraph": { "text": "First text paragraph in the carousel." } }, { "textParagraph": { "text": "Second text paragraph in the carousel." } } ] }
chipList	object (ChipList) Daftar chip. Misalnya, JSON berikut membuat dua chip. Yang pertama adalah chip teks dan yang kedua adalah chip ikon yang membuka link: "chipList": { "chips": [ { "text": "Edit", "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }

TextParagraph

Paragraf teks yang mendukung pemformatan. Untuk contoh di aplikasi Google Chat, lihat Menambahkan paragraf teks yang diformat. Untuk mengetahui informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di add-on Google Workspace.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "text": string, "maxLines": integer, "textSyntax": enum (TextSyntax) }

Kolom
text	string Teks yang ditampilkan di widget.
maxLines	integer Jumlah maksimum baris teks yang ditampilkan di widget. Jika teks melebihi jumlah baris maksimum yang ditentukan, konten yang berlebih akan disembunyikan di balik tombol tampilkan lebih banyak. Jika teks sama dengan atau lebih pendek dari jumlah baris maksimum yang ditentukan, tombol tampilkan lebih banyak tidak ditampilkan. Nilai defaultnya adalah 0, yang dalam hal ini semua konteks ditampilkan. Nilai negatif akan diabaikan.
textSyntax	enum (TextSyntax) Sintaksis teks. Jika tidak disetel, teks akan dirender sebagai HTML. Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

TextSyntax

Sintaksis yang digunakan untuk memformat teks.

Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Enum
TEXT_SYNTAX_UNSPECIFIED	Teks dirender sebagai HTML jika tidak ditentukan.
HTML	Teks dirender sebagai HTML. Nilai ini merupakan default.
MARKDOWN	Teks dirender sebagai Markdown.

Gambar

Gambar yang ditentukan oleh URL dan dapat memiliki tindakan onClick. Untuk contoh, lihat Menambahkan gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "imageUrl": string, "onClick": { object (OnClick) }, "altText": string }

Kolom
imageUrl	string URL HTTPS yang menghosting gambar. Contoh: https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
onClick	object (OnClick) Saat pengguna mengklik gambar, klik tersebut akan memicu tindakan ini.
altText	string Teks alternatif gambar ini yang digunakan untuk aksesibilitas.

OnClick

Menunjukkan cara merespons saat pengguna mengklik elemen interaktif pada kartu, seperti tombol.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

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

Kolom
Kolom gabungan data. data hanya dapat berupa salah satu dari berikut:
action	object (Action) Jika ditentukan, tindakan dipicu oleh onClick ini.
openLink	object (OpenLink) Jika ditentukan, onClick akan memicu tindakan membuka link.
openDynamicLinkAction	object (Action) Add-on memicu tindakan ini saat tindakan perlu membuka link. Hal ini berbeda dengan openLink di atas karena yang ini perlu berkomunikasi dengan server untuk mendapatkan link. Oleh karena itu, beberapa tugas persiapan diperlukan agar klien web dapat melakukannya sebelum respons tindakan buka link ditampilkan. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
card	object (Card) Kartu baru didorong ke tumpukan kartu setelah diklik jika ditentukan. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
overflowMenu	object (OverflowMenu) Jika ditentukan, onClick akan membuka menu tambahan.

Tindakan

Tindakan yang menjelaskan perilaku saat formulir dikirimkan. Misalnya, Anda dapat memanggil skrip Apps Script untuk menangani formulir. Jika tindakan dipicu, nilai formulir akan dikirim ke server.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "function": string, "parameters": [ { object (ActionParameter) } ], "loadIndicator": enum (LoadIndicator), "persistValues": boolean, "interaction": enum (Interaction), "requiredWidgets": [ string ], "allWidgetsAreRequired": boolean }

Kolom
function	string Fungsi kustom yang akan dipanggil saat elemen penampung diklik atau diaktifkan. Untuk contoh penggunaan, lihat Membaca data formulir.
parameters[]	object (ActionParameter) Daftar parameter tindakan.
loadIndicator	enum (LoadIndicator) Menentukan indikator pemuatan yang ditampilkan tindakan saat melakukan panggilan ke tindakan.
persistValues	boolean Menunjukkan apakah nilai formulir tetap ada setelah tindakan. Nilai defaultnya adalah false. Jika true, nilai formulir tetap ada setelah tindakan dipicu. Untuk mengizinkan pengguna membuat perubahan saat tindakan sedang diproses, tetapkan LoadIndicator ke NONE. Untuk pesan kartu di aplikasi Chat, Anda juga harus menetapkan ResponseType tindakan ke UPDATE_MESSAGE dan menggunakan cardId yang sama dari kartu yang berisi tindakan. Jika false, nilai formulir akan dihapus saat tindakan dipicu. Untuk mencegah pengguna melakukan perubahan saat tindakan sedang diproses, tetapkan LoadIndicator ke SPINNER.
interaction	enum (Interaction) Opsional. Wajib saat membuka dialog. Tindakan yang harus dilakukan sebagai respons terhadap interaksi dengan pengguna, seperti pengguna mengklik tombol dalam pesan kartu. Jika tidak ditentukan, aplikasi akan merespons dengan menjalankan action —seperti membuka link atau menjalankan fungsi—seperti biasa. Dengan menentukan interaction, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menyetel interaction ke OPEN_DIALOG, aplikasi dapat membuka dialog. Jika ditentukan, indikator pemuatan tidak ditampilkan. Jika ditentukan untuk add-on, seluruh kartu akan dihapus dan tidak ada yang ditampilkan di klien. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.
requiredWidgets[]	string Opsional. Isi daftar ini dengan nama widget yang diperlukan Tindakan ini untuk pengiriman yang valid. Jika widget yang tercantum di sini tidak memiliki nilai saat Tindakan ini dipanggil, pengiriman formulir akan dibatalkan. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
allWidgetsAreRequired	boolean Opsional. Jika benar, semua widget dianggap diperlukan oleh tindakan ini. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

ActionParameter

Daftar parameter string yang akan diberikan saat metode tindakan dipanggil. Misalnya, pertimbangkan tiga tombol tunda: tunda sekarang, tunda satu hari, atau tunda minggu depan. Anda dapat menggunakan action method = snooze(), dengan meneruskan jenis tunda dan waktu tunda dalam daftar parameter string.

Untuk mempelajari lebih lanjut, lihat CommonEventObject.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "key": string, "value": string }

Kolom
key	string Nama parameter untuk skrip tindakan.
value	string Nilai parameter.

LoadIndicator

Menentukan indikator pemuatan yang ditampilkan tindakan saat melakukan panggilan ke tindakan.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
SPINNER	Menampilkan indikator lingkaran berputar untuk menunjukkan bahwa konten sedang dimuat.
NONE	Tidak ada yang ditampilkan.

Interaksi

Opsional. Wajib diisi saat membuka dialog.

Tindakan yang harus dilakukan sebagai respons terhadap interaksi dengan pengguna, seperti pengguna mengklik tombol dalam pesan kartu.

Jika tidak ditentukan, aplikasi akan merespons dengan menjalankan action —seperti membuka link atau menjalankan fungsi—seperti biasa.

Dengan menentukan interaction, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menyetel interaction ke OPEN_DIALOG, aplikasi dapat membuka dialog.

Jika ditentukan, indikator pemuatan tidak ditampilkan. Jika ditentukan untuk add-on, seluruh kartu akan dihapus dan tidak ada yang ditampilkan di klien.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Enum
INTERACTION_UNSPECIFIED	Nilai default. action dieksekusi seperti biasa.
OPEN_DIALOG	Membuka dialog, antarmuka berbasis kartu yang berjendela dan digunakan aplikasi Chat untuk berinteraksi dengan pengguna. Hanya didukung oleh aplikasi Chat sebagai respons terhadap klik tombol pada pesan kartu. Jika ditentukan untuk add-on, seluruh kartu akan dihapus dan tidak ada yang ditampilkan di klien. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

OpenLink

Mewakili peristiwa onClick yang membuka hyperlink.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "url": string, "openAs": enum (OpenAs), "onClose": enum (OnClose) }

Kolom
url	string URL yang akan dibuka.
openAs	enum (OpenAs) Cara membuka link. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
onClose	enum (OnClose) Apakah klien melupakan link setelah membukanya, atau mengamatinya hingga jendela ditutup. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

OpenAs

Saat tindakan OnClick membuka link, klien dapat membukanya sebagai jendela berukuran penuh (jika itu adalah frame yang digunakan oleh klien), atau overlay (seperti pop-up). Implementasinya bergantung pada kemampuan platform klien, dan nilai yang dipilih mungkin diabaikan jika klien tidak mendukungnya. FULL_SIZE didukung oleh semua klien.

Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

Enum
FULL_SIZE	Link akan terbuka sebagai jendela berukuran penuh (jika itu adalah frame yang digunakan oleh klien).
OVERLAY	Link akan terbuka sebagai overlay, seperti pop-up.

OnClose

Tindakan yang dilakukan klien saat link yang dibuka oleh tindakan OnClick ditutup.

Implementasi bergantung pada kemampuan platform klien. Misalnya, browser web dapat membuka link di jendela pop-up dengan OnClose handler.

Jika kedua handler OnOpen dan OnClose ditetapkan, dan platform klien tidak dapat mendukung kedua nilai, OnClose akan diprioritaskan.

Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

Enum
NOTHING	Nilai default. Kartu tidak dimuat ulang; tidak terjadi apa pun.
RELOAD	Memuat ulang kartu setelah jendela anak ditutup. Jika digunakan bersama dengan OpenAs.OVERLAY, jendela turunan akan berfungsi sebagai dialog modal dan kartu induk akan diblokir hingga jendela turunan ditutup.

OverflowMenu

Widget yang menampilkan menu pop-up dengan satu atau beberapa tindakan yang dapat dipicu pengguna. Misalnya, menampilkan tindakan non-utama dalam kartu. Anda dapat menggunakan widget ini saat tindakan tidak sesuai dengan ruang yang tersedia. Untuk menggunakannya, tentukan widget ini dalam OnClick tindakan widget yang mendukungnya. Misalnya, dalam Button.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "items": [ { object (OverflowMenuItem) } ] }

Kolom
items[]	object (OverflowMenuItem) Wajib. Daftar opsi menu.

OverflowMenuItem

Opsi yang dapat dipanggil pengguna di menu tambahan.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "startIcon": { object (Icon) }, "text": string, "onClick": { object (OnClick) }, "disabled": boolean }

Kolom
startIcon	object (Icon) Ikon yang ditampilkan di depan teks.
text	string Wajib. Teks yang mengidentifikasi atau menjelaskan item kepada pengguna.
onClick	object (OnClick) Wajib. Tindakan yang dipanggil saat opsi menu dipilih. OnClick ini tidak boleh berisi OverflowMenu, OverflowMenu yang ditentukan akan dihapus dan item menu dinonaktifkan.
disabled	boolean Apakah opsi menu dinonaktifkan. Nilai defaultnya adalah false (salah).

Ikon

Ikon yang ditampilkan di widget pada kartu. Untuk contoh di aplikasi Google Chat, lihat Menambahkan ikon.

Mendukung ikon bawaan dan kustom.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "altText": string, "imageType": enum (ImageType), // Union field icons can be only one of the following: "knownIcon": string, "iconUrl": string, "materialIcon": { object (MaterialIcon) } // End of list of possible types for union field icons. }

Kolom
altText	string Opsional. Deskripsi ikon yang digunakan untuk aksesibilitas. Jika tidak ditentukan, nilai default Button diberikan. Sebagai praktik terbaik, Anda harus menetapkan deskripsi yang berguna untuk apa yang ditampilkan ikon, dan jika berlaku, apa yang dilakukannya. Misalnya, A user's account portrait, atau Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat. Jika ikon disetel di Button, maka altText akan muncul sebagai teks bantuan saat pengguna mengarahkan kursor ke tombol. Namun, jika tombol juga menetapkan text, altText ikon akan diabaikan.
imageType	enum (ImageType) Gaya pangkas yang diterapkan pada gambar. Dalam beberapa kasus, penerapan CIRCLE pemangkasan menyebabkan gambar digambar lebih besar daripada ikon bawaan.
Kolom gabungan icons. Ikon yang ditampilkan di widget pada kartu. icons hanya dapat berupa salah satu dari berikut:
knownIcon	string Menampilkan salah satu ikon bawaan yang disediakan oleh Google Workspace. Misalnya, untuk menampilkan ikon pesawat terbang, tentukan AIRPLANE. Untuk bus, tentukan BUS. Untuk mengetahui daftar lengkap ikon yang didukung, lihat ikon bawaan.
iconUrl	string Menampilkan ikon kustom yang dihosting di URL HTTPS. Contoh: "iconUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png" Jenis file yang didukung mencakup .png dan .jpg.
materialIcon	object (MaterialIcon) Tampilkan salah satu Ikon Material Google. Misalnya, untuk menampilkan ikon kotak centang, gunakan "materialIcon": { "name": "check_box" } Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

MaterialIcon

A Ikon Material Google, yang mencakup lebih dari 2.500+ opsi.

Misalnya, untuk menampilkan ikon kotak centang dengan ketebalan dan nilai yang disesuaikan, tulis kode berikut:

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ "name": string, "fill": boolean, "weight": integer, "grade": integer }

Kolom
name	string Nama ikon yang ditentukan di Ikon Material Google, misalnya, check_box. Nama yang tidak valid akan dibatalkan dan diganti dengan string kosong, sehingga ikon gagal dirender.
fill	boolean Apakah ikon dirender sebagai terisi. Nilai defaultnya adalah false (salah). Untuk melihat pratinjau setelan ikon yang berbeda, buka Ikon Font Google dan sesuaikan setelan di bagian Sesuaikan.
weight	integer Ketebalan goresan ikon. Pilih dari {100, 200, 300, 400, 500, 600, 700}. Jika tidak ada, nilai defaultnya adalah 400. Jika nilai lain ditentukan, nilai default akan digunakan. Untuk melihat pratinjau setelan ikon yang berbeda, buka Ikon Font Google dan sesuaikan setelan di bagian Sesuaikan.
grade	integer Ketebalan dan gradasi memengaruhi ketebalan simbol. Penyesuaian gradasi lebih terperinci daripada penyesuaian ketebalan dan memiliki sedikit dampak pada ukuran simbol. Pilih dari {-25, 0, 200}. Jika tidak ada, nilai defaultnya adalah 0. Jika nilai lain ditentukan, nilai default akan digunakan. Untuk melihat pratinjau setelan ikon yang berbeda, buka Ikon Font Google dan sesuaikan setelan di bagian Sesuaikan.

DecoratedText

Widget yang menampilkan teks dengan dekorasi opsional seperti label di atas atau di bawah teks, ikon di depan teks, widget pilihan, atau tombol setelah teks. Untuk melihat contoh di aplikasi Google Chat, lihat Menampilkan teks dengan teks dekoratif.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON

{ "icon": { object (Icon) }, "startIcon": { object (Icon) }, "startIconVerticalAlignment": enum (VerticalAlignment), "topLabel": string, "topLabelText": { object (TextParagraph) }, "text": string, "contentText": { object (TextParagraph) }, "wrapText": boolean, "bottomLabel": string, "bottomLabelText": { object (TextParagraph) }, "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. }

Kolom
icon (deprecated)	object (Icon) Item ini tidak digunakan lagi. Tidak digunakan lagi dan digantikan dengan startIcon.
startIcon	object (Icon) Ikon yang ditampilkan di depan teks.
startIconVerticalAlignment	enum (VerticalAlignment) Opsional. Perataan vertikal ikon mulai. Jika tidak disetel, ikon akan berada di tengah secara vertikal. Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.
topLabel	string Teks yang muncul di atas text. Selalu memangkas.
topLabelText	object (TextParagraph) TextParagraph setara dengan topLabel. Selalu memangkas. Memungkinkan format yang lebih kompleks daripada topLabel. Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.
text	string Wajib. Teks utama. Mendukung pemformatan sederhana. Untuk mengetahui informasi selengkapnya tentang memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di add-on Google Workspace.
contentText	object (TextParagraph) TextParagraph setara dengan text. Memungkinkan format yang lebih kompleks daripada text. Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.
wrapText	boolean Setelan kemas teks. Jika true, teks akan di-wrap dan ditampilkan dalam beberapa baris. Jika tidak, teks akan terpotong. Hanya berlaku untuk text, bukan topLabel dan bottomLabel.
bottomLabel	string Teks yang muncul di bawah text. Selalu di-wrap.
bottomLabelText	object (TextParagraph) TextParagraph setara dengan bottomLabel. Selalu di-wrap. Memungkinkan format yang lebih kompleks daripada bottomLabel. Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.
onClick	object (OnClick) Tindakan ini dipicu saat pengguna mengklik topLabel atau bottomLabel.
Kolom gabungan control. Tombol, tombol geser, kotak centang, atau gambar yang muncul di sisi kanan teks dalam widget decoratedText. control hanya dapat berupa salah satu dari berikut:
button	object (Button) Tombol yang dapat diklik pengguna untuk memicu tindakan.
switchControl	object (SwitchControl) Widget tombol yang dapat diklik pengguna untuk mengubah statusnya dan memicu tindakan.
endIcon	object (Icon) Ikon yang ditampilkan setelah teks. Mendukung ikon bawaan dan kustom.

VerticalAlignment

Mewakili atribut perataan vertikal.

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED	Jenis tidak ditentukan. Jangan gunakan.
TOP	Perataan ke posisi atas.
MIDDLE	Penyejajaran ke posisi tengah.
BOTTOM	Penyejajaran ke posisi bawah.

Tombol

Tombol teks, ikon, atau teks dan ikon yang dapat diklik pengguna. Untuk contoh di aplikasi Google Chat, lihat Menambahkan tombol.

Untuk membuat gambar menjadi tombol yang dapat diklik, tentukan Image (bukan ImageComponent) dan tetapkan tindakan onClick.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "text": string, "icon": { object (Icon) }, "color": { object (Color) }, "onClick": { object (OnClick) }, "disabled": boolean, "altText": string, "type": enum (Type) }

Kolom
text	string Teks yang ditampilkan di dalam tombol.
icon	object (Icon) Ikon yang ditampilkan di dalam tombol. Jika icon dan text ditetapkan, ikon akan muncul sebelum teks.
color	object (Color) Opsional. Warna tombol. Jika ditetapkan, tombol type ditetapkan ke FILLED dan warna kolom text dan icon ditetapkan ke warna yang kontras agar mudah dibaca. Misalnya, jika warna tombol ditetapkan ke biru, teks atau ikon apa pun di tombol akan ditetapkan ke putih. Untuk menyetel warna tombol, tentukan nilai untuk kolom red, green, dan blue. Nilainya harus berupa angka float antara 0 dan 1 berdasarkan nilai warna RGB, dengan 0 (0/255) mewakili tidak adanya warna dan 1 (255/255) mewakili intensitas warna maksimum. Misalnya, kode berikut menetapkan warna menjadi merah pada intensitas maksimumnya: "color": { "red": 1, "green": 0, "blue": 0, } Kolom alpha tidak tersedia untuk warna tombol. Jika ditentukan, kolom ini akan diabaikan.
onClick	object (OnClick) Wajib. Tindakan yang akan dilakukan saat pengguna mengklik tombol, seperti membuka hyperlink atau menjalankan fungsi kustom.
disabled	boolean Jika true, tombol ditampilkan dalam status tidak aktif dan tidak merespons tindakan pengguna.
altText	string Teks alternatif yang digunakan untuk aksesibilitas. Tetapkan teks deskriptif yang memberi tahu pengguna fungsi tombol. Misalnya, jika tombol membuka hyperlink, Anda dapat menulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/workspace/chat".
type	enum (Type) Opsional. Jenis tombol. Jika tidak disetel, jenis tombol defaultnya adalah OUTLINED. Jika kolom color ditetapkan, jenis tombol akan dipaksa menjadi FILLED dan nilai apa pun yang ditetapkan untuk kolom ini akan diabaikan.

Warna

Mewakili warna dalam ruang warna RGBA. Representasi ini dirancang untuk kesederhanaan konversi ke dan dari representasi warna dalam berbagai bahasa dibandingkan dengan kepadatan. Misalnya, kolom representasi ini dapat diberikan dengan mudah ke konstruktor java.awt.Color di Java; kolom ini juga dapat diberikan dengan mudah ke metode +colorWithRed:green:blue:alpha UIColor di iOS; dan, dengan sedikit upaya, kolom ini dapat diformat dengan mudah menjadi string rgba() CSS di JavaScript.

Halaman referensi ini tidak memiliki informasi tentang ruang warna absolut yang harus digunakan untuk menafsirkan nilai RGB—misalnya, sRGB, Adobe RGB, DCI-P3, dan BT.2020. Secara default, aplikasi harus menggunakan ruang warna sRGB.

Saat kesamaan warna perlu diputuskan, implementasi, kecuali didokumentasikan lain, memperlakukan dua warna sebagai sama jika semua nilai merah, hijau, biru, dan alfa masing-masing berbeda paling banyak 1e-5.

Contoh (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();
 }
 // ...

Contoh (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;
}
// ...

Contoh (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('');
};

// ...

Representasi JSON
{ "red": number, "green": number, "blue": number, "alpha": number }

Kolom
red	number Jumlah merah dalam warna sebagai nilai dalam interval [0, 1].
green	number Jumlah hijau dalam warna sebagai nilai dalam interval [0, 1].
blue	number Jumlah biru dalam warna sebagai nilai dalam interval [0, 1].
alpha	number Fraksi warna ini yang harus diterapkan ke piksel. Yaitu, warna piksel akhir ditentukan oleh persamaan: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Ini berarti bahwa nilai 1,0 berarti warna solid, sedangkan nilai 0,0 berarti warna yang sepenuhnya transparan. Kode ini menggunakan pesan wrapper, bukan skalar float sederhana sehingga memungkinkan untuk membedakan antara nilai default dan nilai yang tidak disetel. Jika dihilangkan, objek warna ini dirender sebagai warna solid (seolah-olah nilai alfa telah secara eksplisit diberikan dengan nilai 1,0).

Jenis

Opsional. Jenis type tombol. Jika kolom color ditetapkan, maka type dipaksa menjadi FILLED.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Enum
TYPE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
OUTLINED	Tombol bergaris adalah tombol penekanan sedang. Tombol ini biasanya berisi tindakan yang penting, tetapi bukan tindakan utama di aplikasi atau add-on Chat.
FILLED	Tombol terisi memiliki penampung dengan warna solid. Chip ini memiliki dampak visual paling besar dan direkomendasikan untuk tindakan penting dan utama dalam aplikasi Chat atau add-on.
FILLED_TONAL	Tombol tonal yang diisi adalah jalan tengah alternatif antara tombol yang diisi dan tombol yang dibatasi. Tombol ini berguna dalam konteks saat tombol berprioritas lebih rendah memerlukan penekanan yang sedikit lebih besar daripada yang diberikan tombol garis batas.
BORDERLESS	Tombol tidak memiliki penampung yang tidak terlihat dalam status defaultnya. Chip ini sering digunakan untuk tindakan dengan prioritas terendah, terutama saat menyajikan beberapa opsi.

SwitchControl

Tombol gaya peralihan atau kotak centang di dalam widget decoratedText.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Hanya didukung di widget decoratedText.

Representasi JSON
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object (Action) }, "controlType": enum (ControlType) }

Kolom
name	string Nama yang digunakan untuk mengidentifikasi widget tombol di peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
value	string Nilai yang dimasukkan oleh pengguna, ditampilkan sebagai bagian dari peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
selected	boolean Jika true, tombol dipilih.
onChangeAction	object (Action) Tindakan yang akan dilakukan saat status tombol diubah, seperti fungsi yang akan dijalankan.
controlType	enum (ControlType) Tampilan tombol di antarmuka pengguna. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

ControlType

Tampilan tombol di antarmuka pengguna.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
SWITCH	Tombol gaya tombol.
CHECKBOX	Tidak digunakan lagi dan digantikan dengan CHECK_BOX.
CHECK_BOX	Kotak centang.

ButtonList

Daftar tombol yang disusun secara horizontal. Untuk contoh di aplikasi Google Chat, lihat Menambahkan tombol.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "buttons": [ { object (Button) } ] }

Kolom
buttons[]	object (Button) Array tombol.

TextInput

Kolom tempat pengguna dapat memasukkan teks. Mendukung saran dan tindakan saat perubahan. Mendukung validasi pengiriman formulir. Jika Action.all_widgets_are_required disetel ke true atau widget ini ditentukan dalam Action.required_widgets, tindakan pengiriman akan diblokir kecuali jika nilai dimasukkan. Untuk contoh di aplikasi Google Chat, lihat Menambahkan kolom tempat pengguna dapat memasukkan teks.

Aplikasi chat menerima dan dapat memproses nilai teks yang dimasukkan selama peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.

Jika Anda perlu mengumpulkan data yang tidak ditentukan atau abstrak dari pengguna, gunakan input teks. Untuk mengumpulkan data yang ditentukan atau di-enum dari pengguna, gunakan SelectionInput widget.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum (Type), "onChangeAction": { object (Action) }, "initialSuggestions": { object (Suggestions) }, "autoCompleteAction": { object (Action) }, "validation": { object (Validation) }, "placeholderText": string }

Kolom
name	string Nama yang digunakan untuk mengidentifikasi input teks dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
label	string Teks yang muncul di atas kolom input teks di antarmuka pengguna. Tentukan teks yang membantu pengguna memasukkan informasi yang dibutuhkan aplikasi Anda. Misalnya, jika Anda menanyakan nama seseorang, tetapi secara khusus membutuhkan nama belakangnya, tulis surname bukan name. Wajib jika hintText tidak ditentukan. Jika tidak, bersifat opsional.
hintText	string Teks yang muncul di bawah kolom input teks yang dimaksudkan untuk membantu pengguna dengan meminta mereka memasukkan nilai tertentu. Teks ini selalu terlihat. Wajib jika label tidak ditentukan. Jika tidak, bersifat opsional.
value	string Nilai yang dimasukkan oleh pengguna, ditampilkan sebagai bagian dari peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
type	enum (Type) Tampilan kolom input teks di antarmuka pengguna. Misalnya, apakah kolom berupa satu baris atau beberapa baris.
onChangeAction	object (Action) Yang harus dilakukan saat terjadi perubahan di kolom input teks. Misalnya, pengguna menambahkan ke kolom atau menghapus teks. Contoh tindakan yang dapat dilakukan mencakup menjalankan fungsi kustom atau membuka dialog di Google Chat.
initialSuggestions	object (Suggestions) Nilai yang disarankan yang dapat dimasukkan pengguna. Nilai ini muncul saat pengguna mengklik di dalam kolom input teks. Saat pengguna mengetik, nilai yang disarankan akan difilter secara dinamis agar cocok dengan apa yang telah diketik pengguna. Misalnya, kolom input teks untuk bahasa pemrograman dapat menyarankan Java, JavaScript, Python, dan C++. Saat pengguna mulai mengetik Jav, daftar saran akan difilter untuk menampilkan hanya Java dan JavaScript. Nilai yang disarankan membantu memandu pengguna memasukkan nilai yang dapat dipahami aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan javascript dan yang lain java script. Menyarankan JavaScript dapat menstandardisasi cara pengguna berinteraksi dengan aplikasi Anda. Jika ditentukan, TextInput.type selalu SINGLE_LINE, meskipun ditetapkan ke MULTIPLE_LINE. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
autoCompleteAction	object (Action) Opsional. Tentukan tindakan yang harus diambil saat kolom input teks memberikan saran kepada pengguna yang berinteraksi dengannya. Jika tidak ditentukan, saran ditetapkan oleh initialSuggestions dan diproses oleh klien. Jika ditentukan, aplikasi akan melakukan tindakan yang ditentukan di sini, seperti menjalankan fungsi kustom. Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.
validation	object (Validation) Tentukan validasi format input yang diperlukan untuk kolom teks ini. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
placeholderText	string Teks yang muncul di kolom input teks saat kolom kosong. Gunakan teks ini untuk meminta pengguna memasukkan nilai. Misalnya, Enter a number from 0 to 100. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Jenis

Tampilan kolom input teks di antarmuka pengguna. Misalnya, apakah berupa kolom input satu baris, atau input multi-baris. Jika initialSuggestions ditentukan, type selalu SINGLE_LINE, meskipun ditetapkan ke MULTIPLE_LINE.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
SINGLE_LINE	Kolom input teks memiliki tinggi tetap satu baris.
MULTIPLE_LINE	Kolom input teks memiliki tinggi tetap beberapa baris.

RenderActions

Serangkaian petunjuk rendering yang memberi tahu kartu untuk melakukan tindakan, atau memberi tahu aplikasi host add-on atau aplikasi Chat untuk melakukan tindakan khusus aplikasi.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Kolom
action	Action

Tindakan

Kolom
navigations[]	Navigation Mendorong, memunculkan, atau memperbarui kartu. Add-on di Google Chat.

Navigasi

Menambahkan kartu baru ke tumpukan (berpindah maju). Untuk aplikasi Chat, hanya tersedia untuk beranda aplikasi.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

navigations: {
  pushCard: CARD
}

Ganti kartu teratas dengan kartu baru. Untuk aplikasi Chat, hanya tersedia untuk beranda aplikasi.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

navigations: {
  updateCard: CARD
}

Kolom
Kolom union navigate_action. navigate_action hanya dapat berupa salah satu dari hal berikut:
pushCard	Card Mendorong kartu ke tumpukan kartu. Untuk dialog di Google Chat, membuka atau memperbarui dialog.
updateCard	Card Memperbarui kartu teratas dengan kartu baru dan mempertahankan nilai kolom formulir yang diisi. Untuk kolom yang tidak setara, nilai akan dihilangkan. Untuk dialog di Google Chat, membuka atau memperbarui dialog.

Saran

Nilai yang disarankan yang dapat dimasukkan pengguna. Nilai ini muncul saat pengguna mengklik di dalam kolom input teks. Saat pengguna mengetik, nilai yang disarankan akan difilter secara dinamis agar cocok dengan apa yang telah diketik pengguna.

Misalnya, kolom input teks untuk bahasa pemrograman dapat menyarankan Java, JavaScript, Python, dan C++. Saat pengguna mulai mengetik Jav, daftar saran akan difilter untuk menampilkan Java dan JavaScript.

Nilai yang disarankan membantu memandu pengguna memasukkan nilai yang dapat dipahami aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan javascript dan yang lain java script. Menyarankan JavaScript dapat menstandardisasi cara pengguna berinteraksi dengan aplikasi Anda.

Jika ditentukan, TextInput.type selalu SINGLE_LINE, meskipun ditetapkan ke MULTIPLE_LINE.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "items": [ { object (SuggestionItem) } ] }

Kolom
items[]	object (SuggestionItem) Daftar saran yang digunakan untuk rekomendasi pelengkapan otomatis di kolom input teks.

SuggestionItem

Satu nilai yang disarankan yang dapat dimasukkan pengguna di kolom input teks.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ // Union field content can be only one of the following: "text": string // End of list of possible types for union field content. }

Kolom
Kolom gabungan content. content hanya dapat berupa salah satu dari berikut:
text	string Nilai input yang disarankan ke kolom input teks. Hal ini setara dengan apa yang dimasukkan pengguna sendiri.

Validasi

Menampilkan data yang diperlukan untuk memvalidasi widget yang dilampirkan.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "characterLimit": integer, "inputType": enum (InputType) }

Kolom
characterLimit	integer Tentukan batas karakter untuk widget input teks. Perhatikan bahwa ini hanya digunakan untuk input teks dan diabaikan untuk widget lainnya. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.
inputType	enum (InputType) Tentukan jenis widget input. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

InputType

Jenis widget input.

Enum
INPUT_TYPE_UNSPECIFIED	Jenis tidak ditentukan. Jangan gunakan.
TEXT	Teks biasa yang menerima semua karakter.
INTEGER	Nilai bilangan bulat.
FLOAT	Nilai float.
EMAIL	Alamat email.
EMOJI_PICKER	Emoji yang dipilih dari pemilih emoji yang disediakan sistem.

SelectionInput

Widget yang membuat satu atau beberapa item UI yang dapat dipilih pengguna. Mendukung validasi pengiriman formulir untuk dropdown dan multiselect saja. Jika Action.all_widgets_are_required ditetapkan ke true atau widget ini ditentukan di Action.required_widgets, tindakan pengiriman akan diblokir kecuali jika nilai dipilih. Misalnya, menu dropdown atau kotak centang. Anda dapat menggunakan widget ini untuk mengumpulkan data yang dapat diprediksi atau dihitung. Untuk contoh di aplikasi Google Chat, lihat Menambahkan elemen UI yang dapat dipilih.

Aplikasi chat dapat memproses nilai item yang dipilih atau dimasukkan pengguna. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.

Untuk mengumpulkan data yang tidak ditentukan atau abstrak dari pengguna, gunakan widget TextInput.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

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

Kolom
name	string Wajib. Nama yang mengidentifikasi input pilihan dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
label	string Teks yang muncul di atas kolom input pilihan di antarmuka pengguna. Tentukan teks yang membantu pengguna memasukkan informasi yang dibutuhkan aplikasi Anda. Misalnya, jika pengguna memilih tingkat urgensi tiket tugas dari menu drop-down, labelnya mungkin "Urgensi" atau "Pilih urgensi".
type	enum (SelectionType) Jenis item yang ditampilkan kepada pengguna di SelectionInput widget. Jenis pilihan mendukung berbagai jenis interaksi. Misalnya, pengguna dapat memilih satu atau beberapa kotak centang, tetapi mereka hanya dapat memilih satu nilai dari menu dropdown.
items[]	object (SelectionItem) Array item yang dapat dipilih. Misalnya, array tombol pilihan atau kotak centang. Mendukung hingga 100 item.
onChangeAction	object (Action) Jika ditentukan, formulir akan dikirimkan saat pilihan berubah. Jika tidak ditentukan, Anda harus menentukan tombol terpisah yang mengirimkan formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
multiSelectMaxSelectedItems	integer Untuk menu pilihan ganda, jumlah maksimum item yang dapat dipilih pengguna. Nilai minimum adalah 1 item. Jika tidak ditentukan, defaultnya adalah 3 item.
multiSelectMinQueryLength	integer Untuk menu pilihan ganda, jumlah karakter teks yang dimasukkan pengguna sebelum menu menampilkan item pilihan yang disarankan. Jika tidak disetel, menu pilihan ganda akan menggunakan nilai default berikut: Jika menu menggunakan array statis item SelectionInput, defaultnya adalah 0 karakter dan langsung mengisi item dari array. Jika menu menggunakan sumber data dinamis ( multi_select_data_source), defaultnya adalah 3 karakter sebelum membuat kueri sumber data untuk menampilkan item yang disarankan.
Kolom gabungan multi_select_data_source. Untuk menu pilihan ganda, sumber data yang mengisi item pilihan secara dinamis. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace. multi_select_data_source hanya dapat berupa salah satu dari berikut:
externalDataSource	object (Action) Sumber data eksternal, seperti database relasional.
platformDataSource	object (PlatformDataSource) Sumber data dari Google Workspace.

SelectionType

Format untuk item yang dapat dipilih pengguna. Opsi yang berbeda mendukung berbagai jenis interaksi. Misalnya, pengguna dapat memilih beberapa kotak centang, tetapi hanya dapat memilih satu item dari menu dropdown.

Setiap input pilihan mendukung satu jenis pilihan. Mencampur kotak centang dan tombol, misalnya, tidak didukung.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
CHECK_BOX	Sekumpulan kotak centang. Pengguna dapat memilih satu atau beberapa kotak centang.
RADIO_BUTTON	Kumpulan tombol pilihan. Pengguna dapat memilih satu tombol pilihan.
SWITCH	Kumpulan tombol. Pengguna dapat mengaktifkan satu atau beberapa sakelar.
DROPDOWN	Menu dropdown. Pengguna dapat memilih satu item dari menu.
MULTI_SELECT	Menu dengan kotak teks. Pengguna dapat mengetik dan memilih satu atau beberapa item. Untuk add-on Google Workspace, Anda harus mengisi item menggunakan array statis objek SelectionItem. Untuk aplikasi Google Chat, Anda juga dapat mengisi item menggunakan sumber data dinamis dan item saran otomatis saat pengguna mengetik di menu. Misalnya, pengguna dapat mulai mengetik nama ruang Google Chat dan widget akan menyarankan ruang secara otomatis. Untuk mengisi item secara dinamis untuk menu pilihan ganda, gunakan salah satu jenis sumber data berikut: Data Google Workspace: Item diisi menggunakan data dari Google Workspace, seperti pengguna Google Workspace atau ruang Google Chat. Data eksternal: Item diisi dari sumber data eksternal di luar Google Workspace. Untuk contoh cara menerapkan menu pilihan ganda untuk aplikasi Chat, lihat Menambahkan menu pilihan ganda. Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

SelectionItem

Item yang dapat dipilih pengguna dalam input pilihan, seperti kotak centang atau tombol. Mendukung hingga 100 item.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "text": string, "value": string, "selected": boolean, "bottomText": string, // Union field start_icon can be only one of the following: "startIconUri": string // End of list of possible types for union field start_icon. }

Kolom
text	string Teks yang mengidentifikasi atau menjelaskan item kepada pengguna.
value	string Nilai yang terkait dengan item ini. Klien harus menggunakan ini sebagai nilai input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
selected	boolean Apakah item dipilih secara default. Jika input pilihan hanya menerima satu nilai (seperti untuk tombol pilihan atau menu dropdown), hanya tetapkan kolom ini untuk satu item.
bottomText	string Untuk menu pilihan ganda, deskripsi atau label teks yang ditampilkan di bawah kolom text item.
Kolom gabungan start_icon. Untuk menu pilihan ganda, URL ikon yang ditampilkan di samping item text kolom. Mendukung file PNG dan JPEG. Harus berupa HTTPS URL. Misalnya, https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png. start_icon hanya dapat berupa salah satu dari berikut:
startIconUri	string

PlatformDataSource

Untuk SelectionInput widget yang menggunakan menu pilihan ganda, sumber data dari Google Workspace. Digunakan untuk mengisi item di menu pilihan ganda.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

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

Kolom
Kolom gabungan data_source. Sumber data. data_source hanya dapat berupa salah satu dari berikut:
commonDataSource	enum (CommonDataSource) Sumber data yang dibagikan oleh semua aplikasi Google Workspace, seperti pengguna di organisasi Google Workspace.
hostAppDataSource	object (HostAppDataSourceMarkup) Sumber data yang unik untuk aplikasi host Google Workspace, seperti ruang di Google Chat. Kolom ini mendukung Library Klien Google API, tetapi tidak tersedia di Library Klien Cloud. Untuk mempelajari lebih lanjut, lihat Menginstal library klien.

CommonDataSource

Sumber data yang dibagikan oleh semua aplikasi Google Workspace.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Enum
UNKNOWN	Nilai default. Jangan gunakan.
USER	Pengguna Google Workspace. Pengguna hanya dapat melihat dan memilih pengguna dari organisasi Google Workspace mereka.

HostAppDataSourceMarkup

Untuk SelectionInput widget yang menggunakan menu pilihan ganda, sumber data dari aplikasi Google Workspace. Sumber data mengisi item pilihan untuk menu multiselect.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

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

Kolom
Kolom gabungan data_source. Aplikasi Google Workspace yang mengisi item untuk menu multiselect. data_source hanya dapat berupa salah satu dari berikut:
chatDataSource	object (ChatClientDataSourceMarkup) Sumber data dari Google Chat.

ChatClientDataSourceMarkup

Untuk SelectionInput widget yang menggunakan menu pilihan ganda, sumber data dari Google Chat. Sumber data mengisi item pilihan untuk menu multiselect. Misalnya, pengguna dapat memilih ruang Google Chat tempat mereka menjadi anggota.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ // Union field source can be only one of the following: "spaceDataSource": { object (SpaceDataSource) } // End of list of possible types for union field source. }

Kolom
Kolom gabungan source. Sumber data Google Chat. source hanya dapat berupa salah satu dari berikut:
spaceDataSource	object (SpaceDataSource) Ruang Google Chat tempat pengguna menjadi anggota.

SpaceDataSource

Sumber data yang mengisi ruang Google Chat sebagai item pilihan untuk menu multiselect. Hanya mengisi ruang tempat pengguna menjadi anggota.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ "defaultToCurrentSpace": boolean }

Kolom
defaultToCurrentSpace	boolean Jika disetel ke true, menu pilihan ganda akan memilih ruang Google Chat saat ini sebagai item secara default.

DateTimePicker

Memungkinkan pengguna memasukkan tanggal, waktu, atau keduanya. Mendukung validasi pengiriman formulir. Jika Action.all_widgets_are_required ditetapkan ke true atau widget ini ditentukan di Action.required_widgets, tindakan pengiriman akan diblokir kecuali jika nilai dipilih. Untuk contoh di aplikasi Google Chat, lihat Mengizinkan pengguna memilih tanggal dan waktu.

Pengguna dapat memasukkan teks atau menggunakan pemilih untuk memilih tanggal dan waktu. Jika pengguna memasukkan tanggal atau waktu yang tidak valid, pemilih akan menampilkan error yang meminta pengguna untuk memasukkan informasi dengan benar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "name": string, "label": string, "type": enum (DateTimePickerType), "valueMsEpoch": int64, "timezoneOffsetDate": integer, "onChangeAction": { object (Action) } }

Kolom
name	string Nama yang digunakan untuk mengidentifikasi DateTimePicker dalam peristiwa input formulir. Untuk mengetahui detail tentang cara menggunakan input formulir, lihat Menerima data formulir.
label	string Teks yang meminta pengguna memasukkan tanggal, waktu, atau tanggal dan waktu. Misalnya, jika pengguna menjadwalkan janji temu, gunakan label seperti Appointment date atau Appointment date and time.
type	enum (DateTimePickerType) Apakah widget mendukung input tanggal, waktu, atau tanggal dan waktu.
valueMsEpoch	int64 Nilai default yang ditampilkan di widget, dalam milidetik sejak waktu epoch Unix. Tentukan nilai berdasarkan jenis pemilih ( DateTimePickerType): DATE_AND_TIME : tanggal dan waktu kalender dalam UTC. Misalnya, untuk merepresentasikan 1 Januari 2023 pukul 12.00 UTC, gunakan 1672574400000. DATE_ONLY : tanggal kalender pada 00.00.00 UTC. Misalnya, untuk menampilkan 1 Januari 2023, gunakan 1672531200000. TIME_ONLY : waktu dalam UTC. Misalnya, untuk merepresentasikan 12.00 PM, gunakan 43200000 (atau 12 * 60 * 60 * 1000).
timezoneOffsetDate	integer Angka yang merepresentasikan selisih zona waktu dari UTC, dalam menit. Jika ditetapkan, maka valueMsEpoch akan ditampilkan dalam zona waktu yang ditentukan. Jika tidak disetel, nilai defaultnya adalah setelan zona waktu pengguna.
onChangeAction	object (Action) Dipicu saat pengguna mengklik Simpan atau Hapus dari antarmuka DateTimePicker.

DateTimePickerType

Format tanggal dan waktu di widget DateTimePicker. Menentukan apakah pengguna dapat memasukkan tanggal, waktu, atau keduanya.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
DATE_AND_TIME	Pengguna memasukkan tanggal dan waktu.
DATE_ONLY	Pengguna memasukkan tanggal.
TIME_ONLY	Pengguna memasukkan waktu.

Pembatas

Jenis ini tidak memiliki kolom.

Menampilkan pemisah antar-widget sebagai garis horizontal. Untuk contoh di aplikasi Google Chat, lihat Menambahkan pemisah horizontal di antara widget.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Misalnya, JSON berikut membuat pemisah:

"divider": {}

Petak

Menampilkan petak dengan kumpulan item. Item hanya dapat menyertakan teks atau gambar. Untuk kolom responsif, atau untuk menyertakan lebih dari teks atau gambar, gunakan Columns. Untuk contoh di aplikasi Google Chat, lihat Menampilkan Petak dengan kumpulan item.

Petak mendukung sejumlah kolom dan item. Jumlah baris ditentukan oleh item dibagi dengan kolom. Petak dengan 10 item dan 2 kolom memiliki 5 baris. Petak dengan 11 item dan 2 kolom memiliki 6 baris.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Misalnya, JSON berikut membuat petak 2 kolom dengan satu item:

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

Representasi JSON
{ "title": string, "items": [ { object (GridItem) } ], "borderStyle": { object (BorderStyle) }, "columnCount": integer, "onClick": { object (OnClick) } }

Kolom
title	string Teks yang ditampilkan di header petak.
items[]	object (GridItem) Item yang akan ditampilkan dalam petak.
borderStyle	object (BorderStyle) Gaya batas yang akan diterapkan ke setiap item petak.
columnCount	integer Jumlah kolom yang akan ditampilkan dalam petak. Nilai default akan digunakan jika kolom ini tidak ditentukan, dan nilai default tersebut berbeda-beda bergantung pada tempat petak ditampilkan (dialog vs. pendamping).
onClick	object (OnClick) Callback ini digunakan kembali oleh setiap item petak individual, tetapi dengan ID dan indeks item dalam daftar item yang ditambahkan ke parameter callback.

GridItem

Mewakili item dalam tata letak petak. Item dapat berisi teks, gambar, atau teks dan gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "id": string, "image": { object (ImageComponent) }, "title": string, "subtitle": string, "layout": enum (GridItemLayout) }

Kolom
id	string ID yang ditentukan pengguna untuk item petak ini. ID ini ditampilkan di parameter callback onClick petak induk.
image	object (ImageComponent) Gambar yang ditampilkan di item petak.
title	string Judul item petak.
subtitle	string Subtitel item petak.
layout	enum (GridItemLayout) Tata letak yang akan digunakan untuk item petak.

ImageComponent

Mewakili gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "imageUri": string, "altText": string, "cropStyle": { object (ImageCropStyle) }, "borderStyle": { object (BorderStyle) } }

Kolom
imageUri	string URL gambar.
altText	string Label aksesibilitas untuk gambar.
cropStyle	object (ImageCropStyle) Gaya pangkas yang akan diterapkan pada gambar.
borderStyle	object (BorderStyle) Gaya bingkai yang akan diterapkan pada gambar.

ImageCropStyle

Mewakili gaya pangkas yang diterapkan pada gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Misalnya, berikut cara menerapkan rasio aspek 16:9:

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

Representasi JSON
{ "type": enum (ImageCropType), "aspectRatio": number }

Kolom
type	enum (ImageCropType) Jenis pemangkasan.
aspectRatio	number Rasio aspek yang akan digunakan jika jenis pangkasannya adalah RECTANGLE_CUSTOM. Misalnya, berikut cara menerapkan rasio aspek 16:9: cropStyle { "type": "RECTANGLE_CUSTOM", "aspectRatio": 16/9 }

ImageCropType

Mewakili gaya pangkas yang diterapkan pada gambar.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
IMAGE_CROP_TYPE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
SQUARE	Nilai default. Menerapkan pangkas persegi.
CIRCLE	Menerapkan pangkasan melingkar.
RECTANGLE_CUSTOM	Menerapkan pangkasan persegi panjang dengan rasio aspek kustom. Tetapkan rasio aspek kustom dengan aspectRatio.
RECTANGLE_4_3	Menerapkan pemangkasan persegi panjang dengan rasio aspek 4:3.

BorderStyle

Opsi gaya untuk batas kartu atau widget, termasuk jenis dan warna batas.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "type": enum (BorderType), "strokeColor": { object (Color) }, "cornerRadius": integer }

Kolom
type	enum (BorderType) Jenis batas.
strokeColor	object (Color) Warna yang akan digunakan saat jenisnya adalah BORDER_TYPE_STROKE. Untuk menyetel warna goresan, tentukan nilai untuk kolom red, green, dan blue. Nilainya harus berupa angka float antara 0 dan 1 berdasarkan nilai warna RGB, dengan 0 (0/255) mewakili tidak adanya warna dan 1 (255/255) mewakili intensitas warna maksimum. Misalnya, kode berikut menetapkan warna menjadi merah pada intensitas maksimumnya: "color": { "red": 1, "green": 0, "blue": 0, } Kolom alpha tidak tersedia untuk warna goresan. Jika ditentukan, kolom ini akan diabaikan.
cornerRadius	integer Radius sudut untuk batas.

BorderType

Mewakili jenis batas yang diterapkan ke widget.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
BORDER_TYPE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
NO_BORDER	Tanpa batas.
STROKE	Nilai default. Garis luar.

GridItemLayout

Mewakili berbagai opsi tata letak yang tersedia untuk item petak.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
GRID_ITEM_LAYOUT_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
TEXT_BELOW	Judul dan subjudul ditampilkan di bawah gambar item petak.
TEXT_ABOVE	Judul dan subtitel ditampilkan di atas gambar item petak.

Kolom

Widget Columns menampilkan hingga 2 kolom dalam kartu atau dialog. Anda dapat menambahkan widget ke setiap kolom; widget akan muncul dalam urutan yang ditentukan. Untuk melihat contoh di aplikasi Google Chat, lihat Menampilkan kartu dan dialog dalam kolom.

Tinggi setiap kolom ditentukan oleh kolom yang lebih tinggi. Misalnya, jika kolom pertama lebih tinggi daripada kolom kedua, kedua kolom akan memiliki tinggi kolom pertama. Karena setiap kolom dapat berisi jumlah widget yang berbeda, Anda tidak dapat menentukan baris atau menyelaraskan widget di antara kolom.

Kolom ditampilkan berdampingan. Anda dapat menyesuaikan lebar setiap kolom menggunakan kolom HorizontalSizeStyle. Jika lebar layar pengguna terlalu sempit, kolom kedua akan berada di bawah kolom pertama:

• Di web, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 480 piksel.
• Di perangkat iOS, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 300 pt.
• Di perangkat Android, kolom kedua akan di-wrap jika lebar layar kurang dari atau sama dengan 320 dp.

Untuk menyertakan lebih dari dua kolom, atau menggunakan baris, gunakan widget Grid.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace. UI add-on yang mendukung kolom meliputi:

• Dialog yang ditampilkan saat pengguna membuka add-on dari draf email.
• Dialog yang ditampilkan saat pengguna membuka add-on dari menu Tambahkan lampiran di acara Google Kalender.

Representasi JSON
{ "columnItems": [ { object (Column) } ] }

Kolom
columnItems[]	object (Column) Array kolom. Anda dapat menyertakan hingga 2 kolom dalam kartu atau dialog.

Kolom

Kolom.

Add-on Google Workspace dan aplikasi Chat

Representasi JSON
{ "horizontalSizeStyle": enum (HorizontalSizeStyle), "horizontalAlignment": enum (HorizontalAlignment), "verticalAlignment": enum (VerticalAlignment), "widgets": [ { object (Widgets) } ] }

Kolom
horizontalSizeStyle	enum (HorizontalSizeStyle) Menentukan cara kolom mengisi lebar kartu.
horizontalAlignment	enum (HorizontalAlignment) Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom.
verticalAlignment	enum (VerticalAlignment) Menentukan apakah widget diratakan ke atas, bawah, atau tengah kolom.
widgets[]	object (Widgets) Array widget yang disertakan dalam kolom. Widget muncul sesuai urutan yang ditentukan.

HorizontalSizeStyle

Menentukan cara kolom mengisi lebar kartu. Lebar setiap kolom bergantung pada HorizontalSizeStyle dan lebar widget dalam kolom.

Add-on Google Workspace dan aplikasi Chat

Enum
HORIZONTAL_SIZE_STYLE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
FILL_AVAILABLE_SPACE	Nilai default. Kolom mengisi ruang yang tersedia, hingga 70% dari lebar kartu. Jika kedua kolom ditetapkan ke FILL_AVAILABLE_SPACE, setiap kolom akan mengisi 50% ruang.
FILL_MINIMUM_SPACE	Kolom mengisi ruang sesedikit mungkin dan tidak lebih dari 30% lebar kartu.

HorizontalAlignment

Menentukan apakah widget diratakan ke kiri, kanan, atau tengah kolom.

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Enum
HORIZONTAL_ALIGNMENT_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
START	Nilai default. Menyejajarkan widget ke posisi awal kolom. Untuk tata letak kiri-ke-kanan, sejajar ke kiri. Untuk tata letak kanan-ke-kiri, sejajarkan ke kanan.
CENTER	Menyejajarkan widget ke tengah kolom.
END	Menyejajarkan widget ke posisi akhir kolom. Untuk tata letak kiri-ke-kanan, menyelaraskan widget ke kanan. Untuk tata letak kanan-ke-kiri, menyelaraskan widget ke kiri.

VerticalAlignment

Menentukan apakah widget diratakan ke atas, bawah, atau tengah kolom.

Add-on Google Workspace dan aplikasi Chat

Enum
VERTICAL_ALIGNMENT_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
CENTER	Nilai default. Menyejajarkan widget ke tengah kolom.
TOP	Menyejajarkan widget ke bagian atas kolom.
BOTTOM	Menyejajarkan widget ke bagian bawah kolom.

Widget

Widget yang didukung yang dapat Anda sertakan dalam kolom.

Add-on Google Workspace dan aplikasi Chat

Representasi 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) }, "chipList": { object (ChipList) } // End of list of possible types for union field data. }

Kolom
Kolom gabungan data. data hanya dapat berupa salah satu dari berikut:
textParagraph	object (TextParagraph) TextParagraph widget.
image	object (Image) Image widget.
decoratedText	object (DecoratedText) DecoratedText widget.
buttonList	object (ButtonList) ButtonList widget.
textInput	object (TextInput) TextInput widget.
selectionInput	object (SelectionInput) SelectionInput widget.
dateTimePicker	object (DateTimePicker) DateTimePicker widget.
chipList	object (ChipList) ChipList widget.

ChipList

Daftar chip yang disusun secara horizontal, yang dapat di-scroll secara horizontal atau di-wrap ke baris berikutnya.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "layout": enum (Layout), "chips": [ { object (Chip) } ] }

Kolom
layout	enum (Layout) Tata letak daftar chip yang ditentukan.
chips[]	object (Chip) Array chip.

Tata Letak

Tata letak daftar chip.

Enum
LAYOUT_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
WRAPPED	Nilai default. Daftar chip akan di-wrap ke baris berikutnya jika tidak ada cukup ruang horizontal.
HORIZONTAL_SCROLLABLE	Chip di-scroll secara horizontal jika tidak sesuai dengan ruang yang tersedia.

Chip

Chip teks, ikon, atau teks dan ikon yang dapat diklik pengguna.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "icon": { object (Icon) }, "label": string, "onClick": { object (OnClick) }, "enabled": boolean, "disabled": boolean, "altText": string }

Kolom
icon	object (Icon) Gambar ikon. Jika icon dan text ditetapkan, ikon akan muncul sebelum teks.
label	string Teks yang ditampilkan di dalam chip.
onClick	object (OnClick) Opsional. Tindakan yang akan dilakukan saat pengguna mengklik chip, seperti membuka hyperlink atau menjalankan fungsi kustom.
enabled (deprecated)	boolean Item ini tidak digunakan lagi. Apakah chip dalam status aktif dan merespons tindakan pengguna. Nilai defaultnya adalah true. Tidak digunakan lagi. Sebagai gantinya, gunakan disabled.
disabled	boolean Apakah chip dalam status tidak aktif dan mengabaikan tindakan pengguna. Nilai defaultnya adalah false.
altText	string Teks alternatif yang digunakan untuk aksesibilitas. Tetapkan teks deskriptif yang memberi tahu pengguna fungsi chip. Misalnya, jika chip membuka hyperlink, tulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/workspace/chat".

Carousel

Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu.

Carousel, yang juga dikenal sebagai penggeser, memutar dan menampilkan daftar widget dalam format slide, dengan tombol yang menavigasi ke widget sebelumnya atau berikutnya.

Misalnya, ini adalah representasi JSON dari carousel yang berisi tiga widget paragraf teks.

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ "carouselCards": [ { object (CarouselCard) } ] }

Kolom
carouselCards[]	object (CarouselCard) Daftar kartu yang disertakan dalam carousel.

CarouselCard

Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu.

Kartu yang dapat ditampilkan sebagai item carousel. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ "widgets": [ { object (NestedWidget) } ], "footerWidgets": [ { object (NestedWidget) } ] }

Kolom
widgets[]	object (NestedWidget) Daftar widget yang ditampilkan di kartu carousel. Widget ditampilkan sesuai urutan yang ditentukan.
footerWidgets[]	object (NestedWidget) Daftar widget yang ditampilkan di bagian bawah kartu carousel. Widget ditampilkan sesuai urutan yang ditentukan.

NestedWidget

Pratinjau Developer: Tersedia sebagai bagian dari Program Pratinjau Developer Google Workspace, yang memberikan akses awal ke fitur tertentu.

Daftar widget yang dapat ditampilkan dalam tata letak penampung, seperti CarouselCard. Tersedia untuk aplikasi Google Chat dan tidak tersedia untuk add-on Google Workspace.

Representasi JSON
{ // Union field data can be only one of the following: "textParagraph": { object (TextParagraph) }, "buttonList": { object (ButtonList) }, "image": { object (Image) } // End of list of possible types for union field data. }

Kolom
Kolom gabungan data. data hanya dapat berupa salah satu dari berikut:
textParagraph	object (TextParagraph) Widget paragraf teks.
buttonList	object (ButtonList) Widget daftar tombol.
image	object (Image) Widget gambar.

CollapseControl

Menampilkan kontrol perluas dan ciutkan.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "horizontalAlignment": enum (HorizontalAlignment), "expandButton": { object (Button) }, "collapseButton": { object (Button) } }

Kolom
horizontalAlignment	enum (HorizontalAlignment) Perataan horizontal tombol luaskan dan ciutkan.
expandButton	object (Button) Opsional. Tentukan tombol yang dapat disesuaikan untuk meluaskan bagian. Kolom expandButton dan collapseButton harus ditetapkan. Hanya satu set kolom yang tidak akan berlaku. Jika kolom ini tidak disetel, tombol default akan digunakan.
collapseButton	object (Button) Opsional. Tentukan tombol yang dapat disesuaikan untuk menciutkan bagian. Kolom expandButton dan collapseButton harus ditetapkan. Hanya satu set kolom yang tidak akan berlaku. Jika kolom ini tidak disetel, tombol default akan digunakan.

DividerStyle

Gaya pemisah kartu. Saat ini hanya digunakan untuk pemisah di antara bagian kartu.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Enum
DIVIDER_STYLE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
SOLID_DIVIDER	Opsi default. Merender pemisah solid.
NO_DIVIDER	Jika ditetapkan, tidak ada pemisah yang dirender. Gaya ini akan menghapus pemisah sepenuhnya dari tata letak. Hasilnya sama dengan tidak menambahkan pembagi sama sekali.

CardAction

Tindakan kartu adalah tindakan yang terkait dengan kartu. Misalnya, kartu invoice dapat menyertakan tindakan seperti hapus invoice, kirim invoice melalui email, atau buka invoice di browser.

Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

Representasi JSON
{ "actionLabel": string, "onClick": { object (OnClick) } }

Kolom
actionLabel	string Label yang ditampilkan sebagai item menu tindakan.
onClick	object (OnClick) Tindakan onClick untuk item tindakan ini.

CardFixedFooter

Footer persisten (tetap) yang muncul di bagian bawah kartu.

Menetapkan fixedFooter tanpa menentukan primaryButton atau secondaryButton akan menyebabkan error.

Untuk aplikasi Chat, Anda dapat menggunakan footer tetap dalam dialog, tetapi tidak dalam pesan kartu. Untuk contoh di aplikasi Google Chat, lihat Menambahkan footer persisten.

Tersedia untuk aplikasi Google Chat dan add-on Google Workspace.

Representasi JSON
{ "primaryButton": { object (Button) }, "secondaryButton": { object (Button) } }

Kolom
primaryButton	object (Button) Tombol utama footer tetap. Tombol harus berupa tombol teks dengan teks dan warna yang ditetapkan.
secondaryButton	object (Button) Tombol sekunder footer tetap. Tombol harus berupa tombol teks dengan teks dan warna yang ditetapkan. Jika secondaryButton ditetapkan, Anda juga harus menetapkan primaryButton.

DisplayStyle

Di add-on Google Workspace, menentukan cara kartu ditampilkan.

Tersedia untuk add-on Google Workspace dan tidak tersedia untuk aplikasi Google Chat.

Enum
DISPLAY_STYLE_UNSPECIFIED	Jangan gunakan. Tidak ditentukan.
PEEK	Header kartu muncul di bagian bawah sidebar, yang sebagian menutupi kartu teratas saat ini di stack. Mengklik header akan memunculkan kartu ke dalam tumpukan kartu. Jika kartu tidak memiliki header, header yang dibuat akan digunakan.
REPLACE	Nilai default. Kartu ditampilkan dengan mengganti tampilan kartu teratas dalam tumpukan kartu.