O serviço HTML permite disponibilizar páginas da Web que podem interagir com as funções do lado do servidor do Apps Script. Ele é particularmente útil para criar apps da Web ou adicionar interfaces de usuário personalizadas a Documentos, Planilhas e Formulários Google. Ele pode ser usado até 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:
- Abra o editor do Apps Script.
- À 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, embora alguns recursos avançados do HTML5 não estejam 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 (como no PHP), conforme explicado na seção sobre HTML modelo.
Disponibilizar 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 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 esse framework básico estiver em vigor, basta 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 do Documentos, Planilhas, Apresentações ou Formulários Google
O serviço HTML pode exibir uma caixa de diálogo ou barra lateral nos Documentos, Planilhas, Apresentações ou Formulários Google se o script estiver vinculado ao contêiner ao arquivo. Nos Formulários Google, as interfaces de usuário personalizadas ficam visíveis apenas 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 de usuário para um documento, planilha ou formulário não precisa de uma função doGet()
especificamente e você não precisa salvar uma versão do script ou implantá-la. 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
do documento, formulário ou planilha
ativo.
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, será necessário
executar a função onOpen()
manualmente no editor de script
ou recarregar a janela do editor de Documentos, Planilhas ou Formulários (que fechará o
editor de script). Depois disso, o menu personalizado aparecerá em alguns segundos
sempre que você abrir o arquivo. Escolha Dialog > Open para ver a
interface.