Serviço HTML: criar e exibir HTML

O serviço HTML permite exibir páginas da Web que interagem com as funções do Apps Script do lado do servidor. Ele é especialmente útil para criar apps da Web ou adicionar interfaces de usuário personalizadas a Documentos, Planilhas, e Formulários. 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 padrão, CSS e do código do JavaScript. A página será veiculada como HTML5, embora alguns recursos avançados do HTML5 não estão disponíveis, como explicado no Restrições.

Seu arquivo também pode incluir scriptlets de modelo que são processados no servidor antes de a página ser enviada ao usuário (semelhante ao PHP), conforme explicado nos sobre HTML modelado.

Disponibilizar HTML como um app da Web

Para criar um app da Web com o serviço HTML, seu código precisa incluir um doGet(). que informa ao script como exibir a página. A função precisa retornar um objeto HtmlOutput, 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 em vigor, tudo o que você precisa fazer é salve uma versão do seu script e faça o seguinte: 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 em um site Google.

Veicular HTML como uma interface do usuário dos apps 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 for container-bound ao arquivo. (No Formulários Google, interfaces de 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 aplicativo da web, um script que cria uma interface de usuário para um documento, planilha ou formulário não precisa de uma função doGet() especificamente, e você precisa não é preciso salvar ou implantar uma versão do script. Em vez disso, a função que abre a interface do usuário deve passar seu arquivo HTML como um objeto HtmlOutput ao métodos showModalDialog()) ou showSidebar() da objeto Ui para o documento, formulário ou planilha.

Estes exemplos incluem alguns recursos extras para conveniência: onOpen() cria um menu personalizado que facilita para abrir a interface, e o botão no arquivo HTML invoca uma chamada especial close() da API google.script.host para fechar o interface gráfica do usuário.

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, é necessário execute a função onOpen() manualmente no editor de script ou recarregue a janela do editor do Documentos, Planilhas ou Formulários Google (que fechará a editor de script). Depois disso, o menu personalizado deve aparecer em alguns segundos sempre que abrir o arquivo. Selecione Caixa de diálogo > Abra para conferir interface gráfica do usuário.