Widget'lar

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Widget, aşağıdakilerden birini veya daha fazlasını sağlayan basit bir kullanıcı arayüzü öğesidir:

  • Kartlar ve bölümler gibi diğer widget'lar için yapı,
  • Kullanıcı için bilgiler (ör. metin ve resimler) veya
  • Düğmeler, metin giriş alanları veya onay kutuları gibi işlem onayları.

Kart bölümlerine eklenen widget grupları, genel eklenti kullanıcı arayüzünü tanımlar. Widget'lar hem web hem de mobil cihazlarda aynı görünüme ve işleve sahiptir. Referans belgelerinde widget grupları oluşturmak için çeşitli yöntemler açıklanmaktadır.

Google Workspace eklentilerinin tasarım kitini kullanma

Tasarımcılar bir eklentinin widget'larını tasarlarken zamandan tasarruf etmek için Figma'da bulunan Google Workspace eklentileri kullanıcı arayüzü tasarım kitini kullanabilir. Bir Figma hesabı oluşturabilir veya kuruluşunuzun yöneticisinden lisans isteyebilirsiniz.

Bileşenlere göz atın ve widget'lar oluşturup görselleştirmek için yerleşik şablonları kullanın.

Tasarım kitini edinin

Widget türleri

Eklenti widget'ları genellikle üç gruba ayrılır: Yapısal widget'lar, bilgilendirme widget'ları ve kullanıcı etkileşimi widget'ları.

Yapısal widget'lar

Yapısal widget'lar, AI'da kullanılan diğer widget'lar için container'lar ve düzen sağlar.

Yapısal widget'lar

  • Düğme grubu: Yatay bir satırda gruplanmış bir veya daha fazla metin veya resim düğmesi koleksiyonu.
  • Card: Bir veya daha fazla kart bölümü içeren tek bir bağlam kartı. Kartta gezinmeyi yapılandırarak kullanıcıların kartlar arasında nasıl geçiş yapabileceğini tanımlarsınız.
  • Kart başlığı: Belirli bir kartın başlığıdır. Kart başlıklarında başlık, altyazı ve resim bulunabilir. Eklenti kullanıyorsa kart başlığında kart işlemleri ve evrensel işlemler görünür.
  • Kart bölümü: Diğer kart bölümlerinden yatay bir gruba bölünen ve isteğe bağlı olarak bir bölüm üstbilgisinin bulunduğu, toplanan bir widget grubudur. Her kartta en az bir kart bölümü olmalıdır. Kart bölümüne kart veya kart başlığı ekleyemezsiniz.

Bir Google Workspace eklentisinde, bu temel yapısal widget'lara ek olarak Card hizmeti ile mevcut kartla çakışan yapılar oluşturabilirsiniz: sabit altbilgiler ve göz atma kartları:

Artık kartınızın alt kısmına sabit bir düğme satırı ekleyebilirsiniz. Bu satır, kart içeriğinin geri kalanıyla birlikte hareket etmez veya kaydırmaz. Aşağıdaki kod alıntısı, örnek bir sabit altbilgiyi nasıl tanımlayacağınızı ve bir karta nasıl ekleyeceğinizi gösterir:

var fixedFooter = CardService.newFixedFooter()
    .setPrimaryButton(
        CardService.newTextButton()
            .setText("help")
            .setOpenLink(CardService.newOpenLink()
                .setUrl("https://www.google.com")))
    .setSecondaryButton(
        CardService.newTextButton()
            .setText("submit")
            .setOnClickAction(
                CardService.newAction()
                    .setFunctionName(
                        "submitCallback")));

var card = CardService.newCardBuilder()
    // (...)
    .setFixedFooter(fixedFooter)
    .build();
      

 

Sabit altbilgi widget'ı örneği

Göz atma kartı

Göz atma kartı örneği

Bir Gmail iletisi açma gibi bir kullanıcı işlemi tarafından yeni bir içeriğe dayalı içerik tetiklendiğinde, yeni içerik içeriğini hemen (varsayılan davranış) gösterebilir veya kenar çubuğunun en altında bir göz atma kartı bildirimi görüntüleyebilirsiniz. Kullanıcı bir bağlamsal tetikleyici etkinken ana sayfanıza dönmek için Geri'yi tıklarsa kullanıcının içerik içeriğini tekrar bulmasına yardımcı olmak için göz atma kartı gösterilir.

