Lista desplegable de fechas en documentos de Google

como crear una Lista desplegable de fechas en Google docs empleando una barra lateral.

para crear la barra lateral que contendrá la lista desplegable de fechas necesitaremos para el archivo ".gs" o Google script, lo siguiente:

una función onOpen para crear un menú personalizado desde el cual podremos mandar llamar o ejecutar el script que muestre nuestra barra lateral, si deseas saber como crear este menú personalizado te invito a ver este video.- https://youtu.be/GQdpmMA2w0g
una función "verBarraLateral" para ver o mostrar la barra lateral en la interfaz del usuario
una función "listaDeDatos" para obtener los datos de tipo fecha que se obtendrán de una Google Sheets
una función "InsertaElemento "para insertar las fechas seleccionadas de la barra lateral al documento
un Google Docs o documento de Google , donde se mostrará la lista desplegable.

para la parte relativa a HTML y CSS crearemos un archivo .html desde el menu del editor de secuencia de comandos, el etiquetado y los estilos los puedes ver al final

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 como y a mencioné puedes ir al ver este video para más detalles https://youtu.be/GQdpmMA2w0g

en este ejemplo de la imagen hay 2 elementos pero el segundo no es necesario para que funcione la barra lateral y el código asociado al insertado de fechas

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 en este ejemplo se llama BL.html

var bl = HtmlService.createHtmlOutputFromFile('BL')

para que pueda ver lo que existe en ese archivo html, que entre otras cosas usadas 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 de insertar la fecha😀

Video de apoyo

aprender más

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 gs

function onOpen(e) {

DocumentApp.getUi()

.createMenu('📆 Lista Fechas')

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

.addItem('📍 mensaje', 'buscaTxto')

.addToUi();

}

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

function verBarraLateral() {

var bl = HtmlService.createHtmlOutputFromFile('BL')

.setTitle('📆 Fechas....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('1fem4lODSJKN7Kat7xSPwpWngzbFm9xTJAvIoBFsGgo4').getSheetByName("Hoja 1");

lista = hoja.getRange("H4:H16").getDisplayValues();

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();

if(body.findText('##') !== null){

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

}else{

DocumentApp.getUi().alert("📢 Aviso:\nNo has escrito el signo doble de ##!!\n🔴 Verifica la instrucción 3");

}

código html y css

<!DOCTYPE html>

<html>

<head>

<style>

body{background-color:Bisque;}

h3{font-family: 'Amatic SC';font-size: 26px;color:DarkSlateGray;margin-top:10px;

padding:5px;background-color:Ivory;text-align:center;border-radius:8px;}

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

select{padding:6px;border-radius:6px;height:30px;border:1px solid grey;color:DarkSlateGray;}

button{background-color:blue;color:white;padding:10px;border-radius:23px;

margin-top:8px;width:110px;heigth:46px;border:none;}

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

button:hover{background-color:black;}

marquee{width:90%;display:block;scrollamount:12;direcction:left;}

marquee p{font-size:18px;}

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

</style>

</head>

<body>

<div>

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

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

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

<p>🚗-----3. Escriba &#9997 el signo gato/almohadilla doble (##) y de click en insertar &#128204</p>

</marquee>

</div>

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

<a href="https://www.youtube.com/channel/UCWwxqBe1XjyLfbQy50HhEtQ?view_as=subscribe"

target="_blank">&#127916 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

}

</script>

</body>

</html>

Page updated

Google Sites

Report abuse