Serviço HTML: criar e exibir HTML

O serviço HTML permite veicular páginas da Web que podem interagir com funções do Apps Script do lado do servidor. Ele é especialmente útil para criar apps da Web ou adicionar interfaces de usuário personalizadas no Google Docs, no Google Planilhas e no Formulários. Você pode até usar 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 do Apps Script.
  2. À esquerda, clique em Adicionar um arquivo > HTML.

No arquivo HTML, é possível escrever a maioria dos códigos HTML, CSS e JavaScript do lado do cliente padrão. A página é veiculada como HTML5, mas alguns recursos avançados do HTML5 não estão 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.

Servir HTML como um app da Web

Para criar um web app com o serviço HTML, seu código precisa incluir uma função doGet que informa ao script como veicular a página. A função precisa retornar um objeto HtmlOutput, conforme mostrado 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 pronta, basta salvar uma versão do script e implantar o script como um web app.

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

Servir HTML como uma interface de usuário dos apps Google Docs, Planilhas, Apresentações ou Formulários Google

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

Ao contrário de um app da Web, um script que cria uma interface do usuário para um documento, uma planilha ou um formulário não precisa de uma função doGet específica, e você não precisa salvar nem implantar uma versão do script. Em vez disso, a função que abre a interface do usuário precisa transmitir seu arquivo HTML como um objeto HtmlOutput 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 sua conveniência: a função onOpen cria um menu personalizado que ajuda você 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, será necessário executar a função onOpen manualmente no editor de scripts ou recarregar a janela do editor de Documentos, Planilhas ou Formulários (que fecha o editor de scripts). Depois disso, o menu personalizado aparece em alguns segundos sempre que você abre o arquivo. Para conferir a interface, escolha Dialog > Open.