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 yönelik bilgiler (ör. metin ve resim) veya
• Düğmeler, metin giriş alanları veya onay kutuları gibi eylem ücretleri.

Kart bölümlerine eklenen widget grupları, genel kullanıcı arayüzü. Widget'lar hem web'de hem de mobil cihazlarda aynı görünüme ve işleve sahiptir. İlgili içeriği oluşturmak için kullanılan referans belgeleri widget kümesi oluşturmaya yönelik çeşitli yöntemleri açıklar.

Widget türleri

Eklenti widget'ları genellikle üç kategoriye ayrılır. yapısal widget'lar, Bilgi sağlayan widget'lar ve kullanıcı etkileşimi widget'ları.

Yapısal widget'lar

Yapısal widget'lar, diğer widget'lar için kapsayıcılar ve organizasyon sağlar kullanıcı arayüzünde kullanılır.

• Düğme grubu: A bir veya daha fazla metin ya da resim düğmesinden oluşan ve yatay satır.
• Kart: Tek bir bağlam bir veya daha fazla kart bölümü içeren bir kart. Kullanıcıların nasıl hareket edebileceklerini siz tanımlarsınız yapılandırarak kartlar arasında kartta gezinme.
• Kart başlığı: başlığını ifade eder. Kart başlıkları; görüntüsüdür. Kart işlemleri ve evrensel işlemler şurada görünür: "the" kart başlığını kullanın.
• Kart bölümü: A diğer kart bölümlerinden 800x250'e göre bölünmüş, toplanan widget'ların veya isteğe bağlı olarak bölüm üstbilgisine sahip olan bir reklam grubu içerir. Her kartta en az bir kart bölümü olmalıdır. Bir karta kart veya kart başlığı ekleyemezsiniz bölümüne ekleyin.

Bu temel yapısal widget'lara ek olarak, Kullanabileceğiniz Google Workspace eklentisi Kart hizmeti'ni kullanarak geçerli kartla çakışan yapılar oluşturun: sabit altbilgiler ve göz atma kartları:

Düzeltilen 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 kaydırılmaz.

Aşağıdakiler 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ı

Yeni bağlamsal içeriklerde Bir kullanıcı işlemi tarafından tetiklenir. Örneğin, kullanıyorsanız, yeni bağlamsal içeriği hemen görüntüleyebilir ve (varsayılan davranış) veya ekranın alt kısmında bir göz atma kartı bildirimi kenar çubuğu. Kullanıcı Geri'yi arrow_back tıklarsa bir süre önce ana sayfanıza dönüp bağlamsal tetikleyici etkin olduğunda, kullanıcıların arama yaparken bağlamsal içeriğe dönelim.

İçeriğe dayalı yeni içerik mevcut olduğunda yeni bağlamsal içeriği hemen görüntüleyerek .setDisplayStyle(CardService.DisplayStyle.PEEK) - CardBuilder sınıfını kullanır. Göz atma kartı yalnızca bağlamsal tetikleyici; Aksi takdirde, döndürülen kartlar Geçerli kart.

Göz atma kartının başlığını özelleştirmek için .setPeekCardHeader() yöntemini standart bir CardHeader nesnenizin nasıl kullanıldığını gösterir. Varsayılan olarak, göz atma kartı başlığı Yalnızca eklentinizin adını içerir.

Şununa göre aşağıdaki kod: Cats Google Workspace Eklentisi hızlı başlangıç kılavuzu, Bilgi kartı ile kullanıcıları yeni bağlama dayalı içeriklerle ilgili bilgilendirir ve Göz atma kartının başlığını kullanarak seçilen Gmail iletisinin konu.

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

Bilgilendirme amaçlı widget'lar, kullanıcıya bilgi sunar.

• Resim: Bir resim sağladığınız barındırılan ve herkese açık bir URL ile belirtilen bir URL'dir.
• DecoratedText: A text (metin) üst ve alt gibi başka öğelerle eşleyebileceğiniz içerik dizesi metin etiketleri ve bir resim veya simge kullanabilirsiniz. DecoratedText widget'ları, Button veya Geçiş widget'ı. Eklenen anahtarlar açma/kapatma anahtarları veya onay kutuları olabilir. İçerik metni DecoratedText widget'ının HTML biçimlendirmesi; 25-34 yaşındaki ve alt etiketlerde düz metin kullanılmalıdır.
• Text paragraph: A metin paragrafı, bu metin paragrafı HTML biçimli öğeler.

Kullanıcı etkileşimi widget'ları

