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

İletişim pencereleri ve kenar çubuğu panelleri, Düzenleyici eklentilerinin çoğunun birincil kullanıcı arayüzleridir. Her ikisi de standart HTML ve CSS kullanılarak tamamen özelleştirilebilir. Kullanıcı kenar çubuğu veya iletişim kutusuyla etkileşim kurduğunda Apps Komut Dosyası işlevlerini çalıştırmak için Apps Komut Dosyası'nın istemci-sunucu iletişim modelini kullanabilirsiniz. Eklentiniz birden çok kenar çubuğu ve iletişim kutusu tanımlayabilir ancak aynı anda yalnızca bir tane görüntüleyebilir.

Kullanıcının eklenti arayüzünde belirli bir seçim yapana kadar düzenleyiciyle etkileşim kurmasını önlemek istiyorsanız iletişim kutusu kullanın. Aksi takdirde kenar çubuğu kullanın.

İletişim kutuları

İletişim kutuları, birincil düzenleyici içeriğinin üzerini kaplayan pencere panelleridir. Apps Komut Dosyası iletişim kutuları kalıcıdır; kullanıcı, açıldıklarında 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. Önerilen genel prosedür şu şekildedir:

  1. İletişim kutunuzun HTML yapısını, CSS'sini ve istemci taraflı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. İletişim kutusunu tanımlarken Düzenleyici Eklentisi stil yönergelerine bakın.
  2. İletişim kutusunun açılmasını istediğiniz sunucu tarafı kodunuzda HtmlService.createHtmlOutputFromFile(filename) çağrısı yaparak iletişim kutusunu temsil eden bir HtmlOutput nesnesi oluşturun. Alternatif olarak, şablonlu HTML kullanıyorsanız şablon oluşturmak için HtmlService.createTemplateFromFile(filename) çağrısı yapabilir ve ardından HtmlTemplate.evaluate() öğesini HtmlOutput nesnesine dönüştürebilirsiniz.
  3. HtmlOutput kullanan iletişim kutusunu görüntülemek için Ui.showModalDialog(htmlOutput, dialogTitle) numarasını çağırın.

İletişim kutuları, açıkken sunucu tarafı komut dosyasını askıya almaz. İstemci taraflı JavaScript, google.script.run() ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla ayrıntı için İstemciden sunucuya iletişim bölümüne bakın.

Dosya açma iletişim kutuları

Dosya açma iletişim kutuları, kullanıcılarınızın Google Drive'larından dosya seçmelerine olanak tanıyan önceden oluşturulmuş iletişim kutularıdır. Eklentinize, tasarlamanız gerekmeden bir dosya açma iletişim kutusu ekleyebilirsiniz ancak bunun için bazı ek yapılandırma gereklidir. Google Picker API'yi etkinleştirmek için eklentinin Cloud Platform projesine de erişmeniz gerekir.

Tüm ayrıntılar için Dosya açma iletişim kutuları konusuna bakın.

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. İletişim kutularından farklı olarak, bir kenar çubuğu açıkken düzenleyici arayüzünün diğer öğeleriyle etkileşimde bulunmaya devam edebilirsiniz. Kenar çubuklarının genişliği sabittir, ancak kenar çubuklarının içeriğini özelleştirebilirsiniz.

Eklenti kenar çubuklarını, Apps Komut Dosyası özel kenar çubukları ile aynı şekilde oluşturursunuz. Genel önerilen prosedür şu şekildedir:

  1. Kenar çubuğunuzun HTML yapısını, CSS'sini ve istemci taraflı JavaScript davranışını tanımlayan bir komut dosyası proje dosyası oluşturun. Kenar çubuğunu tanımlarken Düzenleyici Eklentisi stil yönergelerine bakın.

  2. Kenar çubuğunun açılmasını istediğiniz sunucu tarafı kodunuzda HtmlService.createHtmlOutputFromFile(filename) çağrısı yaparak kenar çubuğunu temsil eden bir HtmlOutput nesnesi oluşturun. Alternatif olarak, şablonlu HTML kullanıyorsanız şablon oluşturmak için HtmlService.createTemplateFromFile(filename) çağrısı yapabilir ve ardından HtmlTemplate.evaluate() öğesini HtmlOutput nesnesine dönüştürebilirsiniz.

  3. HtmlOutput aracını kullanarak kenar çubuğunu görüntülemek için Ui.showSidebar(htmlOutput) numaralı telefonu arayın.

Kenar çubukları, açıkken sunucu tarafı komut dosyasını askıya almaz. İstemci taraflı JavaScript, google.script.run() ve ilişkili işleyici işlevlerini kullanarak sunucu tarafına eşzamansız çağrılar yapabilir. Daha fazla ayrıntı için İstemciden sunucuya iletişim bölümüne bakın.