Add-on Google Workspace menyajikan informasi dan kontrol pengguna di sidebar UI aplikasi host. Add-on terdiri dari toolbar pengidentifikasi utama beserta satu atau beberapa kartu.
Setiap kartu mewakili 'halaman' tertentu dari UI add-on Anda, dan menavigasi ke kartu baru biasanya hanyalah masalah dalam membuat kartu tersebut dan mendorongnya ke tumpukan kartu internal. Anda dapat menentukan alur navigasi antar-kartu untuk pengalaman interaksi yang kaya.
Kartu dapat bersifat non-kontekstual atau kontekstual. Kartu kontekstual ditampilkan kepada pengguna saat aplikasi host berada dalam konteks tertentu. Misalnya, saat membuka pesan Gmail atau acara Kalender. Kartu non-kontekstual (seperti halaman beranda) ditampilkan kepada pengguna di luar konteks host tertentu. Misalnya, saat pengguna melihat kotak masuk Gmail, folder Drive utama, atau kalender mereka.
Add-on Google Workspace yang dibuat di Apps Script menggunakan layanan Kartu untuk membuat antarmuka pengguna dari kartu. Add-on yang dibuat dalam bahasa lain harus menampilkan JSON yang diformat dengan benar agar antarmuka dapat dirender sebagai kartu.
Setiap kartu terdiri atas header dan satu atau beberapa bagian kartu. Setiap bagian terdiri dari kumpulan widget. Widget menampilkan informasi kepada pengguna atau memberikan kontrol interaksi seperti tombol.
Antarmuka berbasis kartu memiliki manfaat berikut:
- Tidak diperlukan pengetahuan tentang HTML atau CSS untuk membuat antarmuka berbasis kartu.
- Kartu dan widget secara otomatis disesuaikan agar berfungsi baik dengan aplikasi Google Workspace yang diperluas.
Antarmuka berbasis kartu berfungsi pada desktop dan perangkat seluler, tetapi Anda hanya perlu menentukan antarmuka sekali.
Membuat antarmuka berbasis kartu
Saat membuat add-on berbasis kartu, Anda harus memahami konsep dan pola desain tertentu. Panduan berikut memberikan informasi yang Anda butuhkan untuk membuat add-on berbasis kartu yang efektif:
- Kartu
- Halaman Beranda
- Widget
- Tindakan
- Objek peristiwa
- Membuat kartu
- Membuat kartu interaktif
- Berpindah antar-kartu
- Menggunakan tindakan universal
- Menambahkan pelengkapan otomatis ke input teks
- Mengakses lokalitas dan zona waktu pengguna
- Menghubungkan ke layanan non-Google
- Panduan gaya
- Praktik Terbaik
Rujuk halaman ini saat membuat kartu dan menerapkan perilaku UI. Anda juga dapat melihat contoh tambahan berikut yang berguna untuk direferensikan saat mengimplementasikan add-on:
Panduan memulai "Kucing" Add-on Google Workspace
Contoh add-on ini menunjukkan UI Add-on Google Workspace sederhana dengan beberapa halaman dan halaman beranda.
Add-on Google Workspace: "Terjemahan"
Contoh add-on ini menunjukkan Add-on Google Workspace yang memungkinkan pengguna menerjemahkan teks dari dalam Dokumen, Spreadsheet, dan Slide.
Add-on Google Workspace: "Daftar Tim"
Contoh add-on ini menunjukkan contoh add-on Google Workspace yang lebih kompleks, yang menunjukkan informasi pengguna tentang penerima pesan Gmail, editor file Drive, atau tamu acara Kalender. Anda hanya dapat menggunakan add-on ini dalam domain karena add-on ini menggunakan Admin SDK Directory API untuk mengambil informasi pengguna.