Serviço HTML: criar e exibir HTML

O serviço HTML permite exibir páginas da Web que podem interagir com funções do Apps Script do lado do servidor. Ele é particularmente útil para criar apps da Web ou adicionar interfaces personalizadas no Documentos, Planilhas e Formulários Google. Você pode até usá-lo para gerar o corpo de um e-mail.

Criar arquivos HTML

Para adicionar um arquivo HTML ao seu projeto do Apps Script, siga estas etapas:

  1. Abra o editor de script do Apps Script.
  2. À esquerda, clique em Adicionar um arquivo > HTML.

No arquivo HTML, você pode escrever a maioria dos códigos HTML, CSS e JavaScript do lado do cliente. A página é exibida como HTML5, embora alguns recursos avançados do HTML5 não estejam disponíveis, conforme explicado em Restrições.

Seu arquivo também pode incluir scriptlets de modelo que são processados no servidor antes que a página seja enviada ao usuário, semelhante ao PHP, conforme explicado na seção sobre HTML com modelo.

Exibir HTML como um app da Web

Para criar um app da Web com o serviço HTML, seu código precisa incluir uma função doGet que informa ao script como exibir a página. A função precisa retornar um HtmlOutput objeto, conforme mostrado em neste exemplo.

Code.gs

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

Index.html

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

Depois que essa estrutura básica estiver instalada, tudo o que você precisa fazer é salvar uma versão do script e, em seguida, implantá-lo como um app da Web.

Depois que o script for implantado como um app da Web, você também poderá incorporá-lo a um site do Google.

Exibir HTML como uma interface do usuário do Documentos, Planilhas, Apresentações ou Formulários Google

O serviço HTML pode mostrar uma caixa de diálogo ou barra lateral no Documentos, Planilhas, Apresentações ou Formulários Google se o script estiver vinculado ao arquivo. Nos Formulários Google, as interfaces do usuário personalizadas só ficam visíveis para um editor que abre o formulário para modificá-lo, não para um usuário que o abre para responder.

Ao contrário de um app da Web, um script que cria uma interface do usuário para um documento, planilha ou formulário não precisa de uma função doGet específica, e você não precisa salvar uma versão do script ou implantá-lo. Em vez disso, a função que abre a interface do usuário precisa transmitir o arquivo HTML como um HtmlOutput objeto para os métodos showModalDialog ou showSidebar do objeto Ui para o documento, formulário ou planilha ativos.

Esses exemplos incluem alguns recursos extras para conveniência: a onOpen função cria um menu personalizado que ajuda a abrir a interface, e o botão no arquivo HTML chama google.script.host.close para fechar a interface.

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>

Na primeira vez que você quiser mostrar essa interface do usuário, você deve executar a função onOpen manualmente no editor de script ou recarregar a janela do editor do Documentos, Planilhas ou Formulários (que fecha o editor de script). Depois disso, o menu personalizado aparece em alguns segundos sempre que você abre o arquivo. Para ver a interface, escolha Caixa de diálogo > Abrir.