Servicio HTML: Crea y publica HTML

El servicio HTML te permite publicar páginas web que puede interactuar con funciones de Apps Script del servidor. Es particularmente útil para crear aplicaciones web o agregar interfaces de usuario personalizadas en Documentos de Google, Hojas de cálculo, y Formularios. Incluso puedes usarlo para generar el cuerpo de un correo electrónico.

Crea archivos HTML

Para agregar un archivo HTML a tu proyecto de Apps Script, sigue estos pasos:

  1. Abre el editor de Apps Script.
  2. A la izquierda, haz clic en Agregar un archivo . > HTML.

En el archivo HTML, puedes escribir la mayoría de los formatos HTML, CSS y del cliente JavaScript: La página se mostrará como HTML5, aunque algunas funciones avanzadas de El formato HTML5 no está disponible, como se explica en Restricciones.

Tu archivo también puede incluir scriptlets de plantillas que se procesan en el servidor antes de que se envíe la página al usuario, similar a PHP, como se explica en el sobre el HTML con plantillas.

Entregar HTML como una aplicación web

Para crear una app web con el servicio HTML, tu código debe incluir una doGet() que le indica a la secuencia de comandos cómo entregar la página. La función debe mostrar un objeto HtmlOutput, como se muestra en este ejemplo.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Una vez que el framework básico esté implementado, guardar una versión de la secuencia de comandos y, luego, implementar la secuencia de comandos como una aplicación web.

Después de implementar la secuencia de comandos como una aplicación web, también puedes Insertarlo en un sitio de Google Sites.

Publica código HTML como interfaz de usuario de Documentos, Hojas de cálculo, Presentaciones o Formularios de Google

El servicio HTML puede mostrar un diálogo o barra lateral. en Documentos, Hojas de cálculo, Presentaciones o Formularios de Google si la secuencia de comandos está container-bound para el archivo. (En Formularios de Google, interfaces de usuario personalizadas solo son visibles para el editor que abre el formulario para modificarlo, no a un usuario que abra el formulario para responder).

A diferencia de una aplicación web, una secuencia de comandos que crea una interfaz de usuario para un documento un formulario o una hoja de cálculo no necesita una función doGet() específicamente, y no es necesario que guardes una versión de tu secuencia de comandos ni la implementes. En cambio, la función que abra la interfaz de usuario debe pasar tu archivo HTML como HtmlOutput al elemento métodos showModalDialog()) o showSidebar() de la objeto Ui para el documento, formulario o en una hoja de cálculo.

Estos ejemplos incluyen algunas funciones adicionales para tu comodidad: onOpen(). crea un menú personalizado para facilitar para abrir la interfaz, y el botón del archivo HTML invoca una interfaz método close() de la la API de google.script.host para cerrar la interfaz de usuario.

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>

Ten en cuenta que la primera vez que quieras mostrar esta interfaz de usuario, debes ejecuta la función onOpen() manualmente en el editor de secuencias de comandos o vuelve a cargar la ventana del editor de Documentos, Hojas de cálculo o Formularios (que cerrará la editor de secuencias de comandos). A continuación, el menú personalizado debería aparecer en unos segundos. cada vez que abras el archivo. Selecciona Diálogo > Abrir para ver la interfaz de usuario.