Cards v2

Kartu

Antarmuka kartu yang ditampilkan dalam pesan Google Chat atau Add-on Google Workspace.

Kartu mendukung tata letak yang ditentukan, elemen UI interaktif seperti tombol, dan multimedia seperti gambar. Gunakan kartu untuk menyajikan informasi terperinci, mengumpulkan informasi dari pengguna, dan memandu pengguna untuk mengambil langkah selanjutnya.

Desain dan pratinjau kartu dengan Card Builder.

Membuka Pembuat Kartu

Untuk mempelajari cara membuat kartu, lihat dokumentasi berikut:

Contoh: Pesan kartu untuk aplikasi Google Chat

Contoh kartu kontak

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/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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
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. {i>Header<i} biasanya berisi gambar utama dan judul. Header selalu muncul di bagian atas kartu.

sections[]

object (Section)

Berisi kumpulan widget. Setiap bagian memiliki header opsional sendiri. Bagian secara visual dipisahkan oleh garis pembagi. Untuk contoh di aplikasi Google Chat, lihat bagian Kartu.

sectionDividerStyle

enum (DividerStyle)

Gaya pemisah antar-bagian.

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 di navigasi kartu.

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

displayStyle

enum (DisplayStyle)

Di Add-on Google Workspace, tetapkan 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 bertindak sebagai placeholder sehingga pengguna dapat beralih antara kartu halaman beranda dan kartu kontekstual.

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

CardHeader

Menampilkan header kartu. Untuk contoh di aplikasi Google Chat, lihat Header kartu.

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 memerlukan satu baris. Jika hanya judul yang ditentukan, nama ini akan mengisi kedua baris.

subtitle

string

Subjudul header kartu. Jika ditentukan, akan muncul pada 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 akan menjadi 3x3.
CIRCLE Menerapkan mask lingkaran ke gambar. Misalnya, gambar 4x3 menjadi lingkaran dengan diameter 3.

Bagian

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

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

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

string

Teks yang muncul di bagian atas suatu bagian. Mendukung teks berformat HTML sederhana. Untuk mengetahui informasi selengkapnya tentang cara memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace.

widgets[]

object (Widget)

Semua widget di bagian tersebut. Harus berisi setidaknya satu widget.

collapsible

boolean

Menunjukkan apakah bagian ini dapat diciutkan.

Bagian yang dapat diciutkan menyembunyikan beberapa atau semua widget, tetapi pengguna dapat memperluas bagian untuk menampilkan widget yang tersembunyi dengan mengklik Tampilkan lainnya. Pengguna dapat menyembunyikan widget lagi dengan mengklik Tampilkan lebih sedikit.

Untuk menentukan widget yang disembunyikan, tentukan uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

Jumlah widget yang tidak dapat diciutkan yang tetap terlihat bahkan saat suatu bagian diciutkan.

Misalnya, jika bagian berisi lima widget dan uncollapsibleWidgetsCount disetel ke 2, dua widget pertama selalu ditampilkan dan tiga widget terakhir akan diciutkan secara default. uncollapsibleWidgetsCount hanya diperhitungkan jika collapsible adalah true.

Widget

Setiap kartu terdiri dari widget.

Widget adalah objek gabungan yang dapat mewakili 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)
  }
  // End of list of possible types for union field data.
}
Kolom
horizontalAlignment

enum (HorizontalAlignment)

Menentukan apakah widget sejajar dengan 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 cara memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace.

Misalnya, JSON berikut membuat teks yang dicetak 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/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

Menampilkan item teks yang dihias.

Misalnya, JSON berikut membuat widget teks berdekorasi yang menampilkan alamat email:

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

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,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Menampilkan kotak teks tempat pengguna dapat mengetik.

Misalnya, JSON berikut membuat input teks untuk alamat email:

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

Sebagai contoh lainnya, 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 pemilihan 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 garis horizontal di antara widget.

Misalnya, JSON berikut membuat pemisah:

"divider": {
}
grid

object (Grid)

Menampilkan petak dengan koleksi item.

Petak mendukung berapa pun kolom dan item. Jumlah baris ditentukan oleh batas atas item jumlah 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"
          }
        }
      ]
    }
  ]
}

