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ı,
Kullanıcıya gönderilen bilgiler (ör. metin ve resim) veya
Düğmeler, metin giriş alanları veya onay kutuları gibi işlem fırsatları.

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, bilgi amaçlı 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üzenleme sağlar.

Düğme grubu: Yatay bir satırda gruplandırılmış bir veya daha fazla metin ya da resim düğmesi koleksiyonudur.
Kart: 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ığı. Kart başlıklarında başlıklar, altyazılar ve bir resim bulunabilir. Kart işlemleri ve evrensel işlemler, eklenti kullanıyorsa kart başlığında görünür.
Kart bölümü: Diğer kart bölümlerinden yatay bir kurala göre bölünmüş ve isteğe bağlı olarak bir bölüm başlığına sahip olan toplanan bir widget grubu. Her kartta en az bir kart bölümü olmalıdır. Bir 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 bilgi kartları:

Düzeltilmiş altbilgi

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 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();

Göz atma kartı

Göz atma kartı örneği

Gmail iletisi açma gibi bir kullanıcı işlemi tarafından 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 kısa göz atma kartı bildirimi görüntüleyebilirsiniz. Kullanıcı, içeriğe dayalı bir tetikleyici etkin durumdayken ana sayfanıza dönmek için Geri düğmesini tıklarsa kullanıcını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 kullanıma sunulduğunda 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 birlikte tek bir kart nesnesi döndürülürse görünür. Aksi takdirde, döndürülen kartlar hemen geçerli kartın yerini alır.

Kısaca göz atma 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.

Cats Google Workspace Eklentisi hızlı başlangıç kılavuzunu temel alan aşağıdaki kod, bir Peek kartıyla kullanıcıları yeni bağlamsal içerik hakkında bilgilendirir ve Peek kartının başlığını seçili Gmail iletisi 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);

Bilgilendirici widget'lar

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

Resim: Sağladığınız barındırılan ve herkese açık bir URL ile gösterilen bir resim.
DecoratedText: Üst ve alt metin etiketleri ve bir resim ya da simge gibi diğer öğelerle eşleştirebileceğ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 anahtarları 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.
Text paragraph: HTML biçimli öğeler içerebilen bir metin paragrafı.

Bilgilendirici 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 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ış çeşitli simgelerden veya URL'siyle belirtilen, herkese açık olarak barındırılan bir resimden birini 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 DecoratedText widget'ıyla birlikte kullanabilirsiniz. Bunlar varsayılan olarak bir açma/kapatma anahtarı olarak görünür ancak bunun yerine onay kutusu olarak görünmelerine neden olabilirsiniz.
Metin düğmesi: Metin etiketi olan bir düğme. Metin düğmeleri için bir arka plan rengi dolgusu belirtebilirsiniz (varsayılan renk şeffaftır). Ayrıca düğmeyi gereken şekilde devre dışı da bırakabilirsiniz.
Metin girişi: Metin giriş alanıdır. Widget'ta başlık, ipucu metni ve çok satırlı metin bulunabilir. Widget, metin değeri değiştiğinde işlemleri tetikleyebilir.
Izgara: Bir öğe koleksiyonunu temsil eden çok sütunlu bir düzen. Öğeleri resim, başlık ve alt başlığın yanı sıra kenarlık ve kırpma stilleri gibi çeşitli özelleştirme seçenekleriyle temsil edebilirsiniz.

`DecoratedText` onay kutusu

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

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 bir 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() kullanabilirsiniz.

Aşağıdaki kod alıntısı, daha sonra bir 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-saat seçici widget işleyici işlevine bir örnek verilmiştir. Bu işleyici, kullanıcının seçtiği tarihi 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, tarih seçici kullanıcının hızlıca yeni bir tarih seçmesine olanak tanımak için aya dayalı bir takvim kullanıcı arayüzü açar.

Kullanıcı, masaüstü cihazlarda saat 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üden kullanıcının aralarından seçim yapabileceği 30 dakikalık artışlar gösterilir. Kullanıcı belirli bir saat de yazabilir. Mobil cihazlarda bir saat seçici seçildiğinde yerleşik "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örüntülenebilir. Izgara öğesindeki resme göre metnin konumunu ayarlamak için ek yapılandırma seçeneklerini kullanın.

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

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 ilgili HTML etiketlerini eklemeniz yeterlidir.

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

Biçim	Örnek	Oluşturulan sonuç
Kalın	`"This is <b>bold</b>."`	Bu kalın yazılmıştır.
İtalik	`"This is <i>italics</i>."`	Bu italik yazılmıştır.
Altı çizili	`"This is <u>underline</u>."`	Altı çizili.
Ü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>."`	Şu saat biçimi kullanılır: 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

Göz atma kartı

Bilgilendirici widget'lar

Kullanıcı etkileşimi widget'ları

DecoratedText onay kutusu

Tarih ve saat seçiciler

Tablo

Metin biçimlendirmesi

`DecoratedText` onay kutusu