Kart tabanlı arayüzler

Örnek eklenti kartı

Google Workspace eklentileri, ana uygulama kullanıcı arayüzünün kenar çubuğunda bilgi ve kullanıcı denetimleri sunar. Eklentiler, bir veya daha fazla kart ile birlikte tanımlama amaçlı bir ana araç çubuğundan oluşur.

Her kart, eklentinizin kullanıcı arayüzünün belirli bir "sayfasını" temsil eder. Yeni bir karta gitmek genellikle ilgili kartı oluşturup dahili bir kart grubuna eklemek kadar basittir. Zengin bir etkileşim deneyimi için kartlar arasındaki gezinme akışlarını tanımlayabilirsiniz.

Kartlar bağlam dışı veya bağlamlı olabilir. Bağlama dayalı kartlar, ana uygulama belirli bir bağlamdayken kullanıcıya sunulur. Örneğin, bir Gmail iletisini veya Takvim etkinliğini açarken. Bağlama bağlı olmayan kartlar (ör. ana sayfalar), kullanıcıya barındırıcının belirli bir bağlamı dışında sunulur. Örneğin, kullanıcı Gmail gelen kutusunu, ana Drive klasörünü veya Takvim'i görüntülerken.

Apps Komut Dosyası'nda oluşturulan Google Workspace eklentileri, kartlardan kullanıcı arayüzleri oluşturmak için Kart hizmetini kullanır. Arayüzün kart olarak oluşturulması için diğer dillerde oluşturulan eklentilerin düzgün biçimlendirilmiş JSON döndürmesi gerekir.

Her kart bir başlık ve bir veya daha fazla kart bölümünden oluşur. Her bölüm bir dizi widget'tan oluşur. Widget'lar kullanıcıya bilgi gösterir veya düğmeler gibi etkileşim kontrolleri sağlar.

Kart tabanlı arayüzlerin avantajları şunlardır:

  • Kart tabanlı arayüzler oluşturmak için HTML veya CSS bilgisine sahip olmanız gerekmez.
  • Kartlar ve widget'lar, genişlettikleri Google Workspace uygulamalarıyla iyi çalışacak şekilde otomatik olarak biçimlendirilir.
  • Kart tabanlı arayüzler hem masaüstü hem de mobil cihazlarda çalışır ancak arayüzü yalnızca bir kez tanımlamanız gerekir.

Karta dayalı arayüzler oluşturma

Kart tabanlı eklentiler oluştururken belirli kavramları ve tasarım kalıplarını anlamak önemlidir. Aşağıdaki kılavuzlarda, etkili kart tabanlı eklentiler oluşturmak için ihtiyacınız olan bilgiler yer almaktadır:

Kart oluştururken ve kullanıcı arayüzü davranışını uygularken bu sayfalara bakın. Eklentinizi uygularken referans olarak kullanabileceğiniz ek örnekleri de aşağıda bulabilirsiniz:

  • "Cats" adlı Google Workspace eklentisinin hızlı başlangıç kılavuzu

    Bu eklenti örneğinde, birden fazla sayfa ve ana sayfa içeren basit bir Google Workspace eklentisi kullanıcı arayüzü gösterilmektedir.

  • Google Workspace eklentisi: "Translate"

    Bu eklenti örneğinde, kullanıcıların Dokümanlar, E-Tablolar ve Slaytlar'daki metinleri çevirmesine olanak tanıyan bir Google Workspace eklentisi gösterilmektedir.

  • Google Workspace eklentisi: "Ekip Listesi"

    Bu eklenti örneğinde, Gmail ileti alıcıları, Drive dosyası düzenleyenler veya Takvim etkinliği katılımcıları hakkında kullanıcı bilgilerini gösteren daha karmaşık bir Google Workspace eklentisi örneği gösterilmektedir. Kullanıcı bilgilerini almak için Directory API'yi kullandığından bu eklentiyi yalnızca bir alan içinde kullanabilirsiniz.