Serviço HTML: criar e veicular HTML

O serviço HTML permite veicular páginas da Web que podem interagir com funções do lado do servidor do Apps Script. Ele é particularmente útil para criar apps da Web ou adicionar interfaces de usuário personalizadas aos 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 do Apps Script.
  2. À esquerda, clique em Adicionar um arquivo > HTML.

No arquivo HTML, é possível escrever a maior parte do HTML, CSS e JavaScript do lado do cliente. A página é veiculada como HTML5, mas alguns recursos avançados de HTML5 não estão disponíveis, conforme explicado em Restrições.

O arquivo também pode incluir scripts de modelo que são processados no servidor antes do envio da página ao usuário, de maneira semelhante ao PHP, conforme explicado na seção sobre HTML modelado.

Disponibilizar HTML como um aplicativo da Web

Para criar um app da Web com o serviço HTML, seu código precisa incluir uma função doGet() que informe ao script como exibir 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>

Quando essa estrutura básica estiver em vigor, tudo o que você precisará fazer é salvar uma versão do script e implantar o script como um app da Web.

Depois que o script for implantado como um app da Web, também será possível incorporá-lo a um site Google.

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

O serviço HTML pode exibir uma caixa de diálogo ou uma barra lateral nos Documentos, Planilhas, Apresentações ou Formulários Google se o script estiver vinculado a contêiner 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 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, planilha ou formulário, não precisa da função doGet() especificamente e não é necessário salvar nem implantar uma versão do script. Em vez disso, a função que abre a interface do usuário precisa transmitir o arquivo HTML como um objeto HtmlOutput para os métodos showModalDialog()) ou showSidebar() do objeto Ui para o documento, formulário ou planilha ativo.

Esses exemplos incluem alguns recursos extras: a função onOpen() cria um menu personalizado que facilita a abertura da interface, e o botão no arquivo HTML invoca um método close() especial da API google.script.host 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 exibir essa interface do usuário, será necessário executar a função onOpen() manualmente no editor de script ou recarregar a janela do editor de arquivos do Documentos, Planilhas ou Formulários, que fechará o editor. Depois disso, o menu personalizado aparecerá em alguns segundos sempre que você abrir o arquivo. Escolha Dialog > Open para ver a interface.