TextParagraph

Paragraf teks yang mendukung pemformatan. Untuk contoh di aplikasi Google Chat, lihat Paragraf teks. Untuk mengetahui informasi selengkapnya tentang cara 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
}
Kolom
text

string

Teks yang ditampilkan di widget.

Gambar

Gambar yang ditentukan oleh URL dan dapat memiliki tindakan onClick. Untuk contoh, lihat 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/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

Mewakili cara merespons ketika pengguna mengeklik 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)
  }
  // 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 akan dipicu oleh onClick ini.

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.

Tindakan

Tindakan yang menjelaskan perilaku saat formulir dikirimkan. Misalnya, Anda dapat memanggil skrip Apps Script untuk menangani formulir. Jika tindakan tersebut 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)
}
Kolom
function

string

Fungsi kustom yang akan dipanggil saat elemen penampung diklik atau diaktifkan sebaliknya.

Untuk contoh penggunaan, lihat Membuat kartu interaktif.

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 akan 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 tersebut.

Jika false, nilai formulir akan dihapus saat tindakan dipicu. Untuk mencegah pengguna membuat perubahan saat tindakan sedang diproses, tetapkan LoadIndicator ke SPINNER.

interaction

enum (Interaction)

Opsional. Diperlukan saat membuka dialog.

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

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

Dengan menentukan interaction, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menetapkan 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.

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(), yang meneruskan jenis penundaan 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. Diperlukan saat membuka dialog.

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

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

Dengan menentukan interaction, aplikasi dapat merespons dengan cara interaktif khusus. Misalnya, dengan menetapkan 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 dijalankan seperti biasa.
OPEN_DIALOG

Membuka dialog, yakni antarmuka berbasis kartu dan berjendela yang 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.

OpenAs

Saat tindakan OnClick membuka link, klien dapat membukanya sebagai jendela ukuran penuh (jika itu adalah frame yang digunakan oleh klien), atau overlay (seperti pop-up). Implementasi 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 tersebut akan terbuka sebagai jendela ukuran penuh (jika frame tersebut adalah yang digunakan oleh klien).
OVERLAY Link akan terbuka sebagai overlay, seperti pop-up.

OnClose

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

Penerapannya bergantung pada kemampuan platform klien. Misalnya, browser web mungkin membuka link di jendela pop-up dengan pengendali OnClose.

Jika pengendali OnOpen dan OnClose ditetapkan, dan platform klien tidak dapat mendukung kedua nilai tersebut, 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 ada yang terjadi.
RELOAD

Memuat ulang kartu setelah jendela turunan ditutup.

Jika digunakan bersama dengan OpenAs.OVERLAY, jendela turunan bertindak sebagai dialog modal dan kartu induk akan diblokir hingga jendela turunan ditutup.

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 contoh di aplikasi Google Chat, lihat Teks berdekorasi.

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

Representasi 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.
}
Kolom
icon
(deprecated)

object (Icon)

Tidak digunakan lagi dan digantikan dengan startIcon.

startIcon

object (Icon)

Ikon yang ditampilkan di depan teks.

topLabel

string

Teks yang muncul di atas text. Selalu potong.

text

string

Wajib. Teks utama.

Mendukung pemformatan sederhana. Untuk mengetahui informasi selengkapnya tentang cara memformat teks, lihat Memformat teks di aplikasi Google Chat dan Memformat teks di Add-on Google Workspace.

wrapText

boolean

Setelan kemas teks. Jika true, teks akan digabungkan 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 gabungkan.

onClick

object (OnClick)

Tindakan ini dipicu saat pengguna mengklik topLabel atau bottomLabel.

Kolom gabungan control. Tombol, tombol akses, kotak centang, atau gambar yang muncul di sisi kanan teks di 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 akses yang dapat diklik pengguna untuk mengubah statusnya dan memicu tindakan.

endIcon

object (Icon)

Ikon yang ditampilkan setelah teks.

Mendukung ikon bawaan dan kustom.

Ikon

