Antarmuka berbasis kartu

Contoh kartu add-on

Add-on Google Workspace menyajikan informasi dan pengguna di bilah sisi aplikasi host UI. Add-on terdiri dari toolbar pengidentifikasi utama beserta satu atau beberapa kartu.

Setiap kartu mewakili 'halaman' tertentu UI add-on Anda, dan membuka kartu baru biasanya hanya merupakan pembuatan kartu tersebut dan mendorongnya ke stack kartu internal. Anda dapat menentukan alur navigasi antarkartu untuk pengalaman interaksi yang beragam.

Kartu dapat bersifat non-kontekstual atau kontekstual. Kartu kontekstual disajikan kepada pengguna ketika aplikasi {i>host<i} berada dalam konteks tertentu. Misalnya, saat membuka pesan Gmail atau acara Kalender. Kartu non-kontekstual (seperti halaman beranda) ditampilkan kepada pengguna di luar konteks {i>host<i} tertentu. Misalnya, ketika pengguna melihat kotak masuk Gmail, folder Drive utama, atau Kalender mereka.

Add-on Google Workspace bawaan 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 dari header dan satu atau beberapa bagian kartu. Setiap bagian memiliki yang terdiri dari kumpulan 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 diberi gaya secara otomatis agar berfungsi dengan baik dengan aplikasi Google Workspace yang diperluas.

  • Antarmuka berbasis kartu berfungsi di desktop dan perangkat seluler, tetapi Anda hanya perlu menentukan antarmuka sekali.

Membuat antarmuka berbasis kartu

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

Rujuk halaman ini saat membuat kartu dan menerapkan Perilaku UI. Contoh tambahan berikut mungkin juga bermanfaat untuk Anda saat menerapkan add-on:

  • Add-on Google Workspace "Kucing" panduan memulai

    Contoh add-on ini menunjukkan UI Add-on Google Workspace yang sederhana dengan beberapa halaman dan halaman beranda.

  • Add-on Google Workspace: "Terjemahkan"

    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 opsi yang lebih kompleks Contoh Add-on Google Workspace, yang menunjukkan informasi pengguna tentang penerima pesan Gmail, editor file Drive, atau Peserta acara kalender. Anda hanya dapat menggunakan add-on ini di dalam domain, karena menggunakan Directory API untuk mengambil informasi pengguna.