Antarmuka berbasis kartu

Add-on Google Workspace berbasis kartu. Add-on editor berbasis HTML.

Contoh antarmuka kartu add-on Google Workspace.

Add-on menampilkan informasi dan kontrol pengguna di sidebar UI aplikasi host. Add-on Google Workspace terdiri dari toolbar identifikasi utama beserta satu atau beberapa kartu.

Setiap kartu mewakili 'halaman' tertentu di UI add-on Anda. Membuka kartu baru biasanya hanya memerlukan pembuatan kartu tersebut dan mendorongnya ke tumpukan kartu internal. Anda dapat menentukan alur navigasi antar-kartu untuk pengalaman interaksi yang kaya.

Kartu dapat berupa non-kontekstual atau kontekstual. Kartu kontekstual ditampilkan kepada pengguna saat aplikasi host berada dalam konteks tertentu, seperti saat membuka pesan Gmail atau acara Google Kalender. Kartu non-kontekstual (seperti halaman beranda) ditampilkan kepada pengguna di luar konteks spesifik host—misalnya, saat pengguna melihat kotak masuk Gmail, folder utama Google Drive, atau Kalender.

Add-on Google Workspace yang dibuat di Google 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 dirender sebagai kartu.

Setiap kartu terdiri dari header dan satu atau beberapa bagian kartu. Setiap bagian terdiri dari serangkaian widget. Widget menampilkan informasi kepada pengguna atau menyediakan 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 otomatis diberi gaya agar berfungsi dengan baik dengan aplikasi Google Workspace yang diperluasnya.
  • Antarmuka berbasis kartu berfungsi di perangkat desktop dan seluler, tetapi Anda hanya perlu menentukan antarmuka satu kali.

Gmail adalah satu-satunya aplikasi host yang dapat diperluas oleh add-on Google Workspace di perangkat seluler.

Membuat antarmuka berbasis kartu

Saat membuat add-on berbasis kartu, penting untuk memahami konsep dan pola desain tertentu. Panduan berikut memberikan informasi yang Anda perlukan untuk membuat add-on berbasis kartu yang efektif:

Lihat halaman ini saat membuat kartu dan menerapkan perilaku UI. Anda mungkin juga menemukan contoh tambahan berikut berguna sebagai referensi saat menerapkan add-on:

  • Panduan memulai add-on Google Workspace "Cats"

    Contoh add-on ini menampilkan UI add-on dengan beberapa halaman dan halaman beranda.

  • Add-on Google Workspace: "Translate"

    Contoh add-on ini menunjukkan add-on 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 menampilkan informasi pengguna tentang penerima pesan Gmail, editor file Drive, atau tamu acara Kalender. Anda hanya dapat menggunakan add-on ini di dalam domain, karena add-on ini menggunakan Directory API untuk mengambil informasi pengguna.