Ikon yang ditampilkan di widget pada kartu. Untuk mengetahui contoh di aplikasi Google Chat, lihat 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
  // 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 akan diberikan. Sebagai praktik terbaik, Anda harus menetapkan deskripsi yang berguna untuk menjelaskan apa yang ditampilkan ikon, dan jika memungkinkan, apa fungsinya. 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/chat.

Jika ikon disetel di Button, 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, menerapkan pemangkasan CIRCLE akan 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, tetapkan AIRPLANE. Untuk bus, tentukan BUS.

Untuk daftar lengkap ikon yang didukung, lihat ikon bawaan.

iconUrl

string

Menampilkan ikon kustom yang dihosting di URL HTTPS.

Contoh:

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

Jenis file yang didukung mencakup .png dan .jpg.

Tombol

Teks, ikon, atau teks dan tombol ikon yang dapat diklik pengguna. Untuk contoh di aplikasi Google Chat, lihat Daftar 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
}
Kolom
text

string

Teks yang ditampilkan di dalam tombol.

icon

object (Icon)

Gambar ikon. Jika icon dan text ditetapkan, ikon akan muncul sebelum teks.

color

object (Color)

Jika disetel, tombol akan diisi dengan warna latar belakang solid dan warna font akan berubah untuk mempertahankan kontras dengan warna latar belakang. Misalnya, menetapkan latar belakang biru mungkin menghasilkan teks putih.

Jika tidak disetel, latar belakang gambar akan berwarna putih dan warna font akan berwarna biru.

Untuk warna merah, hijau, dan biru, nilai setiap kolom adalah angka float yang dapat dinyatakan dengan salah satu dari dua cara berikut: sebagai angka antara 0 hingga 255 dibagi 255 (153/255), atau sebagai nilai antara 0 hingga 1 (0,6). 0 mewakili tidak adanya warna dan 1 atau 255/255 mewakili kehadiran penuh warna itu pada skala RGB.

Jika perlu, tetapkan alpha, yang menetapkan tingkat transparansi menggunakan persamaan ini:

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

Untuk alpha, nilai 1 sesuai dengan warna solid, dan nilai 0 sesuai dengan warna yang sepenuhnya transparan.

Misalnya, warna berikut mewakili merah setengah transparan:

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

object (OnClick)

Wajib. Tindakan yang dilakukan saat pengguna mengklik tombol, seperti membuka hyperlink atau menjalankan fungsi kustom.

disabled

boolean

Jika true, tombol ditampilkan dalam keadaan tidak aktif dan tidak merespons tindakan pengguna.

altText

string

Teks alternatif yang digunakan untuk aksesibilitas.

Menetapkan teks deskriptif yang memungkinkan pengguna mengetahui fungsi tombol tersebut. Misalnya, jika tombol membuka hyperlink, Anda mungkin menulis: "Membuka tab browser baru dan membuka dokumentasi developer Google Chat di https://developers.google.com/chat".

Warna

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

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

Jika kesetaraan warna perlu ditentukan, penerapan, kecuali jika didokumentasikan lain, perlakukan dua warna sebagai sama jika semua nilai merah, hijau, biru, dan alfa masing-masing berbeda maksimal 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 diberi nilai 1,0).

SwitchControl

Tombol gaya tombol beralih 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 switch dalam 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

Saat true, tombol akan dipilih.

onChangeAction

object (Action)

Tindakan yang harus dilakukan saat status tombol berubah, seperti fungsi yang akan dijalankan.

controlType

enum (ControlType)

Cara tombol muncul di antarmuka pengguna.

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

ControlType

Cara tombol muncul di antarmuka pengguna.

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

Enum
SWITCH Tombol akses.
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 Daftar 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 sesuai perubahan. Untuk contoh di aplikasi Google Chat, lihat Input 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.

Saat Anda perlu mengumpulkan data yang tidak ditentukan atau abstrak dari pengguna, gunakan input teks. Untuk mengumpulkan data yang ditentukan atau dienumerasi dari pengguna, gunakan widget SelectionInput.

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)
  },
  "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 meminta nama seseorang, tetapi secara khusus memerlukan nama belakangnya, tuliskan 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)

Cara kolom input teks muncul di antarmuka pengguna. Misalnya, apakah kolomnya satu atau beberapa baris.

onChangeAction

