Embedded Files
En este caso vamos a crear un formulario de contacto utilizando Google Scripts.
En este caso, el script lo guardé en el mismo site. Para ingresar a la administración de scripts desde Google Sites, debemos entrar en Administrar Sitio -> Secuencias de comandos de Apps -> Añadir nueva secuencia de Comandos.
Para el formulario de contacto, necesitamos hacer dos tareas principales. Por un lado crear la pantalla (la vista) y por el otro crear el script que realice las acciones.
Crear la pantalla.
Desde el editor de secuencias de comandos, abrimos el editor de pantallas desde el menu Archivo -> Compilar una interfaz de usuario...
Con las herramientas disponibles organizamos los elementos de la manera que mas nos guste. En mi caso los ubiqué de la siguiente manera:
Hay que tener en consideración que los elementos deben estar contenidos dentro de un Form Panel, esto es, primero se debe agregar este elemento y luego (dentro del Form Panel) un contenedor para los componentes que queremos agregar. En mi caso utilicé un Vertical Panel.
El resultado final debe ser algo como esto:
Bien, ahora guardamos los cambios y ya tenemos lista la pantalla. Todo lo demás lo hacemos desde el script.
Crear el Script:
En el editor de secuencias de comandos, vamos a definir una función doGet que es la que se ejecutará como servicio en el momento en que lo invoquemos desde la página.
function doGet() {
var app = UiApp.createApplication();
var component = app.loadComponent("ContactForm");
app.add(component);
var saveHandler = app.createServerClickHandler("doPost");
saveHandler.addCallbackElement(component);
return app;
}
Cuando se presiona el botón Enviar se está ejecutando el script del método doPost. En esta función vamos a hacer 3 pasos:
- Recuperar los datos del formulario.
Cuando llamamos a una función de Google Script desde el una interfaz de usuario, podemos definir el parámetro e. Este parámetro no es obligatorio, esto quiere decir que si no lo declaramos, todo va a funcionar de la misma manera. Pero como en este caso queremos usarlo para obtener los valores ingresados por el usuario, lo definimos.
Para ver la composición del parámetro e podemos mostrarlo en la consola a través de Logger.log(e). Allí podemos ver que en la variable parameter está compuesta, entre otros, por un objeto json con los parámetros de nuestro formulario.
Para acceder a cada uno de estos valores es suficiente con escribir e.parameter.nombre_del_campo
- Preparar y enviar el e-mail.
Para el formulario de contacto, decidí enviar 2 emails, uno al administrador de la página y otro al usuario que completó el formulario. Para esto utilizo el objeto
MailApp, y el mensaje lo envío en texto plano. Esto podría modificarse, y enviar un e-mail en formato HTML.
- Mostrarle un mensaje al usuario.
Al observar la función, se puede apreciar que lo primero que hago es obtener la aplicación activa y guardarla en una variable. Esto debe hacerse para tener control sobre los elementos del formulario.
El mensaje que le vamos a mostrar al usuario es una etiqueta que el usuario la tiene oculta. Para acceder al elemento del formulario lo hacemos con LoadComponent enviando el nombre del componente que queremos (en mi caso Label1 es el texto: su mensaje ha sido enviado en rojo).
Una vez que tenemos ese objeto tenemos que volverlo visible al usuario seteando la propiedad visible en true.
Para ello, creamos un elemento de manera dinámica (o sea, en el código) y la agregamos a la aplicación.
Finalmente devolvemos la aplicación (requisito indispensable en los formularios de google).
function doPost(e){
var app = UiApp.getActiveApplication();
var email = e.parameter.email_text;
var name = e.parameter.name_text;
var msj = e.parameter.message_text;
MailApp.sendEmail(email, 'sergioviera@gmail.com', "GoogleScripts.com.ar", "Gracias por contactarte, en breve estaré respondiendo a tu mensaje.");
MailApp.sendEmail("sergioviera@gmail.com", email, "GoogleScripts.com.ar: "+name, msj);
app.add(new Label("Gracias por contactarte, en breve estaré respondiendo a tu mensaje."));
return app;
}
NOTA:
El compilador de interfaz de usuario puede no comportarse de la manera esperada mientras que en el menú aparezca la leyenda "EXPERIMENTAL".
Page updated
Google Sites
Report abuse