Bu sayfa, Cloud Translation API ile çevrilmiştir.

Widget'lar

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

Kartlar ve bölümler gibi diğer widget'ların yapısı
Metin ve resim gibi kullanıcıya gönderilen bilgiler veya
Düğmeler, metin giriş alanları veya onay kutuları gibi işleme yönelik rahatlıklar.

Kart bölümlerine eklenen widget grupları, genel eklenti kullanıcı arayüzünü tanımlar. Widget'lar, hem web'de 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.

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

Yapısal widget'lar

Yapısal widget'lar, kullanıcı arayüzünde kullanılan diğer widget'lar için kapsayıcılar ve düzen sağlar.

Düğme grubu: Yatay bir satırda gruplandırılmış bir veya daha fazla metin ya da resim düğmesinden oluşan koleksiyon.
Kart: Bir veya daha fazla kart bölümü içeren tek bir bağlam kartıdır. Kartta gezinmeyi yapılandırarak kullanıcıların kartlar arasında nasıl gezinebileceğini tanımlarsınız.
Kart başlığı: Belirli bir kartın başlığıdır. Kart başlıklarında başlıklar, alt başlıklar ve resimler bulunabilir. Kart işlemleri ve evrensel işlemler, eklenti bunları kullanıyorsa kart başlığında görünür.
Kart bölümü: Toplanan widget grubu, diğer kart bölümlerinden yatay bir kurala göre bölünmüş ve isteğe bağlı olarak bölüm başlığına sahiptir. Her kartta en az bir kart bölümü olmalıdır. Kart bölümüne kart veya kart başlığı ekleyemezsiniz.

Yapısal widget'lar

Bu temel yapısal widget'lara ek olarak, Google Workspace eklentilerinde geçerli kartla örtüşen yapılar oluşturmak için Kart hizmetini kullanabilirsiniz: sabit altbilgiler ve göz atma kartları:

Düzeltilmiş altbilgi

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 kaymaz.

Düzeltilmiş altbilgi widget'ı örneği

Aşağıdaki kod alıntısı, örnek bir sabit altbilginin nasıl tanımlanacağını ve bir karta nasıl ekleneceğini gösterir:

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

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

Karta göz at

İnceleme kartı örneği

Gmail iletisi açma gibi bir kullanıcı işlemi nedeniyle yeni bağlamsal içerik tetiklendiğinde, yeni içeriğe dayalı içeriği hemen görüntüleyebilir (varsayılan davranış) veya kenar çubuğunun alt kısmında bir bilgi kartı bildirimi görüntüleyebilirsiniz. Bir kullanıcı, içeriğe dayalı bir tetikleyici etkinken ana sayfanıza dönmek için Geri düğmesini tıklarsa kullanıcıların içeriğe dayalı içeriği tekrar bulmasına yardımcı olacak bir göz atma kartı görünür.

Yeni bağlamsal içerik sunulduğunda bir göz kartı görüntülemek için yeni içeriğe dayalı içeriği hemen görüntülemek yerine CardBuilder sınıfınıza .setDisplayStyle(CardService.DisplayStyle.PEEK) ekleyin. İnceleme kartı yalnızca bağlamsal tetikleyicinizle birlikte tek bir kart nesnesi döndürülürse görüntülenir. Aksi takdirde, döndürülen kartlar anında geçerli kartın yerini alır.

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

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

Cats 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çili Gmail ileti dizisinin konusunu gösterecek ş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);

Bilgilendirme widget'ları

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

Resim: Sağladığınız, barındırılan ve herkese açık olarak erişilebilen bir URL ile belirtilen bir resim.
DecoratedText: Üst ve alt metin etiketleri ve bir resim ya da simge gibi diğer öğelerle eşleyebileceğiniz bir metin içerik dizesi. DecoratedText widget'ları, bir Düğme veya Değiştir widget'ı da içerebilir. Eklenen anahtarlar açma/kapatma düğmesi veya onay kutusu olabilir. DecoratedText widget'ının içerik metni, HTML biçimlendirmesini kullanabilir; üst ve alt etiketlerde düz metin kullanılmalıdır.
Text paragraph: HTML biçimli öğeler içerebilen bir metin paragrafıdır.

Bilgilendirme widget'ları

Kullanıcı etkileşimi widget'ları

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ıyla yapılandırabilirsiniz. Ayrıntılar için Etkileşimli Kart Oluşturma kılavuzuna bakın.

Kart işlemi: Eklenti başlık çubuğu menüsüne yerleştirilen bir menü öğesidir. Başlık çubuğu menüsü, eklentinin tanımladığı her kartta görünen ve evrensel işlemler olarak tanımlanan öğeleri de içerebilir.
DateTime seçiciler: 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 konusuna bakın.
Resim düğmesi: Metin yerine resim kullanan bir düğme. Önceden tanımlanmış birkaç simgeden birini veya URL'siyle belirtilen, herkese açık olarak barındırılan bir resmi kullanabilirsiniz.
Seçim girişi: Seçenek koleksiyonunu temsil eden bir giriş alanı. Seçim giriş widget'ları; onay kutuları, radyo düğmeleri veya açılır seçim kutuları olarak sunulur.
Switch: Açma/kapatma widget'ıdır. Anahtarları yalnızca bir DecoratedText widget'ıyla birlikte kullanabilirsiniz. Bunlar varsayılan olarak bir açma/kapatma anahtarı olarak gösterilir ancak bunun yerine onay kutusu olarak görünmelerine izin verebilirsiniz.
Metin düğmesi: Metin etiketli bir düğme. Metin düğmeleri için bir arka plan rengi dolgusu belirtebilirsiniz (varsayılan olarak şeffaftır). Düğmeyi gerektiğinde devre dışı da bırakabilirsiniz.
Metin girişi: Bir metin giriş alanıdır. Widget'ta başlık, 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 düzen. Öğeleri bir resim, başlık, alt başlık ve kenarlık ile kırpma stilleri gibi çeşitli özelleştirme seçenekleri ile temsil edebilirsiniz.