object (Action)

Apa yang harus dilakukan saat terjadi perubahan di kolom input teks. Misalnya, pengguna yang menambahkan ke kolom atau menghapus teks.

Contoh tindakan yang dapat dilakukan antara lain 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 sesuai dengan yang telah diketik pengguna.

Misalnya, kolom input teks untuk bahasa pemrograman mungkin menyarankan Java, JavaScript, Python, dan C++. Saat pengguna mulai mengetik Jav, daftar filter saran yang hanya menampilkan Java dan JavaScript.

Nilai yang disarankan membantu memandu pengguna untuk memasukkan nilai yang dapat dipahami oleh aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan javascript dan lainnya java script. Menyarankan JavaScript dapat menstandarkan 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 akan diambil saat kolom input teks memberikan saran kepada pengguna yang berinteraksi dengannya.

Jika tidak ditentukan, saran akan ditetapkan oleh initialSuggestions dan diproses oleh klien.

Jika ditentukan, aplikasi akan mengambil tindakan yang ditentukan di sini, seperti menjalankan fungsi kustom.

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

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

Cara kolom input teks muncul di antarmuka pengguna. Misalnya, apakah itu kolom input satu baris atau input multi-baris. Jika initialSuggestions ditentukan, type akan 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

Kumpulan petunjuk render 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

Kirim atau perbarui kartu yang ditampilkan.

Tambahkan kartu baru ke tumpukan (navigasi maju).

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

navigations: {
  pushCard: CARD
}

Ganti kartu teratas dengan kartu baru.

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

navigations: {
  updateCard: CARD
}

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 sesuai dengan yang telah diketik pengguna.

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

Nilai yang disarankan membantu memandu pengguna untuk memasukkan nilai yang dapat dipahami oleh aplikasi Anda. Saat merujuk ke JavaScript, beberapa pengguna mungkin memasukkan javascript dan lainnya java script. Menyarankan JavaScript dapat menstandarkan 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 agar 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 sendiri oleh pengguna.

SelectionInput

Widget yang membuat satu atau beberapa item UI yang dapat dipilih pengguna. Misalnya, menu dropdown atau kotak centang. Anda dapat menggunakan widget ini untuk mengumpulkan data yang dapat diprediksi atau dienumerasi. Untuk mengetahui contoh di aplikasi Google Chat, lihat Input pilihan.

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

Nama yang mengidentifikasi input pemilihan 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 urgensi tiket kerja dari menu drop-down, labelnya mungkin "Urgensi" atau "Pilih urgensi".

type

enum (SelectionType)

Jenis item yang ditampilkan kepada pengguna di widget SelectionInput. 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 multi-pilihan, jumlah item maksimum yang dapat dipilih pengguna. Nilai minimum adalah 1 item. Jika tidak ditentukan, ditetapkan secara default ke 3 item.

multiSelectMinQueryLength

integer

Untuk menu multi-pilihan, jumlah karakter teks yang dimasukkan pengguna sebelum kueri aplikasi Chat akan dilengkapi otomatis dan menampilkan item yang disarankan dalam menu.

Jika tidak ditentukan, nilai defaultnya adalah 0 karakter untuk sumber data statis dan 3 karakter untuk sumber data eksternal.

Kolom gabungan multi_select_data_source. Untuk menu multi-pilihan, sumber data yang mengisi item pilihan.

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 basis data relasional.

platformDataSource

object (PlatformDataSource)

Sumber data dari Google Workspace.

SelectionType

Format untuk item yang dapat dipilih pengguna. Opsi yang berbeda mendukung jenis interaksi yang berbeda. 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 Sekumpulan tombol pilihan. Pengguna dapat memilih satu tombol pilihan.
SWITCH Seperangkat tombol akses. Pengguna dapat mengaktifkan satu atau beberapa tombol.
DROPDOWN Menu dropdown. Pengguna dapat memilih satu item dari menu.
MULTI_SELECT

Menu multi-pilihan untuk data statis atau dinamis. Dari panel menu, pengguna memilih satu atau beberapa item. Pengguna juga dapat memasukkan nilai untuk mengisi data dinamis. Misalnya, pengguna dapat mulai mengetik nama ruang Google Chat dan widget akan otomatis menyarankan ruang tersebut.

