HCG

lista despegable multi select

Lista desplegable multi select en barra lateral en Google sheets

Hay ocasiones en que necesitamos seleccionar mas de una opción de nuestra lista desplegable y de maner nativa esta utilidad no exist4e, asi que veremos como crear mediante Google apps script y HTML service y mostrar la opción en una barra lateral en nuestra interfaz de Google Sheets

En seguida les presento un breve ejemplo de como se puede realizar una lista desplegable que nos permita hacer esta seleccion de opciones multiples y llevarlas a nuesta hoja de calculo.

ver más contenido

Revisa el vídeo

Revisa el video las veces que consideres necesarias para que puedas implementar correctamente su aplicación

Si ya sabes realizar una lista desplegable simple en una Hoja de calculo de Google (HCG), te invito a que revises el segundo nivel de aplicación de listas desplegables, me refiero a como crear una lista desplegable dependiente de otra lista, claro en una Hoja de calculo de Google (HCG) para lo cual consulta este tema:

Como crear una lista desplegable dependiente de otra lista

Te pude interesar:

Función IMAGE

código-archivo gs

function onOpen() {

SpreadsheetApp.getUi()

.createMenu('Listas Desplegables')

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

.addItem("Select", "ejemploSelectmultiple")

.addToUi();

}

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

function verBarraLateral() {

var BL = HtmlService.createHtmlOutputFromFile('BarraLateral')

.setTitle('Lista Multi-select HTML... by Fredy');

SpreadsheetApp.getUi().showSidebar(BL); // Or DocumentApp or FormApp.

}

//funcion que obtiene los datos de la HCG

function listaDeDatos(){

var hoja = SpreadsheetApp.getActive().getActiveSheet();

var lista = []; //new Array(2000);

lista = hoja.getRange("A1:A2000").getValues();

return lista;

}

function InsertaElemento(datos){

Logger.log(datos);//Logger.log(datos.length);

var hoja = SpreadsheetApp.getActive().getActiveSheet();

var datos = datos.toString();

hoja.getActiveCell().setValue(datos);

}

function InsertaArray(datos){

Logger.log(datos);//Logger.log(datos.length);

var hoja = SpreadsheetApp.getActive().getActiveSheet();

var row = hoja.getActiveCell().getRow(); Logger.log("fila " + row);

var column = hoja.getActiveCell().getColumn(); Logger.log("Columna " + column);

var numRows = datos.length; Logger.log(numRows);

hoja.getRange(row, column, 1,datos.length).setValues([datos]);

//hoja.getRange("B5:C5").setValues([datos]);

}

function InsertaArrayVertical(datos){

Logger.log(datos);//los datos se reciben como un array unidimensional

var hoja = SpreadsheetApp.getActive().getActiveSheet();

var row = hoja.getActiveCell().getRow(); Logger.log("fila " + row);

var column = hoja.getActiveCell().getColumn(); Logger.log("Columna " + column);

var numRows = datos.length; Logger.log("#filas " + numRows);

//getRange(row, column, numRows) para emplear este metodo debe convertirse a array bidimensional

var Ndatos=[];//nuevo array que sera bidimensional

for(var j=0;j<datos.length;j++){

Ndatos.push([datos[j]]);

}

Logger.log(Ndatos);

hoja.getRange(row, column, numRows).setValues(Ndatos);

}

archivo HTML

<!DOCTYPE html>

<html>

<head>

<style>

body{background-color:lightblue;}

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

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

.txt{display:inline-block;vertical-align:super;font-size:17px;font-family: 'Amatic SC';color:red;font-weight:bold;}

/* la clave es la alineacion vertical:"super" para emparejar el tt con el radio boton

ver: https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=baseline

ver: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

*/

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

input[type="radio"]{cursor: pointer;font-family: 'Architects Daughter';height: 22px;width: 22px;}

#varias{margin-left:35px}

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

a{display:block;margin-top:65%;font-weight:bold;} /* margin-top:250px */

button:hover{background-color:black;}

</style>

</head>

<body>

<div>

<h3>Lista multi-select con datos de hoja de calculo</h3>

<p>1.-seleccione una o mas opciones,presione la tecla Ctrl + clic</p>

</select>

<p>2.-seleccione la celda donde desea insertar los datos</p>

<p>3.- Elija el tipo de destino:</p>

<input type="radio" id="celda" name="destino" value="1celda"><p class="txt">1 celda</p>

<input type="radio" id="varias" name="destino" value="envarias"><p class="txt">En varias (horizontal)</p>

<input type="radio" id="vertical" name="destino" value="vertical"><p class="txt">En Varias (vertical)</p>

</div>

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

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 <= 2000; i++) { //2000 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);

var opciones = document.getElementById("select1").options;

let elegidos = [];

for(var i= 0;i< opciones.length;i++){

if(opciones[i].selected == true){

elegidos.push(opciones[i].value);

}

console.log(elegidos);//el error es colocr el console.log dentro del bucle y sacandolo se elimina el problema :)

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

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

// https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked

//https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked2

if(document.getElementById('celda').checked) { //1 sola celda

google.script.run.InsertaElemento(elegidos);

}else if(document.getElementById('vertical').checked){ //array vertical

google.script.run.InsertaArrayVertical(elegidos);

}else if(document.getElementById('varias').checked){ //array horizontal

google.script.run.InsertaArray(elegidos);

}else{//no eligio ninguna opcion de destino para los datos (equivale a :)

//document.getElementById('celda').checked == false && document.getElementById('varias').checked == false && document.getElementById('vertical') == false

alert('debes seleccionar una forma de entrada a la HCG!!\n ver punto 3.-elija un punto de destino');

}

//efectos simples extra:

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

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

}

</script>

</body>

</html>

síguenos en: