HTML Hizmeti: HTML Oluşturma ve Sunma

HTML hizmeti, kullandığınız web sayfaları için sunucu tarafı Apps Komut Dosyası işlevleriyle etkileşime geçebilir. Bu, özellikle Google Dokümanlar, Google E-tablolar ve Google Dokümanlar veya E-Tablolar'da özel kullanıcı ve Formlar. 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. Sol taraftan Dosya ekle'yi tıklayın. > HTML.

HTML dosyası içinde çoğu standart HTML, CSS ve istemci taraflı JavaScript'e dokunun. Sayfa HTML5 olarak sunulacak olsa da Şurada açıklandığı gibi HTML5 kullanılamaz: Kısıtlamalar.

Dosyanız sunucuda işlenen şablon komut dosyası uygulamalarını da içerebilir - PHP'ye benzer şekilde, sayfa kullanıcıya gönderilmeden önce şablonlu HTML bölümünü inceleyin.

HTML'yi web uygulaması olarak sunma

HTML hizmetiyle bir web uygulaması oluşturmak için kodunuzun bir doGet() içermesi gerekir. işlevi görür. İşlev, gösterildiği gibi bir HtmlOutput nesnesi açıklayacağım.

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ü kaydedin, ardından komut dosyanızı web uygulaması olarak dağıtın.

Komut dosyası web uygulaması olarak dağıtıldıktan sonra şunları da yapabilirsiniz: Google Sites sitesine yerleştirebilirsiniz.

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

HTML hizmeti bir iletişim kutusu veya kenar çubuğu görüntüleyebilir Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar'da kapsayıcıya bağlı olması gerekir. (Google Formlar'da özel kullanıcı arayüzleri yalnızca formu açan düzenleyici tarafından görülebilir. bunu, formu açan bir kullanıcıya değil, buna göre değiştirebilirsiniz.)

Dokümanlar için kullanıcı arayüzü oluşturan bir komut dosyası, web uygulamalarının aksine veya form için özel olarak bir doGet() işlevi gerekli değilse ve komut dosyanızın bir sürümünü kaydetmeniz veya dağıtmanız gerekmez. Bunun yerine, HTML dosyanızı HtmlOutput showModalDialog()) veya showSidebar() yöntemleri Ui nesnesini tanımlayın: e-tablo kullanarak yapabilirsiniz.

Bu örneklerde kolaylık sağlamak amacıyla birkaç ekstra özellik yer almaktadır: onOpen() işlevi, bu işlevi kolaylaştıran bir özel menü oluşturur düğmesini tıklayabilirsiniz. HTML dosyasındaki düğme, koddaki özel bir close() yöntemini içeren kapatmak için google.script.host API kullanı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 ya onOpen() işlevini çalıştırın ya da komut dosyası düzenleyicide manuel olarak veya Dokümanlar, E-Tablolar veya Formlar düzenleyicisi için pencereyi yeniden yükleyin (bu işlem, komut dosyası düzenleyici). Bundan sonra, özel menü birkaç saniye içinde görünecektir tıklayın. İletişim kutusu > Şunu görmek için açın: kullanır.