Embedded Files
como incrustar o embeber un formulario de google dentro de un archivo google sheets mediante google apps script y html service
como incrustar o embeber un formulario de google dentro de un archivo google sheets mediante google apps script y html service
Una de las cosas que es muy común usar es la combinación de un formulario de Google para capturar información en un archivo Google Sheets, el problema que surge con esto es que ambos funciona en una venta independiente por lo que tenemos que esta cambiando de ventana web para ver como se comportan los datos enviados al Google Sheets .
por ello he decidido resolver este pequeño inconveniente para ver dentro de la misma interfaz al formulario sin dejar de ver mi Google Sheets
Como lo logre.-pues básicamente de una forma muy sencilla y fácil, mediante los servicios html de Google también llamados HTML Service por su nombre en ingles, podemos nosotros mostrar el formulario dentro de la misma interfaz de Sheets y ver como se capturan los datos en tiempo real
Aquí tenemos nuestra HCG y un botón personalizado para llamar a nuestro formulario
para asignar un script al botón solo es necesario dar clic derecho en la imagen del botón y asignar la función que deseamos se ejecute, pero si necesitas mas información, hay varias maneras de ejecutar código, para lo cual te dejo este video: 4 formas de ejecutar macros y script en Google Sheets
dicho lo anterior pasemos a revisar el código
podemos ver que tenemos una única función compuesta de los siguientes elementos
una constante "html" que hace referencia aun iframe que contiene la url o dirección web de nuestro formulario
¿pero que es un iframe?.- es parte del etiquetado html ("iframe" es una etiqueta como muchas otras en html) que hace referencia a cierto contenido que puede ser alojado dentro de dicha etiqueta
asi pues vemos que el iframe tiene un "scr" que no es mas que el origen o la url del formulario
también contiene en este caso etiquetas "css" para definir el ancho(width), el alto(height), el borde de los márgenes
¿Cómo se obtiene ese iframe de forma fácil?.- solo tines que ir a tu formulario en modo de edición y desde ahí dar clic en el botón morado "Enviar" que está en la esquina suerior derecha y se abrirá una ventana, debes buscar la opción con el símbolo de código "< >" (sin las comillas claro) y desde ahi obtener todo el iframe
aquí te muestro como se vería la ventana para obtener el iframe
puedes observar que para personalizar el ancho y alto del iframe cuenta con opciones para redimensionar su altura y anchura en pixeles
bien continuemos con el código
después del iframe tenemos otra constante (ver la segunda imagen) denominada htmlApp, mediante la cual llamamos propiamente al servicio html de Google
const htmlApp = HtmlService.createHtmlOutput(html)
const htmlApp = HtmlService.createHtmlOutput(html)
en donde le pasamos como parametro todo el contendo html del iframe que tenemos en la constante primera llamada "html"
después le asignamos un titulo (setTitle), un ancho y un alto determinados que será la ventana web que aparecerá en la interfaz de nuestra Google Sheets y finalmente mediante el método "show" mostramos esa ventana web dentro de nuestra hoja de calculo, tal como se ve en la imagen.
y eso seria todoooo!!!
ahora solo tienes que dar clic en el botón(si ya seguiste las indicaciones para asignar la función al botón)
sugerencia final sobre formularios:
Considera siempre aplicar lo que yo llamo la regla de oro, que básicamente consiste en realizar pruebas una y otra vez hasta estar seguro de obtener el resultado deseado 😎
Te recomiendo revisar este conjunto de consejos sobre formularios de Google
si tienes alguna consulta, por favor realízala en mi canal de YouTube en el vídeo respectivo, o el que más se parezca al tema.
Suscríbete y Síguenos en:
código para mostrar un formulario de google dentro de google sheets
código para mostrar un formulario de google dentro de google sheets
function mostrarForm() {
const html ='<iframe src="aquí va la url personalizada, se recomienda copiar y pegar segun las instrucciones para el iframe/viewform?embedded=true"'+
' width="100%" height="470" frameborder="0" marginheight="0" marginwidth="0">Cargando…</iframe>';
const htmlApp = HtmlService.createHtmlOutput(html)
.setTitle('🚀 Form-Ofimática p/Emprendedores.😎')
.setWidth(460)
.setHeight(550);
SpreadsheetApp.getActive().show(htmlApp);
}
Page updated
Google Sites
Report abuse