HTML Hizmeti: HTML Oluşturma ve Sunma

HTML hizmeti, sunucu tarafı Apps Komut Dosyası işlevleriyle etkileşimde bulunabilecek web sayfaları sunmanı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. Bunu bir e-postanın gövdesini oluşturmak için de kullanabilirsiniz.

HTML dosyaları oluşturma

Apps Komut Dosyası projenize HTML dosyası eklemek için aşağıdaki adımları uygulayın:

  1. Apps Komut Dosyası düzenleyicisini açın.
  2. Solda, Dosya ekle > HTML'yi tıklayın.

HTML dosyası içinde çoğu standart HTML, CSS ve istemci taraflı JavaScript yazabilirsiniz. Sayfa HTML5 olarak sunulacak olsa da Kısıtlamalar bölümünde açıklandığı gibi HTML5'in bazı gelişmiş özellikleri kullanılamaz.

Dosyanız, şablonlu HTML ile ilgili bölümde açıklandığı gibi, sayfa kullanıcıya gönderilmeden önce PHP'ye benzer şekilde sunucuda işlenen şablon komut dosyaları da içerebilir.

HTML'yi web uygulaması olarak sunma

HTML hizmetiyle bir web uygulaması oluşturmak için kodunuzun, komut dosyasına sayfanın nasıl sunulacağını bildiren bir doGet() işlevi içermesi gerekir. İş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ı bir web uygulaması olarak dağıtıldıktan sonra komutu bir Google sitesine de yerleştirebilirsiniz.

HTML'yi Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar kullanıcı arayüzü olarak sunma

Komut dosyanız dosya için kapsayıcıya bağlı ise HTML hizmeti Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar'da bir iletişim kutusu ya da kenar çubuğu görüntüleyebilir. (Google Formlar'da özel kullanıcı arayüzleri, yalnızca formu değiştirmek için formu açan düzenleyen tarafından görülebilir, yanıt vermek için formu açan kullanıcı tarafından görülemez.)

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 bir HtmlOutput nesnesi olarak iletmelidir.

Bu örneklerde kolaylık sağlamak amacıyla birkaç ekstra ö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'nin ö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üzenleyicide manuel olarak çalıştırmanız veya Dokümanlar, E-Tablolar veya Formlar düzenleyicisi için pencereyi yeniden yüklemeniz gerekir (bu işlem komut dosyası düzenleyiciyi kapatır). Bundan 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.