Algunas veces queremos utilizar un menú lateral en un documento y queremos utilizarlo para acceder a los elementos del mismo documento.
Aquí les dejamos un pequeño ejercicio para crear un menú lateral y obtener los datos que se almacenan en las tres partes principales de un Google Doc: Header (Cabecera), Body (Cuerpo) y Footer (Pie de página).
La liga al documento con los códigos es: https://docs.google.com/document/d/1MU9BZMKL1nILsNTWEuThCwsbqt7UuoPLu1lGESJPZ7g/edit
Crea una copia del documento, abre el editor de secuencia de comandos y ejecuta la función onOpen() para que des permisos a la aplicación y puedas realizar tus pruebas.
El código se divide en dos archivos dentro del mismo proyecto de Google Apps Script
Código.gs
function onOpen() {
//Al abrir el documento, cargamos el menú lateral
var html = HtmlService.createHtmlOutputFromFile('index');
html.setTitle('Menú Lateral');
html.setWidth(300);
// Cargamos el archivo index.html én el menú lateral
DocumentApp.getUi().showSidebar(html);
}
//Esta función es llamada desde el archivo index.html
//por medio de la linea google.script.run.withSuccessHandler(mostrarResultado).buscarEstructura()
function buscarEstructura(){
//obtenemos el documento activo
var documento = DocumentApp.getActiveDocument();
// obtenemos la cabecera del documento
var cabecera = documento.getHeader();
// obtenemos el cuerpo del documento
var cuerpo = documento.getBody();
// obtenemos el pie de pagina del documento
var pie = documento.getFooter();
var html = "<p>CABECERA: "+cabecera.getText()+"</p>";
html+= "<p>CUERPO: "+cuerpo.getText()+"</p>";
html+= "<p>PIE: "+pie.getText()+"</p>";
// regresamos un valor para mostrar en el código de JavaScript
return html;
}
index.html
<input type="button" value="buscar estructura" onclick="google.script.run.withSuccessHandler(mostrarResultado).buscarEstructura()" />
<div id="resultado"></div>
<script>
function mostrarResultado(html){
var divResultado = document.getElementById("resultado");
divResultado.innerHTML = html;
}
</script>
Vamos a explicar un poco los códigos y cómo funcionan:
Cuando abrimos un documento, de manera predeterminada (por default) se ejecuta la función onOpen().
Ésta función carga el archivo index.html utilizando la clase HtmlService y lo almacena en la variable html.
Asignamos un título y un tamaño (ancho) para la aplicación web.
Y posteriormente cargamos la interfaz de usuario del documento (getUi) para mostrarlo con el método showSidebar.
function onOpen() {
//Al abrir el documento, cargamos el menú lateral
var html = HtmlService.createHtmlOutputFromFile('index');
html.setTitle('Menú Lateral');
html.setWidth(300);
// Cargamos el archivo index.html én el menú lateral
DocumentApp.getUi().showSidebar(html);
}
¿Por qué al método createHtmlOutputFromFile('index') no se le especifica la extensión del archivo?
Al momento de utilizar la clase HtmlService, el método antes mencionado espera siempre un documento HTML, por lo cual no es necesario especificar la extensión del archivo.
Inmediatamente, se carga el archivo index.html.
<input type="button" value="buscar estructura" onclick="google.script.run.withSuccessHandler(mostrarResultado).buscarEstructura()" />
<div id="resultado"></div>
<script>
function mostrarResultado(html){
var divResultado = document.getElementById("resultado");
divResultado.innerHTML = html;
}
</script>
La "magia" de la ejecución de Google Apps Script viene aquí, en el evento "onclick" del botón.
google.script.run.withSuccessHandler(mostrarResultado).buscarEstructura()
Esta línea de código utiliza los servicios asíncronos de la clase google.script y por medio del método "run" y se ejecuta de la manera siguiente:
Ejecuta la función buscarEstructura() que se encuentra en el archivo Código.gs y si el resultado es satisfactorio y no hubo errores (withSuccessHandler)
Ejecuta la función mostrarResultado() de JavaScrtip que se encuentra en index.html
Así, le enviá como parámetro, lo que el comando "return" de la función buscarEstructura() devuelva.
NOTA: también existe una función llama withFailureHandler en caso de que necesites implementar la captura o mensajes de error.
Para mayor información, consulta:
https://developers.google.com/apps-script/guides/html/,
https://developers.google.com/apps-script/reference/html/ y
https://developers.google.com/apps-script/guides/html/reference/run