Servizio HTML: creazione e pubblicazione di HTML

Il servizio HTML ti consente di pubblicare pagine web che possono interagire con le funzioni di Apps Script lato server. È particolarmente utile per creare app web o aggiungere interfacce utente personalizzate in Documenti, Fogli Google, e Moduli. Puoi anche utilizzarlo per generare il corpo di un'email.

Creare file HTML

Per aggiungere un file HTML al tuo progetto Apps Script, segui questi passaggi:

  1. Apri l'editor di Apps Script.
  2. A sinistra, fai clic su Aggiungi un file > HTML:

All'interno del file HTML puoi scrivere la maggior parte dei codici HTML, CSS e lato client standard JavaScript. La pagina verrà pubblicata in formato HTML5, nonostante alcune funzioni avanzate Gli asset HTML5 non sono disponibili, come spiegato nella Limitazioni.

Il file può anche includere scriptlet modello elaborati sul server prima che la pagina venga inviata all'utente, in modo simile a PHP, come spiegato nella sezione sull'HTML basato su modelli.

Pubblica HTML come app web

Per creare un'app web con il servizio HTML, il codice deve includere un elemento doGet() che indica allo script come pubblicare la pagina. La funzione deve restituire un oggetto HtmlOutput, come mostrato in in questo esempio.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Una volta definita questa struttura di base, non devi fare altro che salva una versione dello script, quindi eseguire il deployment dello script come un'app web.

Dopo aver eseguito il deployment dello script come app web, puoi anche incorporarlo in un sito Google.

Utilizza il codice HTML come interfaccia utente di Documenti, Fogli, Presentazioni o Moduli Google

Il servizio HTML può visualizzare una finestra di dialogo o barra laterale in Documenti, Fogli, Presentazioni o Moduli Google se lo script è container-bound al file. (In Moduli Google, le interfacce utente personalizzate sono visibili solo a un editor che apre il modulo modificarlo, non a un utente che apre il modulo per rispondere.)

A differenza di un'app web, uno script che crea un'interfaccia utente per un documento, il foglio di lavoro o il modulo non richiede specificamente una funzione doGet(), inoltre devi non c'è bisogno di salvare una versione o di eseguirne il deployment. Al contrario, la funzione che apre l'interfaccia utente deve passare il file HTML come HtmlOutput all'oggetto showModalDialog()) o showSidebar() del metodo Oggetto Ui per il documento, il modulo o il modulo attivo in un foglio di lavoro.

Questi esempi includono alcune funzionalità aggiuntive per maggiore praticità: onOpen() crea un menu personalizzato che semplifica per aprire l'interfaccia e il pulsante nel file HTML richiama uno speciale close() del metodo API google.script.host per chiudere a riga di comando.

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>

Tieni presente che la prima volta che vuoi visualizzare questa interfaccia utente, devi esegui la funzione onOpen() manualmente nell'editor di script oppure ricarica la finestra dell'editor di Documenti, Fogli o Moduli (che chiuderà editor di script). Dopodiché, il menu personalizzato dovrebbe apparire entro pochi secondi ogni volta che apri il file. Scegli Finestra di dialogo > Apri per vedere a riga di comando.