Untuk mengisi item untuk menu multi-pilihan, Anda dapat menggunakan salah satu jenis sumber data berikut:

  • Data statis: Item ditetapkan sebagai objek SelectionItem di widget. Hingga 100 item.
  • 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 multi-pilihan, lihat halaman widget SelectionInput .

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

SelectionItem

Item yang dapat dipilih pengguna dalam input pilihan, seperti kotak centang atau tombol akses.

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

Representasi JSON
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
Kolom
text

string

Teks yang mengidentifikasi atau menjelaskan item kepada pengguna.

value

string

Nilai yang terkait dengan item ini. Klien harus menggunakannya 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), tetapkan kolom ini untuk satu item saja.

startIconUri

string

Untuk menu multi-pilihan, URL untuk ikon yang ditampilkan di samping kolom text item. Mendukung file PNG dan JPEG. Harus berupa URL HTTPS. Misalnya, https://developers.google.com/chat/images/quickstart-app-avatar.png.

bottomText

string

Untuk menu multi-pilihan, deskripsi teks atau label yang ditampilkan di bawah kolom text item.

PlatformDataSource

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

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.

CommonDataSource

Sumber data yang digunakan bersama 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-nya.

HostAppDataSourceMarkup

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

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 multi-pilihan. data_source hanya dapat berupa salah satu dari berikut:
chatDataSource

object (ChatClientDataSourceMarkup)

Sumber data dari Google Chat.

ChatClientDataSourceMarkup

Untuk widget SelectionInput yang menggunakan menu multi-pilihan, sumber data dari Google Chat. Sumber data mengisi item pilihan untuk menu multi-pilihan. 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 terdaftar sebagai anggota.

SpaceDataSource

Sumber data yang mengisi ruang Google Chat sebagai item pilihan untuk menu multi-pilihan. 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 ditetapkan ke true, menu multi-pilihan akan memilih ruang Google Chat saat ini sebagai item secara default.

DateTimePicker

Memungkinkan pengguna memasukkan tanggal, waktu, atau tanggal dan waktu. Untuk mengetahui contoh di aplikasi Google Chat, lihat Pemilih tanggal dan waktu.

Pengguna dapat memasukkan teks atau menggunakan alat pilih untuk memilih tanggal dan waktu. Jika pengguna memasukkan tanggal atau waktu yang tidak valid, alat pilih 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": string,
  "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 untuk 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 masukan tanggal, waktu, atau tanggal dan waktu.

valueMsEpoch

string (int64 format)

Nilai default yang ditampilkan di widget, dalam milidetik sejak waktu epoch Unix.

Tentukan nilai berdasarkan jenis alat pilih ( DateTimePickerType):

  • DATE_AND_TIME : tanggal dan waktu kalender dalam UTC. Misalnya, untuk mewakili 1 Januari 2023 pukul 12.00 UTC, gunakan 1672574400000.
  • DATE_ONLY : tanggal kalender pukul 00.00.00 UTC. Misalnya, untuk merepresentasikan 1 Januari 2023, gunakan 1672531200000.
  • TIME_ONLY : waktu dalam UTC. Misalnya, untuk menunjukkan pukul 12.00, gunakan 43200000 (atau 12 * 60 * 60 * 1000).
timezoneOffsetDate

integer

Angka yang mewakili selisih zona waktu dari UTC, dalam menit. Jika ditetapkan, valueMsEpoch akan ditampilkan dalam zona waktu yang ditentukan. Jika tidak disetel, nilai akan ditetapkan secara default ke setelan zona waktu pengguna.

onChangeAction

object (Action)

Dipicu saat pengguna mengklik Save atau Clear dari antarmuka DateTimePicker.

DateTimePickerType

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

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.

Pembagi

Jenis ini tidak memiliki kolom.

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

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

Misalnya, JSON berikut membuat pemisah:

"divider": {}

Kisi

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

