HTML Hizmeti: HTML Oluşturma ve Sunma

HTML hizmeti, sunucu tarafındaki Apps Komut Dosyası işlevleriyle etkileşimde bulunabilen web sayfaları yayınlamanıza olanak tanır. Özellikle Google Dokümanlar, E-Tablolar ve Formlar'da web uygulamaları oluşturmak veya özel kullanıcı arayüzleri eklemek için kullanışlıdır. Hatta bunu e-posta gövdesi 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ında, çoğu standart HTML, CSS ve istemci tarafı JavaScript'i yazabilirsiniz. Sayfa HTML5 olarak sunulur ancak Kısıtlamalar bölümünde açıklandığı gibi HTML5'in bazı gelişmiş özellikleri kullanılamaz.

Dosyanız, şablonlu HTML bölümündeki bölümde açıklandığı gibi, sayfa kullanıcıya gönderilmeden önce sunucuda işlenen şablon komut dosyalarını (PHP'ye benzer) de içerebilir.

HTML'yi web uygulaması olarak sunun

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 tek yapmanız gereken komut dosyanızın bir sürümünü kaydetmek, ardından komut dosyanızı bir web uygulaması olarak dağıtmaktır.

Komut dosyası web uygulaması olarak dağıtıldıktan sonra 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 ya da kenar çubuğu görüntüleyebilir. (Google Formlar'da özel kullanıcı arayüzleri, yalnızca formu değiştirmek üzere açan düzenleyiciler tarafından görülebilir, yanıt vermek için formu açan kullanıcılar tarafından görülmez.)

Web uygulamalarının aksine; bir doküman, e-tablo veya form için kullanıcı arayüzü oluşturan komut dosyalarında özel olarak doGet() işlevi bulunmaz. Komut dosyanızın bir sürümünü kaydetmeniz veya 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 geçirmelidir.

Bu örnekler, kolaylık sağlamak için sunulan birkaç ek özelliği içerir: onOpen() işlevi, arayüzün açılmasını 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 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 ya da Formlar düzenleyicisinin penceresini yeniden yüklemeniz (komut dosyası düzenleyiciyi kapatmanız) gerektiğini unutmayın. Bundan sonra, dosyayı her açtığınızda özel menü birkaç saniye içinde görünecektir. Arayüzü görmek için İletişim Kutusu > Aç'ı seçin.