Servicio HTML: Cree y publique HTML

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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

Crear archivos HTML

Para agregar un archivo HTML a su proyecto de Apps Script, siga estos pasos:

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

Dentro del archivo HTML, puedes escribir la mayoría de los códigos HTML, CSS y JavaScript del cliente. La página se mostrará como HTML5, aunque algunas funciones avanzadas de HTML5 no están disponibles, como se explica en Restricciones.

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

Entregar HTML como una aplicación web

Para crear una aplicación web con el servicio HTML, tu código debe incluir una función doGet() que le indique 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');
}

Índice html

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

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

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

Entregar 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 una barra lateral en Documentos, Hojas de cálculo, Presentaciones o Formularios de Google si tu secuencia de comandos está vinculada con un contenedor al archivo. (En Formularios de Google, las interfaces de usuario personalizadas solo son visibles para un editor que abre el formulario a fin de modificarlo, no para un usuario que abre el formulario para responder).

A diferencia de una aplicación web, una secuencia de comandos que crea una interfaz de usuario para un documento, una hoja de cálculo o un formulario no necesita una función doGet() en particular, y no necesitas guardar una versión de la secuencia de comandos ni implementarla. En su lugar, la función que abre la interfaz de usuario debe pasar el archivo HTML como un objeto HtmlOutput a los métodos showModalDialog()) o showSidebar() del objeto Ui para el documento, el formulario o la hoja de cálculo activos.

En estos ejemplos, se incluyen algunas funciones adicionales para mayor comodidad: la función onOpen() crea un menú personalizado que facilita la apertura de la interfaz, y el botón del archivo HTML invoca un método close() especial de la API de google.script.host para cerrar la interfaz.

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');
}

Índice 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 ejecutar la función onOpen() de forma manual en el editor de secuencias de comandos o volver a cargar la ventana del editor de Documentos, Hojas de cálculo o Formularios (que cerrará el editor de secuencias de comandos). Luego, el menú personalizado debería aparecer en unos segundos cada vez que abras el archivo. Selecciona Abrir diálogo para ver la interfaz.