HTML Hizmeti: HTML Oluşturma ve Sunma

HTML hizmeti, sunucu tarafı Apps Komut Dosyası işlevleriyle etkileşime geçebilecek 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 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:

  1. Apps Komut Dosyası düzenleyicisini açın.
  2. 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>

Temel çerçeve oluşturulduktan sonra tek yapmanız gereken komut dosyanızın bir sürümünü kaydetmek ve ardından komut dosyanızı web uygulaması olarak dağıtmaktır.

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 uygulamasının aksine, bir doküman, e-tablo veya form için kullanıcı arayüzü oluşturan bir komut dosyasının özel olarak doGet() işlevine ihtiyacı yoktur ve 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 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 > Aç'ı seçin.