HTML hizmeti, sunucu tarafı Apps Komut Dosyası işlevleriyle etkileşime geçebilecek web sayfaları yayınlamanıza olanak tanır. Özellikle web uygulamaları oluştururken veya Google Dokümanlar, E-Tablolar ve Formlar'a özel kullanıcı arayüzleri eklemek için kullanışlıdır. Hatta bir e-postanın gövdesini oluşturmak için bile kullanabilirsiniz.
HTML dosyası oluşturma
Apps Script projenize HTML dosyası eklemek için aşağıdaki adımları uygulayın:
- Apps Komut Dosyası düzenleyicisini açın.
- Sol tarafta, Dosya ekle > HTML'yi tıklayın.
HTML dosyasında çoğu standart HTML, CSS ve istemci tarafı JavaScript'i yazabilirsiniz. Sayfa HTML5 olarak yayınlanır ancak Kısıtlamalar bölümünde açıklandığı gibi HTML5'in bazı gelişmiş özellikleri kullanılamaz.
Dosyanızda, şablonlu HTML bölümünde açıklandığı gibi, sayfa kullanıcıya gönderilmeden önce sunucuda işlenen şablon komut dosyaları da bulunabilir (PHP'ye benzer).
HTML'yi web uygulaması olarak yayınlama
HTML hizmetiyle bir web uygulaması oluşturmak için kodunuzda, komut dosyasına sayfanın nasıl yayınlanacağını söyleyen bir doGet()
işlevi bulunmalıdır. İşlev, bu örnekte gösterildiği gibi bir HtmlOutput
nesnesi döndürmelidir.
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! </body> </html>
Bu temel çerçeveyi oluşturduktan sonra komut dosyanızın bir sürümünü kaydetmeniz, ardından komut dosyanızı web uygulaması olarak dağıtmanız yeterlidir.
Komut dosyası web uygulaması olarak dağıtıldıktan sonra bir Google Sites sitesine de yerleştirebilirsiniz.
HTML'yi Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar kullanıcı arayüzü olarak sunma
Komut dosyanız dosyaya kapsayıcı bağlıysa HTML hizmeti Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar'da bir iletişim kutusu veya kenar çubuğu gösterebilir. (Google Formlar'da özel kullanıcı arayüzleri, formu yanıt vermek için açan kullanıcılar tarafından değil, yalnızca formu değiştirmek için açan düzenleyiciler tarafından görülebilir.)
Web uygulamalarının aksine, doküman, e-tablo veya form için kullanıcı arayüzü oluşturan bir komut dosyası için özel olarak doGet()
işlevine ihtiyaç yoktur ve komut dosyanızın bir sürümünü kaydetmeniz ya da dağıtmanız gerekmez. Bunun yerine, kullanıcı arayüzünü açan işlev, HTML dosyanızı etkin doküman, form veya e-tablo için Ui
nesnesinin showModalDialog())
veya showSidebar()
yöntemlerine HtmlOutput
nesnesi olarak iletmelidir.
Bu örneklerde, kolaylık sağlamak için birkaç ek özellik bulunmaktadır: onOpen()
işlevi, arayüzü açmayı kolaylaştıran bir özel menü oluşturur ve HTML dosyasındaki düğme, arayüzü kapatmak için google.script.host
API'sinin özel bir close()
yöntemini çağırır.
Code.gs
// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); } function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! <input type="button" value="Close" onclick="google.script.host.close()" /> </body> </html>
Bu kullanıcı arayüzünü ilk kez görüntülemek istediğinizde onOpen()
işlevini komut dosyası düzenleyicisinde manuel olarak çalıştırmanız veya Dokümanlar, E-Tablolar ya da Formlar düzenleyicisinin penceresini yeniden yüklemeniz (bu işlem komut dosyası düzenleyicisini kapatır) gerektiğini unutmayın. Bu işlemden sonra, dosyayı her açtığınızda özel menü birkaç saniye içinde görünür. Arayüzü görmek için İletişim Kutusu > Aç'ı seçin.