Petak mendukung berapa pun 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 di petak. Nilai default digunakan jika kolom ini tidak ditentukan, dan nilai default tersebut akan berbeda bergantung pada tempat petak ditampilkan (dialog versus 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

Menampilkan 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 pemangkasan yang akan diterapkan pada gambar.

borderStyle

object (BorderStyle)

Gaya batas yang akan diterapkan pada gambar.

ImageCropStyle

Menampilkan gaya pemangkasan yang diterapkan pada gambar.

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

Misalnya, berikut ini 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 harus digunakan jika jenis pemangkasan adalah RECTANGLE_CUSTOM.

Misalnya, berikut ini cara menerapkan rasio aspek 16:9:

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

ImageCropType

Menampilkan gaya pemangkasan 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 pemangkasan persegi.
CIRCLE Menerapkan pemangkasan melingkar.
RECTANGLE_CUSTOM Menerapkan pemangkasan 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.

cornerRadius

integer

Radius sudut untuk batas.

BorderType

Menampilkan jenis batas yang diterapkan pada widget.

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

Enum
BORDER_TYPE_UNSPECIFIED Jangan gunakan. Tidak ditentukan.
NO_BORDER Nilai default. Tanpa batas.
STROKE {i>Outline<i}.

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 subjudul ditampilkan di atas gambar item petak.

Kolom

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

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

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

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

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

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

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

object (Column)

Array kolom. Anda dapat menyertakan hingga 2 kolom dalam kartu atau dialog.

Kolom

Kolom.

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

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

enum (HorizontalSizeStyle)

Menentukan cara kolom mengisi lebar kartu.

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

horizontalAlignment

enum (HorizontalAlignment)

Menentukan apakah widget sejajar dengan kiri, kanan, atau tengah kolom.

verticalAlignment

enum (VerticalAlignment)

Menentukan apakah widget sejajar dengan bagian atas, bawah, atau tengah kolom.

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

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.

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

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 sejajar dengan 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. Meratakan widget ke posisi awal kolom. Untuk tata letak kiri-ke-kanan, sejajarkan ke kiri. Untuk tata letak kanan-ke-kiri, sejajarkan ke kanan.
CENTER Meratakan widget ke tengah kolom.
END Meratakan widget ke posisi akhir kolom. Untuk tata letak kiri-ke-kanan, menyejajarkan widget ke kanan. Untuk tata letak kanan-ke-kiri, meratakan widget ke kiri.

VerticalAlignment

Menentukan apakah widget sejajar dengan bagian atas, bawah, atau tengah kolom.

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

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

Widget

Widget yang didukung yang dapat Anda sertakan dalam kolom.

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)
  },
  "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.
}
Kolom

Kolom gabungan data.

data hanya dapat berupa salah satu dari berikut:

textParagraph

object (TextParagraph)

Widget TextParagraph.

image

object (Image)

Widget Image.

decoratedText

object (DecoratedText)

Widget DecoratedText.

buttonList

object (ButtonList)

Widget ButtonList.

textInput

object (TextInput)

Widget TextInput.

selectionInput

object (SelectionInput)

Widget SelectionInput.

dateTimePicker

object (DateTimePicker)

Widget DateTimePicker.

DividerStyle

Gaya pemisah kartu. Saat ini hanya digunakan untuk pembagi 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 pembagi solid di antara bagian.
NO_DIVIDER Jika ditetapkan, tidak ada pembagi yang akan dirender di antara bagian.

CardAction

Tindakan kartu adalah tindakan yang terkait dengan kartu. Misalnya, kartu invoice mungkin mencakup tindakan seperti menghapus invoice, mengirim invoice melalui email, atau membuka 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 (melekat) persisten 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 Footer kartu.

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 tersebut harus berupa tombol teks dengan teks dan warna yang telah disetel.

secondaryButton

object (Button)

Tombol sekunder footer tetap. Tombol tersebut harus berupa tombol teks dengan teks dan warna yang telah disetel. 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 Tajuk kartu muncul di bagian bawah bilah sisi, menutupi sebagian kartu teratas saat ini. Mengklik header akan memunculkan kartu ke dalam tumpukan kartu. Jika kartu tidak memiliki header, header yang dihasilkan akan digunakan sebagai gantinya.
REPLACE Nilai default. Kartu ditampilkan dengan mengganti tampilan kartu teratas di tumpukan kartu.