Serviço HTML: criar e veicular HTML

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Com o serviço HTML, é possível exibir páginas da Web que podem interagir com funções do Apps Script no servidor. Ele é particularmente útil para criar apps da Web ou adicionar interfaces do usuário personalizadas no Documentos, Planilhas e Formulários Google. Também é possível 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 criar a maioria dos HTMLs padrão, CSS e JavaScript do lado do cliente. A página será veiculada como HTML5, apesar de alguns recursos avançados do HTML5 não estarem disponíveis, conforme explicado em Restrições.

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

Exibir HTML como um app da Web

Para criar um app da Web com o serviço HTML, o 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>

Depois que esse framework básico estiver em vigor, você só precisará salvar uma versão do script e implantar o script como um app da Web.

Após o script ser implantado como um app da Web, você também pode incorporá-lo a um site Google.

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

O serviço HTML pode exibir uma caixa de diálogo ou barra lateral no Documentos, Planilhas, Apresentações ou Formulários Google se o script estiver vinculado ao contêiner no arquivo. No Formulários Google, as interfaces do usuário personalizadas só são 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, uma planilha ou um formulário não precisa de uma função doGet() especificamente, e não é necessário salvar uma versão do script ou implantá-la. 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, o formulário ou a planilha ativa.

Esses exemplos incluem alguns recursos extras por conveniência: 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, execute a função onOpen() manualmente no editor de script ou recarregue a janela do editor do Documentos, Planilhas ou Formulários (o que fechará o editor de scripts). Depois disso, o menu personalizado aparecerá alguns segundos sempre que você abrir o arquivo. Escolha Dialog > Open para ver a interface.