HtmlService Básico

HtmlService es una clase muy interesante dentro de Google Apps Script, ya que te permite utilizar el poder de Html5 dentro dentro de tus scripts, desgraciadamente, algunas veces nos confundimos en el tipo de función que podemos utilizar y cómo aplicarla. Hoy veremos algunos ejemplos básicos de cómo se utiliza ésta clase.

Utilizaremos una hoja de cálculo de Google Spreadsheets como herramienta para mostrar un menú con las opciones que necesitamos. Si no sabes cómo crear menús, puedes segur los pasos que indicamos en éste tutorial. Para más información te recomendamos que revises previamente cómo crear menús personalizados en https://developers.google.com/apps-script/guides/menus.

Archivo con los códigos (https://docs.google.com/spreadsheets/d/1QmYGeG0RVuKkIqPWBWt2TrFcr1oTdwY-zdm8vjNGo_4/edit?usp=sharing), crea una copia del archivo en tu Google Drive y sigue nuestra guía.

Dentro del archivo, abre el Editor de secuencias de comandos desde el menú Heramientas>Editor de secuencias de comandos.

Encontrarás 3 archivos:

• • Código.gs. Archivo principal que contiene la función onOpen(), la cual se ejecuta al abrir la hoja de cálculo y te pide autorización para accesar a los servicios de las API's y clases de Google.

  • archivo1.html. Archivo que se utiliza en el código.

  • archivo2.html. Archivo que se utiliza en el código.

Código.gs

function onOpen(){

// creamos un menú obteniendo la User Interface (getUi)

// del Spreadsheet y le asignamos un nombre al menú principal

// en peste caso le hemos puesto: "HtmlService"

var menu = SpreadsheetApp.getUi().createMenu("HtmlService");

// Agregamos un elemento al menú con addItem("titulo del menú", "funcion_a_ejecutar")

// Las funciones deben ir entre comillas dobles, por que es el nombre de éstas

menu.addItem("HtmlService Simple", "HtmlServiceSimple");

// idem

menu.addItem("HtmlService desde archivo", "HtmlServiceDesdeArchivo");

// idem

menu.addItem("HtmlService template por parametro", "HtmlServiceDesdeTemplatePorParametro");

// idem

menu.addItem("HtmlService template desde archivo ", "HtmlServiceDesdeTemplateDesdeArchivo");

// Agregamos el menú a la User Interface por medio del método addToUi

menu.addToUi();

}

// La clase HtmlService nos permite utilizar Html para interactuar con la interfaz web

// Más información es: https://developers.google.com/apps-script/guides/html/

// Muestra un mensaje simple en HTML creado a partir de una línea html

// o variable con contenido html

function HtmlServiceSimple(){

// creamos una variable con contenido html

var miHtml = "<b>Hola mundo</b>";

// asignamos la salida del servicio HTML a una variable

var html = HtmlService.createHtmlOutput(miHtml);

// mostramos el resultado del Html en el Spreadsheet activo

SpreadsheetApp.getActiveSpreadsheet().show(html);

}

function HtmlServiceDesdeArchivo(){

// creamos una variable que recibe la salida html del archivo1

// NO es necesario especificar que es un archivo con extensión html

// ya que Google Apps Script lo detecta

// Es importante destacar que simpre debe ser un archivo html

// no puede ser uno con extensión .gs

var html = HtmlService.createHtmlOutputFromFile("archivo1");

SpreadsheetApp.getActiveSpreadsheet().show(html);

}

// A diferencia de los ejemplos anteriores,

// aquí se crea un archivo a partir de un template o platilla

// Al ser una plantilla, las líneas de código integradas

// entre "<? y ?> son interpretadas por GAS,

// tal cual sucedería en cualquier otro lenguaje de script interpretado para web

function HtmlServiceDesdeTemplatePorParametro(){

// Se añade el método .evaluate() para que se pueda evaluar

// o interpretar las funciones de Google Apps Script

// que van integradas en el código

var html = HtmlService.createTemplate("Hola mundo, la hora es <?= new Date() ?>").evaluate();

SpreadsheetApp.getActiveSpreadsheet().show(html);

}

// En éste caso, se interpreta el código del archivo2,

// el cual analizaremos más a fondo

function HtmlServiceDesdeTemplateDesdeArchivo(){

var html = HtmlService.createTemplateFromFile("archivo2").evaluate();

SpreadsheetApp.getActiveSpreadsheet().show(html);

}

archivo1.html

<div>

hola mundo desde archivo1

</div>

archivo2.html

<b>Hola mundo, la hora es <i> <?= new Date() ?></i> </b>

<? for(x=0; x<5; x++){ ?>

<p>el número es <?= x ?></p>

<? } ?>

Analicemos el código del archivo2.html

<b>Hola mundo, la hora es <i> <?= new Date() ?> </i> </b>

<? for(x=0; x<5; x++){ ?>

<p>el número es <?= x ?> </p>

<? } ?>

Si observamos detenidamente, existen dos tipos de códigos interpretados, los que se imprimen y los que no se imprimen en pantalla.

Aquellos que inician con la indicación <? son interpretados pero NO se imprimen en pantalla.

Y aquellos que inician con <?= con interpretados y se imprimen en pantalla. Es muy similar a usar algún tipo de función al estilo "printf()".

Esperamos que hayan disfrutado éste ejercicio y les sea de utilidad.

Para más información, no olviden consultar la ayuda de Google Apps Developers:

https://developers.google.com/apps-script/guides/html/

https://developers.google.com/apps-script/guides/menus

Si tienen más dudas, pueden consultar la sección de Foro de discusión y poner sus dudas o compartir su experiencia.