Yeni bir bağlamsal içerik sunulduğunda yeni bir göz atma kartı görüntülemek için yeni bağlamsal içeriği hemen görüntülemek yerine CardBuilder sınıfınıza .setDisplayStyle(CardService.DisplayStyle.PEEK) ekleyin. Göz atma kartı yalnızca bağlamsal tetikleyicinizle tek bir kart nesnesi döndürülürse geri verilen kartlar geçerli kartın yerini alır.

Göz atma kartının başlığını özelleştirmek için içerik kartınızı oluştururken .setPeekCardHeader() yöntemini standart bir CardHeader nesnesiyle ekleyin. Varsayılan olarak bir Bakış kartı başlığı yalnızca eklentinizin adını içerir.

Kediler Google Workspace eklentisi hızlı başlangıç kılavuzunu temel alan aşağıdaki kod, kullanıcıları bir Peek kartıyla yeni bağlamsal içerik hakkında bilgilendirir ve Peek kartının başlığını seçilen Gmail ileti dizisinin konusunu görüntüleyecek şekilde özelleştirir.

var peekHeader = CardService.newCardHeader()
    .setTitle('Contextual Cat')
    .setImageUrl('https://www.gstatic.com/images/
        icons/material/system/1x/pets_black_48dp.png')
    .setSubtitle(text);

. . .

var card = CardService.newCardBuilder()
    .setDisplayStyle(CardService.DisplayStyle.PEEK)
    .setPeekCardHeader(peekHeader);
      

 

Özelleştirilmiş göz atma kartı örneği

Bilgilendirme amaçlı widget'lar

Bilgilendirme amaçlı widget'lar

Bilgilendirici widget'lar kullanıcıya bilgi verir.

  • Resim: Barındırılan ve herkesin erişebileceği bir URL'yle gösterilen resimdir.
  • DeoratedText: Üst ve alt metin etiketleri gibi diğer öğelerle ve bir resim veya simgeyle eşleyebileceğiniz bir metin içeriği dizesi. DecoratedText widget'ları, bir Düğme veya Değiştir widget'ı da içerebilir. Eklenen anahtarlar basit geçişler veya onay kutuları olabilir. DecoratedText widget'ının içerik metni HTML biçimlendirmesini kullanabilir. Üst ve alt etiketler düz metin kullanmalıdır.
  • Metin paragrafı: HTML biçimli öğeler içerebilen basit bir metin paragrafıdır.




Kullanıcı etkileşimi widget'ları

Kart işlemi widget'ı

Kullanıcı etkileşimi widget'ları, eklentinin kullanıcılar tarafından gerçekleştirilen işlemlere yanıt vermesine olanak tanır. Bu widget'ları farklı kartlar görüntülemek, URL'leri açmak, bildirimleri göstermek, taslak e-postalar oluşturmak veya diğer Apps Komut Dosyası işlevlerini çalıştırmak için işlem yanıtları kullanarak yapılandırabilirsiniz. Ayrıntılı bilgi için Etkileşimli Kart Oluşturma kılavuzuna bakın.

Kullanıcı etkileşimi widget'ları

  • Kart işlemi: Eklenti başlık çubuğu menüsüne yerleştirilen bir menü öğesi. Başlık çubuğu menüsü, eklentinin tanımladığı her kartta görünen evrensel işlemler olarak tanımlanan öğeleri de içerebilir.
  • DateTime seçicileri: Kullanıcıların tarih, saat veya her ikisini birden seçmesine olanak tanıyan widget'lar. Daha fazla bilgi için aşağıdaki Tarih ve saat seçiciler bölümüne bakın.
  • Resim düğmesi: Metin yerine resim kullanan bir düğme. Önceden tanımlanmış birkaç simgeden birini veya URL'siyle gösterilen herkese açık olarak barındırılan bir resmi kullanabilirsiniz.
  • Seçim girişi: Bir seçenek koleksiyonunu temsil eden giriş alanıdır. Seçim giriş widget'ları onay kutuları, radyo düğmeleri veya açılır seçim kutuları olarak gösterilir.
  • Switch: Bir açma/kapatma widget'ı. Anahtarları yalnızca DeoratedText widget'ıyla birlikte kullanabilirsiniz. Varsayılan olarak, geçiş yapma anahtarı olarak gösterilirler. Ancak, bunun yerine bunların onay kutusu olarak görünmesine neden olabilirsiniz.
  • Metin düğmesi: Metin etiketi bulunan bir düğme. Metin düğmeleri için arka plan rengi dolgusu belirtebilirsiniz (varsayılan ayar şeffaftır). Düğmeyi gereken şekilde devre dışı da bırakabilirsiniz.
  • Metin girişi: Metin giriş alanı. Widget'ta başlık metni, ipucu metni ve çok satırlı metin olabilir. Widget, metin değeri değiştiğinde işlemleri tetikleyebilir.
  • Izgara: Bir öğe koleksiyonunu temsil eden çok sütunlu bir düzen. Resim, başlık, alt başlık ve kenarlık ve kırpma stilleri gibi çeşitli özelleştirme seçenekleri bulunan öğeleri temsil edebilirsiniz.

DecoratedText onay kutuları

Düğme veya ikili anahtarı açma/kapatma anahtarı yerine, onay kutusu eklenmiş bir DecoratedText widget'ı tanımlayabilirsiniz. Anahtarlarda olduğu gibi onay kutusunun değeri de setOnClickAction(action) yöntemiyle bu DecoratedText öğesine ekli Action öğesine iletilen işlem etkinliği nesnesine dahil edilir.

Aşağıdaki kod alıntısı bir DecoratedText widget'ının nasıl tanımlanacağını ve ardından bu kartı karta ekleyebilirsiniz:

var decoratedText = CardService.newDecoratedText()
    // (...)
    .setSwitch(CardService.newSwitch()
        .setFieldName('form_input_switch_key')
        .setValue('switch_is_on')
        .setControlType(
            CardService.SwitchControlType.CHECK_BOX));
      

 

Süslü metin onay kutusu widget'ı örneği

Tarih ve saat seçiciler

Kullanıcıların saat, tarih veya her ikisini birden seçmesine olanak tanıyan widget'lar tanımlayabilirsiniz. Seçicinin değeri değiştiğinde yürütülecek bir widget işleyici işlevi atamak için setOnChangeAction() işlevini kullanabilirsiniz.

Aşağıdaki kod alıntısı, daha sonra karta ekleyebileceğiniz yalnızca tarih seçici, yalnızca saat seçici ve tarih saat seçicinin nasıl tanımlanacağını gösterir:

var dateOnlyPicker = CardService.newDatePicker()
    .setTitle("Enter the date.")
    .setFieldName("date_field")
    // Set default value as May 24 2019. Either a
    // number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateChange"));

var timeOnlyPicker = CardService.newTimePicker()
    .setTitle("Enter the time.")
    .setFieldName("time_field")
    // Set default value as 23:30.
    .setHours(23)
    .setMinutes(30)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleTimeChange"));

var dateTimePicker = CardService.newDateTimePicker()
    .setTitle("Enter the date and time in EDT time.")
    .setFieldName("date_time_field")
    // Set default value as May 24 2019 03:30 AM UTC.
    // Either a number or string is acceptable.
    .setValueInMsSinceEpoch(1558668600000)
    // EDT time is 4 hours behind UTC.
    .setTimeZoneOffsetInMins(-4 * 60)
    .setOnChangeAction(CardService.newAction()
        .setFunctionName("handleDateTimeChange"));
      

 

Özelleştirilmiş göz atma kartı örneği

Aşağıda, tarih ve saat widget'ı işleyici işlevine bir örnek verilmiştir. Bu işleyici, kullanıcı tarafından bir tarih saat seçici widget'ında "myDateTimePickerWidgetID" kimlikli tarih ve saati temsil eden bir dizeyi biçimlendirir ve günlüğe kaydeder:

function handleDateTimeChange(event) {
  var dateTimeInput =
    event.commonEventObject.formInputs["myDateTimePickerWidgetID"];
  var msSinceEpoch = dateTimeInput.msSinceEpoch;
  var hasDate = dateTimeInput.hasDate;
  var hasTime = dateTimeInput.hadTime;

  // The following requires you to configure the add-on to read user locale
  // and timezone.
  // See https://developers.google.com/apps-script/add-ons/how-tos/access-user-locale
  var userTimezoneId = event.userTimezone.id;

  // Format and log the date-time selected using the user's timezone.
  var formattedDateTime;
  if (hasDate && hasTime) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd hh:mm:ss");
  } else if (hasDate) {
    formattedDateTime = Utilities.formatDate(
      new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd")
      + ", Time unspecified";
  } else if (hasTime) {
    formattedDateTime = "Date unspecified, "
      + Utilities.formatDate(
          new Date(msSinceEpoch), userTimezoneId, "hh:mm a");
  }

  if (formattedDateTime) {
    console.log(formattedDateTime);
  }
}

 

Aşağıdaki tabloda, masaüstü ve mobil cihazlardaki seçici seçimi kullanıcı arayüzleriyle ilgili örnekler verilmiştir. Seçildiğinde tarih seçici, kullanıcının hızlıca yeni bir tarih seçmesine izin vermek için aya dayalı takvim kullanıcı arayüzünü açar.

Kullanıcı masaüstü cihazlarda zaman seçiciyi seçtiğinde, kullanıcının aralarından seçim yapabileceği 30 dakikalık aralıklarla ayrılmış bir liste açılır. Kullanıcı ayrıca belirli bir zaman da yazabilir. Mobil cihazlarda saat seçici seçimi, yerleşik mobil "saat" saat seçiciyi açar.

Masaüstü Mobil
tarih seçici seçme örneği mobil tarih seçici seçimi örneği
zaman seçici seçimi örneği mobil zaman seçici seçme örneği

GRid

Izgara widget'ıyla öğeleri çok sütunlu düzende görüntüleme. Her öğe bir resim, başlık ve alt başlık görüntüleyebilir. Bir ızgara öğesindeki resme göre metnin konumunu ayarlamak için ek yapılandırma seçenekleri kullanın.

Izgarada tanımlanan işleme parametre olarak döndürülen bir tanımlayıcıya sahip ızgara öğesi yapılandırabilirsiniz.

var gridItem = CardService.newGridItem()
  .setIdentifier("item_001")
  .setTitle("A grid item")
  .setSubtitle("with a subtitle")
  .setImage(imageComponent);

var cropStyle = CardService.newImageCropStyle()
  .setImageCropType(CardService.ImageCropType.SQUARE);

var borderStyle = CardService.newBorderStyle()
  .setType(CardService.BorderType.STROKE)
  .setCornerRadius(8)
  .setStrokeColor("#00FF00FF");

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://cataas.com/cat?0.001")
  .setCropStyle(cropStyle)
  .setBorderStyle(borderStyle);

var grid = CardService.newGrid()
  .setTitle("My first grid")
  .addItem(gridItem)
  .setNumColumns(2)
  .setOnClickAction(CardService.newAction()
    .setFunctionName("handleGridItemClick"));
      

 

Izgara widget'ı örneği

Metin biçimlendirmesi

Bazı metin tabanlı widget'lar basit metin HTML biçimlendirmesini destekleyebilir. Bu widget'ların metin içeriğini ayarlarken ilgili HTML etiketlerini eklemeniz yeterlidir. Aşağıdaki biçimler desteklenir:

Biçim Örnek Oluşturulan Sonuç
Kalın <b>test</b> test
İtalik <i>test</i> test
Altını çiz <u>test</u> test
Üstü Çizili <s>test</s> test
Yazı tipi rengi <font color="#ea9999">test</font> test
Köprü <a href="http://www.google.com">google</a> Google
Zaman <time>2020-02-16 15:00</time> 16.02.2020 15:00
Yeni satır test <br> test test
test