Lista desplegable en documentos de Google con Barra lateral y HTML Service

como crear una Lista desplegable en Google docs empleando HTML Service para mostrar una barra lateral.

cómo ya lo comentamos en el tema pasado, Google Docs o documentos de Google, no cuenta de forma predeterminada con la opción de listas desplegables, como si la tiene "word" de MS office, así que una de las posibles salidas para contar con esta utilidad es usar HTML Service (Servicio HTML) para mostrar en una barra lateral de tipo web; la lista.

por fortuna el código empleado para lograr esta tarea es simple y solo se requiere de:

Archivo de secuencia de comandos (Código.gs)

una HCG (Hoja de cálculo de Google) de la cual tomaremos los elementos que compondrán la lista desplegable, esto solo para no escribirlos manualmente 😉
un Google Docs o documento de Google , donde se mostrará la lista desplegable.
una función onOpen para crear un menú personalizado desde el cual podremos mandar llamar o ejecutar el script que muestre nuestra barra lateral
.-una función asociada al menú del punto 3 para que muestre la barra lateral, la cual llamaremos "verBarraLateral"
una función que me obtenga o recupere los datos de la HCG (Hoja de cálculo de Google) que conformaran mi lista desplegable, la llamaremos.-"listaDeDatos"
una función que me inserte el elemento seleccionado de la lista desplegable en mi Google Doc., a la cual le daremos el nombre de "InsertaElemento"

aquí un pequeño pantallazo del código mencionado.

HTML Service (servicio HTML de Google):

con el servicio HTML de Google construiremos una pagina web que mostraremos a modo de barra lateral en el documento de Google, tal como se muestra en la siguiente imagen

Creando el menú personalizado

Para crear el menú personalizado, usaremos la función onOpen con 1 solo elemento de menú, que llamaremos barra lateral, haciendo alusión a mostrar una barra lateral en el documento, por supuesto

Código para mostrar la barra lateral.- la función verBarraLateral()

La función verBarraLateral(), propiamente muestra la barra lateral a través el método showSideBar() , al cual se le pasa como argumento el servicio HTML (HTMLService) que se obtuvo en la variable "BL", como se aprecia en el código

Sirviendo el HTML

-Es necesario que exista un archivo de tipo HTML que ne este ejemplo se llama barralateral

var BL = HtmlService.createHtmlOutputFromFile('barraLateral')

para que pueda mostrar lo que existe en ese html, que netre otras cosas usandas son:

los estilos css
una etiqueta de tipo <H3>
3 etiquetas <p> o párrafo
1 <select> que es propiamente el objeto para la lista desplegable que en ese momento esta vacía
un botón o <button> para ejecutar el script que insertara el dato seleccionado en la lista desplegable
el código javascript correspondiente para que haga el trabajo sucio 😀

Revisa el vídeo para ver el paso a paso.(disponible a partir de lunes 28-09-2020 a las 14:00 hrs.)

y en caso necesario , puedes pedir una copia del Google Docs en mi canal de YouTube

Copia: Lista desplegable en Google Docs con HTML Service

Te puede interesar:

Lista desplegable en Google Docs , usando un gráfico de tipo Tabla

dudas y preguntas en mi canal de YouTube

Síguenos en:

código para lista desplegable en Google docs

// ======= en archivo .gs(Google script) ==========

function onOpen(e) {

DocumentApp.getUi()

.createMenu('📜Listas Desplegables')

.addItem('📑 Barra Lateral', 'verBarraLateral')

.addToUi();

}

//----------------------------- barra lateral ------------------------------------

function verBarraLateral() {

var BL = HtmlService.createHtmlOutputFromFile('barraLateral')

.setTitle('😎 Lista Despleg....by Ofimática para Emp')

.setWidth(300);

DocumentApp.getUi().showSidebar(BL);

}

//funcion que obtiene los datos de la HCG

function listaDeDatos(){

var hoja = SpreadsheetApp.openById('aquí va el ID de tu Google Sheets').getSheetByName("Hoja 1");

var lista = new Array();

lista = hoja.getRange("F4:F16").getValues();

//Logger.log(lista)

return lista;

}

//inserta el elemento de la lista en el google doc remplazando los signos ##

// la funcion "enviaDato" ejecuta esta funcion desde el html (ver en barraLateral.html)

function InsertaElemento(dato){

var body = DocumentApp.getActiveDocument().getBody();

body.replaceText("##", dato);

}

//===== fin del archivo .gs ============================

//====esto va en el archivo HTML ======================

<!DOCTYPE html>

<html>

<head>

<style>

body{background-color:lightblue;}

h3{font-family: 'Amatic SC';font-size: 28px;color:green;margin-top:10px;}

p{font-family: 'Architects Daughter';font-size: 15px;color:purple;font-weight:bold;}

select{padding:6px;border-radius:4px;width:120px;}

button{background-color:blue;color:white;padding:10px;border-radius:10px;margin-top:8px;width:110px;border:none;}

a{display:block;margin-top:60%;font-weight:bold;font-family: 'Architects Daughter'} /* margin-top:250px */

button:hover{background-color:black;}

a:hover{background-color:yellow;width:150px}

</style>

</head>

<body>

<div>

<h3>Lista con datos de hoja de calculo</h3>

<p>1.-seleccione una opción</p>

</select>

<p>2.-coloque el cursor donde desea insertar el dato</p>

<p>3.-Escriba ## (signo gato doble) y de click en insertar</p>

</div>

<button id="boton" type="button" onclick="enviaDato()">📌 Insertar</button>

<a href="https://www.youtube.com/c/Ofim%C3%A1ticaparaEmprendedores/videos" target="_blank">🎬 aprende más</a>

window.onload = function(){

//se ejecuta al abrir la aplicación web

google.script.run.withSuccessHandler(llenarDropDownBox).listaDeDatos();

}

function llenarDropDownBox(lista){

//guarda la lista de datos obtenida de la hoja de cálculo

var listadeDatos = lista;

//llena el drop-down box

for (var i = 0; i < 13; i++) { //13 elementos

var elemento = document.createElement("option");

elemento.textContent = listadeDatos[i];

elemento.value = listadeDatos[i];

document.getElementById("select1").appendChild(elemento);

}

function enviaDato(){

//https://www.w3schools.com/jsref/dom_obj_select.asp

google.script.run.InsertaElemento(document.getElementById("select1").value);

document.getElementById("boton").blur(); //quita el foco del boton

//sleep(1000);

//alert('dato insertado'); //opcional

}

</script>

</body>

</html>

//============ fin del archivo HTML =============================

Page updated

Google Sites

Report abuse