`DecoratedText` onay kutusu

Düğme veya ikili açma/kapatma anahtarı yerine onay kutusu eklenmiş bir DecoratedText widget'ı tanımlayabilirsiniz. Anahtarlarda olduğu gibi, onay kutusu değeri de setOnClickAction(action) yöntemi ile bu DecoratedText ürününe eklenmiş Action öğesine aktarılan işlem etkinliği nesnesine eklenir.

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

Aşağıdaki kod alıntısı, daha sonra bir karta ekleyebileceğiniz onay kutusu DecoratedText widget'ının nasıl tanımlanacağını gösterir:

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

Tarih ve saat seçiciler

Kullanıcıların saat, tarih veya her ikisini 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() kullanabilirsiniz.

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

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

var dateOnlyPicker = CardService.newDatePicker()
    .setTitle("Enter a 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 a 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 a date and 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"));

Aşağıda tarih ve saat seçici widget işleyici işlevine bir örnek verilmiştir. Bu işleyici, kullanıcının seçtiği tarih ve saati temsil eden bir dizeyi "myDateTime PickerWidgetID" kimliğiyle tarih ve saat seçici widget'ında 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üzlerine ilişkin örnekler gösterilmektedir. Seçildiğinde, kullanıcının yeni bir tarih seçmesine olanak tanımak için tarih seçici aya dayalı bir takvim kullanıcı arayüzü açar.

Kullanıcı, masaüstü cihazlarda zaman seçiciyi seçtiğinde 30 dakikalık artışlarla ayrılmış zamanların listesini içeren bir açılır menü açılır. Bu menüde kullanıcının seçim yapabileceği 30 dakikalık artışlar vardır. Kullanıcı belirli bir saat de yazabilir. Mobil cihazlarda bir saat seçici seçildiğinde yerleşik mobil "saat" saat seçici açılır.

Masaüstü	Mobil

Tablo

Izgara widget'ını kullanarak öğeleri çok sütunlu bir düzende görüntüleyin. Her öğede bir resim, başlık ve alt başlık gösterilebilir. Izgara öğesindeki resme göre metnin konumunu ayarlamak için ek yapılandırma seçeneklerini kullanın.

Bir ızgara öğesini, ızgarada tanımlanan işleme parametre olarak döndürülen bir tanımlayıcıyla yapılandırabilirsiniz.

Izgara widget'ı örneği

var gridItem = CardService.newGridItem()
  .setIdentifier("item_001")
  .setTitle("Lucian R.")
  .setSubtitle("Chief Information Officer")
  .setImage(imageComponent);

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

var imageComponent = CardService.newImageComponent()
  .setImageUrl("https://developers.google.com/workspace/
      images/cymbal/people/person1.jpeg")
  .setCropStyle(cropStyle)

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

Metin biçimlendirmesi

Bazı metin tabanlı widget'lar, basit metin HTML biçimlendirmesini destekleyebilir. Bu widget'ların metin içeriğini ayarlarken karşılık gelen HTML etiketlerini eklemeniz yeterlidir.

Desteklenen etiketler ve amaçları aşağıdaki tabloda gösterilmektedir:

Biçim	Örnek	Oluşturulan sonuç
Kalın	`"This is <b>bold</b>."`	Kalın yazı tipiyle yazılmıştır.
İtalik	`"This is <i>italics</i>."`	Bu dil italik yazılmıştır.
Altı çizili	`"This is <u>underline</u>."`	Bu satır altında çizilir.
Üstü çizili	`"This is <s>strikethrough</s>."`	Bu ~~üstü çizilidir~~.
Yazı tipi rengi	`"This is <font color=\"#FF0000\">red font</font>."`	Bu kırmızı yazı tipidir.
Köprü	`"This is a <a href=\"https://www.google.com\">hyperlink</a>."`	Bu bir köprüdür.
Saat	`"This is a time format: <time>2023-02-16 15:00</time>."`	Saat biçimi şu şekildedir: 2023-02-16 15:00.
Yeni satır	`"This is the first line. <br> This is a new line.` inç	Bu ilk satır. Bu yeni bir satır.

Widget'lar

Widget türleri

Yapısal widget'lar

Düzeltilmiş altbilgi

Karta göz at

Bilgilendirme widget'ları

Kullanıcı etkileşimi widget'ları

DecoratedText onay kutusu

Tarih ve saat seçiciler

Tablo

Metin biçimlendirmesi

`DecoratedText` onay kutusu