Servizio HTML: crea e pubblica HTML

Il servizio HTML ti consente di pubblicare pagine web che possono interagire con le funzioni Apps Script lato server. È particolarmente utile per creare app web o aggiungere interfacce utente personalizzate in Documenti, Fogli e Moduli Google. 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 di codice HTML, CSS e JavaScript lato client. La pagina verrà pubblicata come HTML5, sebbene alcune funzionalità avanzate di HTML5 non siano disponibili, come spiegato nella sezione Limitazioni.

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

Pubblicare HTML come un'app web

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

Codice.gs

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

Indice.html

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

Una volta creato il framework di base, è sufficiente salvare una versione dello script e eseguire il deployment dello script come app web.

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

Pubblica HTML come interfaccia utente di Documenti, Fogli, Presentazioni o Moduli Google

Il servizio HTML può visualizzare una finestra di dialogo o una barra laterale in Documenti, Fogli, Presentazioni o Moduli Google se lo script è collegato al container al file. In Moduli Google, le interfacce utente personalizzate sono visibili solo a un editor che apre il modulo per modificarlo e 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, un foglio di lavoro o un modulo non ha bisogno di una funzione doGet() specifica e non è necessario salvare una versione dello script o eseguirne il deployment. La funzione che apre l'interfaccia utente, invece, deve trasmettere il file HTML come oggetto HtmlOutput ai metodi showModalDialog()) o showSidebar() dell'oggetto Ui per il documento, il modulo o il foglio di lavoro attivo.

Ecco alcuni esempi di funzionalità aggiuntive: la funzione onOpen() crea un menu personalizzato che facilita l'apertura dell'interfaccia e il pulsante nel file HTML richiama uno speciale metodo close() dell'API google.script.host per chiudere l'interfaccia.

Codice.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');
}

Indice.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

La prima volta che vuoi visualizzare questa interfaccia utente, devi eseguire la funzione onOpen() manualmente nell'editor degli script o ricaricare la finestra dell'editor di documenti, fogli o moduli (che chiuderà l'editor di script). In seguito, il menu personalizzato dovrebbe apparire entro pochi secondi ogni volta che aprirai il file. Scegli Finestra di dialogo > Apri per visualizzare l'interfaccia.