Düzenleyici eklentisi için iletişim kutuları ve kenar çubukları

Çoğu Düzenleyici eklentisi için iletişim kutuları ve kenar çubuğu panelleri, birincil eklenti kullanıcı arayüzleridir. Her ikisi de standart HTML ve CSS kullanılarak tamamen özelleştirilebilir. Ayrıca, kullanıcı kenar çubuğu veya iletişim kutusuyla etkileşime girdiğinde Apps Komut Dosyası işlevlerini çalıştırmak için Google Apps Komut Dosyası'nın istemci-sunucu iletişim modelini kullanabilirsiniz. Eklentiniz birden fazla kenar çubuğu ve iletişim kutusu tanımlayabilir ancak eklenti aynı anda yalnızca birini gösterebilir.

Kullanıcının, eklenti arayüzünde bir seçim yapana kadar düzenleyiciyle etkileşimde bulunmasını engellemek istediğinizde iletişim kutusu kullanın. Aksi takdirde kenar çubuğu kullanın.

İletişim kutuları

İletişim kutuları, ana düzenleyici içeriğinin üzerinde yer alan pencere panelleridir. Apps Komut Dosyası iletişim kutuları kalıcıdır. Kullanıcı, bu iletişim kutuları açıkken düzenleyici arayüzünün diğer öğeleriyle etkileşimde bulunamaz. İletişim kutularının içeriğini ve boyutunu özelleştirebilirsiniz.

Eklenti iletişim kutularını Apps Komut Dosyası özel iletişim kutularıyla aynı şekilde oluşturursunuz. Genel prosedür şöyledir:

  1. İletişim kutunuzun HTML yapısını, CSS'sini ve istemci tarafı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. Düzenleyici eklentisi stil kurallarına bakın.
  2. İletişim kutusunun açılmasını istediğiniz sunucu tarafı kodunuzda, iletişim kutusunu temsil eden bir HtmlOutput nesnesi oluşturmak için HtmlService.createHtmlOutputFromFile işlevini çağırın. Alternatif olarak, şablonlu HTML kullanıyorsanız HtmlService.createTemplateFromFile işlevini çağırarak şablon oluşturabilir, ardından HtmlTemplate.evaluate işlevini çağırarak şablonu HtmlOutput nesnesine dönüştürebilirsiniz.
  3. İletişim kutusunu Ui.showModalDialog kullanarak görüntülemek için HtmlOutput çağrısı yapın.

İletişim kutuları açıkken sunucu tarafı komut dosyası askıya alınmaz. İstemci tarafı JavaScript, google.script.run ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla bilgi için İstemciden sunucuya iletişim başlıklı makaleyi inceleyin.

Dosya açma iletişim kutuları

Dosya açma iletişim kutuları, kullanıcılarınızın Google Drive'larından dosya seçmesine olanak tanıyan önceden oluşturulmuş iletişim kutularıdır. Dosya açma iletişim kutusunu eklentinize tasarlamanıza gerek kalmadan ekleyebilirsiniz ancak bunun için bazı ek yapılandırmalar yapmanız gerekir. Google Picker API'yi etkinleştirmek için eklentinin Cloud Platform projesine de erişmeniz gerekir.

Daha fazla bilgi için Dosya açma iletişim kutuları başlıklı makaleyi inceleyin.

Kenar çubukları, düzenleyici arayüzünün sağ tarafında görünen panellerdir ve en yaygın eklenti arayüzü türüdür. Kenar çubuğu açıkken, iletişim kutularının aksine düzenleyici arayüzünün diğer öğeleriyle etkileşimde bulunmaya devam edebilirsiniz. Kenar çubuklarının genişliği sabittir ancak içeriklerini özelleştirebilirsiniz.

Eklenti kenar çubuklarını, Apps Komut Dosyası özel kenar çubuklarıyla aynı şekilde oluşturursunuz. Genel prosedür şöyledir:

  1. Kenar çubuğunuzun HTML yapısını, CSS'sini ve istemci tarafı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. Kenar çubuğunu tanımlarken Editor eklentisi stil kurallarına bakın.

  2. Kenar çubuğunun açılmasını istediğiniz sunucu tarafı kodunuzda, kenar çubuğunu temsil eden bir HtmlOutput nesnesi oluşturmak için HtmlService.createHtmlOutputFromFile işlevini çağırın. Alternatif olarak, şablonlu HTML kullanıyorsanız HtmlService.createTemplateFromFile işlevini çağırarak şablon oluşturabilir, ardından HtmlTemplate.evaluate işlevini çağırarak şablonu HtmlOutput nesnesine dönüştürebilirsiniz.

    Eklenti kenar çubuklarının genişliği 300 pikseldir ve HtmlOutput.setWidth çağrılarak değiştirilemez.

  3. Ui.showSidebar tuşlarına basarak HtmlOutput kullanarak kenar çubuğunu görüntüleyin.

Kenar çubukları açıkken sunucu tarafı komut dosyası askıya alınmaz. İstemci tarafı JavaScript, google.script.run ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla bilgi için İstemciden sunucuya iletişim başlıklı makaleyi inceleyin.