Kullanıcı etkileşimi widget'ları, eklentinin yardımcı olur. Bu widget'ları işlem yanıtlarıyla yapılandırabilirsiniz. farklı kartlar görüntüle, URL'leri aç, bildirimleri göster, taslak e-posta oluştur, veya diğer Apps Komut Dosyası işlevlerini çalıştırabilirsiniz. Bkz. Etkileşimli Kartlar Oluşturma kılavuzu bolca fırsat sunuyor.

• Kart işlemi: Menü öğesi, eklenti başlık çubuğu menüsüne yerleştirildi. Başlık çubuğu menüsü, evrensel işlemler olarak tanımlanan öğeleri içeriyorsa, Bunlar eklentinin tanımladığı her kartta görünür.
• DateTime seçiciler: widget'lar Kullanıcıların tarih, saat veya her ikisini birden seçebilmesini sağlayan özellikler içerir. Görüntüleyin Tarih ve saat seçiciler konusuna bakın.
• Resim düğmesi: A metin yerine resim kullanan bir düğme kullanabilirsiniz. Birkaç farklı türde Önceden tanımlanmış simgeler veya URL'siyle belirtilen, herkese açık olarak barındırılan bir resim.
• Seçim girişi: Bir giriş alanıdır. Seçim girişi widget'ları onay kutuları, radyo düğmeleri veya açılır seçim kutuları olarak gösterilir.
• Switch: Bir açma/kapatma düğmesi widget'ını tıklayın. Anahtarları yalnızca DecoratedText widget'ı. Varsayılan olarak bunlar bir açma/kapatma anahtarı olarak görünür ancak öğelerin onay kutusunu kullanabilirsiniz.
• Metin düğmesi: A metin etiketli düğme. Metin için bir arka plan rengi dolgusu belirtebilirsiniz düğmeleri (varsayılan olarak şeffaftır). Ayrıca düğmeyi gerekir.
• Metin girişi: Metin giriş alanına ekleyebilirsiniz. Widget'ta başlık metni, ipucu metni ve çok satırlı metin bulunabilir. Widget, metin değeri değiştiğinde işlemleri tetikleyebilir.
• Izgara: Çok sütunlu bir tablodur. bir öğe koleksiyonunu temsil eden düzen. Öğeleri temsil etmek için resim, başlık, alt başlık ve kenarlık gibi çeşitli özelleştirme seçenekleri ve kırpma stillerini ayarlayın.

DecoratedText onay kutusu

Bir DecoratedText tanımlayabilirsiniz düğme veya ikili açma/kapatma anahtarı yerine onay kutusu ekli olan widget anahtarı. Anahtarlarda olduğu gibi, onay kutusunun değeri işlem etkinliği nesnesi Action buna DecoratedText eklendi tarafından setOnClickAction(action) yöntemidir.

Aşağıdaki kod alıntısı, bir onay kutusunun nasıl tanımlanacağını gösterir DecoratedText widget'ını tıklayıp karta ekleyin:

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 birden seçmesine olanak tanıyan widget'lar tanımlayabilirsiniz. setOnChangeAction() kullanarak bir widget işleyici işlevi atayabilirsiniz seçicinin değeri değiştiğinde yürütülür.

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

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 biçimlerini gösterir ve "myDateTime PickerWidgetID" kimliğine sahip bir tarih-saat seçici widget'ında kullanıcı:

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/workspace/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 cihazlarda seçici seçim kullanıcı arayüzlerinin örnekleri gösterilmektedir cihazlar. Seçildiğinde, tarih seçici izin vermek için aya dayalı bir takvim kullanıcı arayüzü açar kullanıcının hızlıca yeni bir tarih seçmesini sağlar.

Kullanıcı masaüstü cihazlarda zaman seçiciyi seçtiğinde bir açılır menü açılır Kullanıcının seçebileceği 30 dakikalık artışlarla ayrılmış bir zaman listesi içerir var. Kullanıcı, belirli bir saat de yazabilir. Mobil cihazlarda saat seçici, yerleşik mobil "saat"i açar saat seçici.

Masaüstü	Mobil

Izgara

Izgara widget'ını kullanarak öğeleri çok sütunlu bir düzende görüntüleyin. Her öğe bir resim, başlık ve alt başlık görüntüler. Ek yapılandırma seçeneklerini kullanarak metnin, ızgara öğesindeki resme göre konumunu ayarlar.

Izgara öğesini, parametre olarak döndürülen bir tanımlayıcıyla yapılandırabilirsiniz. çizelgede tanımlanan eyleme dönüştürür.

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. Ayarlanırken karşılık gelen HTML etiketlerini eklemeniz yeterlidir.

Desteklenen etiketler ve amaçları aşağıda gösterilmiştir tablo: