Administración de conferencias

Con este sencillo script se crea un flujo automático de información que permite la administración de conferencias con Google Docs. Administración de conferencias automatiza el flujo de inscripciones a una conferencia en la cual participan:

• El Asistente a la conferencia: es la persona que se inscribe a través de un formulario con intención de presenciar la conferencia.
• El Administrador de la conferencia: aprueba o rechaza las solicitudes cargadas en el sistema.
• El Orador: puede consultar todos los asistentes inscriptos y aprobados por el administrador.

El sistema cuenta con 3 pantallas:

• Registro de asistencia: permite a los asistentes registrarse al evento mediante la carga de información solicitada.
• Formulario de aprobación: permite al administrador gestionar la información de los asistentes mediante la aprobación o desaprobación de las solicitudes.
• Formulario de consulta: permite al orador ver la información de los asistentes a la conferencia.

Como funciona

1. El asistente ingresa al Formulario de alta e ingresa los datos requeridos.
2. Una vez cargados los datos, el asistente presiona el botón Enviar.
3. El sistema envía un e-mail al asistente confirmando que su inscripción se encuentra en proceso.
4. El administrador ingresa al Formulario de aprobación donde puede ver los asistentes pendientes de aprobación.
5. El administrador aprueba o rechaza los pedidos de los asistentes.
6. El orador ingresa al Formulario de consulta para consultar los asistentes.
7. El orador puede agregar un comentario para cada asistente.

Paso a paso

Lo primero que tenemos que hacer es crear una planilla de cálculo. Esta planilla va a contener los scripts y toda la información de la conferencia. En este punto es importante saber que la planilla es el elemento que sirve de sustento para nuestro sistema.

Primer Paso: Crear formulario.

Para crear un formulario se debe ir al menú Herramientas -> Formulario -> Crear un formulario de la hoja de cálculo.

En el formulario agregamos los campos que consideremos necesario, en este caso tomamos el nombre, apellido, empresa, cargo, e-mail, teléfono, como se enteró del evento y un espacio para que puedan dejarnos un comentario. El formulario quedaría como este.

Segundo Paso: Agregar Columnas de control.

Después de crear el formulario podemos ver en la planilla de datos que se han nombrado las cabeceras de cada uno de los datos que creamos en el formulario. Ahora debemos agregar 2 nuevas columnas que son las que nos darán la posibilidad de administrar cada uno de los asistentes. Agregamos entonces la columna Aprobación y la columna Comentarios del Orador.

La columna Aprobación, contendrá el estado de cada uno de los asistentes que serán los siguientes:

1. Pendiente: cuando una persona se da de alta, el sistema automáticamente le asigna este estado.
2. Aprobado: cuando el administrador verifica los datos. El orador sólo puede ver los asistentes que se encuentren aprobados.
3. Rechazado: si el administrador encuentra algún inconveniente rechaza la solicitud.

La columna Comentarios del Orador está disponible para los casos en que el asistente se encuentre aprobado.

Tercer Paso: Automatizando el alta de asistentes.

En el momento en que alguien se da de alta a la conferencia, lo primero que hacemos es enviarle un mensaje para avisarle que su solicitud ha sido cargada y se encuentra en proceso de aprobación.

El siguiente código muestra como se realiza esta acción.

/*

Envío un mail en el momento en que el usuario se inscribe

Si el correo electrónico no es correcto se enviará un mail al propietario de la planilla indicando

el error.

*/

var NOMBRE_CONFERENCIA = "Google Apps Scripts";

var MENSAJE_INSCRIPTO = "Gracias por Inscribirse, en breve le enviaremos un mensaje con la aprobación de su inscripción.";

function formOK(e) {

MailApp.sendEmail(e.values[5], NOMBRE_CONFERENCIA, MENSAJE_INSCRIPTO);

}

Cuarto Paso: Generar UI para el administrador.

El administrador se encarga de validar los datos y de asegurarse que los mismos sean correctos, antes que el orador los vea. De esta manera el orador sólo podrá ver los concurrentes a la conferencia que sean válidos.

El formulario de control de asistentes a la conferencia se realiza de la siguiente manera:

Lo primero que tenemos que hacer es crear el UI. Lo vamos a hacer por código, pero hoy se puede realizar con la nueva interfaz gráfica.

La pantalla la creamos en el método get() ya que este método es el que se ejecuta cuando publicamos el script como servicio.

/*

* Listado de los inscriptos pendientes de aprobación

*/

function doGet(e) {

try{

var app = UiApp.createApplication();

var p = app.createFormPanel().setId('form').setEncoding('multipart/form-data').setStyleAttribute('background-color', '#ffffff').setWidth('100%');

var btns = app.createHorizontalPanel().setStyleAttribute('background-color', '#ffffff');

var r = SpreadsheetApp.openById(ID_DOC).getDataRange();

var x = 1;

var cant = r.getValues().length;

var grd = app.createFlexTable().setBorderWidth(1);

p.add(grd);

//cabecera

grd.setWidget(0, 0, formatText(app.createLabel('Fecha'),3));

for (var h = 1; h < 12; h++){

grd.setWidget(0, h, formatText(app.createLabel(r.getValues()[0][h]),3));

}

//Columna casilla

grd.setWidget(0, 12, formatText(app.createLabel('Aprobación'),3));

//datos

for (var i = 1; i<cant; i++){

var values = r.getValues();

var data = values[i];

if(values[i][12]=='' || values[i][12]==null){

grd.setWidget(x, 0, app.createLabel(Utilities.formatDate(new Date(r.getValues()[x][0]), "GMT", "dd-MM-yyyy")));

for (var h = 1; h < 12; h++){

grd.setWidget(x, h, app.createLabel(r.getValues()[i][h]));

}

//Casillas de verificación

var formContent = app.createGrid(4,1).setWidth('100px');

formContent.setWidget(0, 0, app.createRadioButton('n'+i,'Pendiente',false).setValue(true).setFormValue(''));

formContent.setWidget(1, 0, app.createRadioButton('n'+i,'Aprobar',true).setFormValue('Aprobado'));

formContent.setWidget(2, 0, app.createRadioButton('n'+i,'Rechazar',true).setFormValue('Rechazado'));

formContent.setWidget(3, 0, app.createTextBox().setName('row'+i).setId('row'+i).setText('M'+(i+1)).setVisible(false));

grd.setWidget(x, h, formContent);

x++;

}

}

//Boton Aceptar

var btn = app.createSubmitButton('Guardar Cambios');

grd.setWidget(0, 12, btn);

return addToWindow(app, p);

}catch(e){

MailApp.sendEmail('tu-email@gmail.com', 'Administración de Conferencias - ERROR', 'AprovalForm.doGet: '+e);

}

}

Cada vez que generamos un UI, necesitamos crear una aplicación y guardarla en una variable. Esto se hace con la instruccion: var app = UiApp.createApplication(); Luego, a partir de la variable app, creamos una FlexTable en la cual vamos a escribir los valores de la planilla.

Para el usuario pueda realizar alguna acción, agregamos un botón que, cuando el usuario lo presione, llamará al método doPost() de nuestro script para guardar los cambios que el usuario realizó. Este botón se crea con app.createSubmitButton('Guardar Cambios');

En el método doPost() tiene el parámetro e. en este parámetro, recibimos el formulario creado en la función doGet(). Para acceder a cada uno de los valores del formulario, debemos indicar el id del elemento que queremos acceder, en nuestro caso, hemos seteado el id row0, row1, rowN, para cada texto ingresado por el usuario. Entonces, para acceder a éstos, debemos utilizar la instrucción: e.parameter['row0'].

function doPost(e) {

var app = UiApp.getActiveApplication();

var s = SpreadsheetApp.openById(ID_DOC).getSheets()[0];

var cant = s.getDataRange().getValues().length;

var msn = 'Los Cambios han sido guardados satisfactoriamente!';

for (var i = 1; i<cant; i++){

var row = 'row'+(i);

var a = e.parameter[row];

var n = 'n'+(i);

var b = e.parameter[n];

if (a!=undefined || a!=null) s.getRange(a).setValue(b);

}

app.getElementById('form').setVisible(false);

app.getElementById('info').setVisible(true).setText(msn);

return app;

}

Hay funciones auxiliares que mejoran la legibilidad del código. Pero en este caso no es en lo que quiero poner énfasis, de todos modos, el código completo está aqui:

var EMAIL_APROBADOR = "aprobador@gmail.com";

var EMAIL_ORADOR = "orador@gmail.com";

var LOGO = "http://googlescripts.com.ar/_/rsrc/1298502058934/config/customLogo.gif?revision=3";

var ID_DOC = "tI6_3ESpgdX3WBcgPzEwoOQ"

/*

* Listado de los inscriptos pendientes de aprobación

*/

function doGet(e) {

try{

var app = UiApp.createApplication();

var p = app.createFormPanel().setId('form').setEncoding('multipart/form-data').setStyleAttribute('background-color', '#ffffff').setWidth('100%');

var btns = app.createHorizontalPanel().setStyleAttribute('background-color', '#ffffff');

var r = SpreadsheetApp.openById(ID_DOC).getDataRange();

var x = 1;

var cant = r.getValues().length;

var grd = app.createFlexTable().setBorderWidth(1);

p.add(grd);

//cabecera

grd.setWidget(0, 0, formatText(app.createLabel('Fecha'),3));

for (var h = 1; h < 12; h++){

grd.setWidget(0, h, formatText(app.createLabel(r.getValues()[0][h]),3));

}

//Columna casilla

grd.setWidget(0, 12, formatText(app.createLabel('Aprobación'),3));

//datos

for (var i = 1; i<cant; i++){

var values = r.getValues();

var data = values[i];

if(values[i][12]=='' || values[i][12]==null){

grd.setWidget(x, 0, app.createLabel(Utilities.formatDate(new Date(r.getValues()[x][0]), "GMT", "dd-MM-yyyy")));

for (var h = 1; h < 12; h++){

grd.setWidget(x, h, app.createLabel(r.getValues()[i][h]));

}

//Casillas de verificación

var formContent = app.createGrid(4,1).setWidth('100px');

formContent.setWidget(0, 0, app.createRadioButton('n'+i,'Pendiente',false).setValue(true).setFormValue(''));

formContent.setWidget(1, 0, app.createRadioButton('n'+i,'Aprobar',true).setFormValue('Aprobado'));

formContent.setWidget(2, 0, app.createRadioButton('n'+i,'Rechazar',true).setFormValue('Rechazado'));

formContent.setWidget(3, 0, app.createTextBox().setName('row'+i).setId('row'+i).setText('M'+(i+1)).setVisible(false));

grd.setWidget(x, h, formContent);

x++;

}

}

//Boton Aceptar

var btn = app.createSubmitButton('Guardar Cambios');

grd.setWidget(0, 12, btn);

return addToWindow(app, p);

}catch(e){

MailApp.sendEmail('tu-email@gmail.com', 'Administración de Conferencias - ERROR', 'AprovalForm.doGet: '+e);

}

}

function doPost(e) {

var app = UiApp.getActiveApplication();

var s = SpreadsheetApp.openById(ID_DOC).getSheets()[0];

var cant = s.getDataRange().getValues().length;

var msn = 'Los Cambios han sido guardados satisfactoriamente!';

for (var i = 1; i<cant; i++){

var row = 'row'+(i);

var a = e.parameter[row];

var n = 'n'+(i);

var b = e.parameter[n];

if (a!=undefined || a!=null) s.getRange(a).setValue(b);

}

app.getElementById('form').setVisible(false);

app.getElementById('info').setVisible(true).setText(msn);

return app;

}

function addToWindow(app, p){

try{

var c = '#aaaaaa';

var bg = app.createAbsolutePanel().setStyleAttribute('background-color', '#333333').setHeight('800px');

//panel general

var w = app.createAbsolutePanel().setHeight('100%').setWidth('100%').setStyleAttribute('background-color', '#ffffff').setId('ventana');

var header = app.createVerticalPanel().setWidth('100%').setStyleAttribute('background-color', c);

var body = app.createAbsolutePanel().setWidth('100%').setStyleAttribute('background-color', c);

var tail = app.createVerticalPanel().setWidth('100%').setStyleAttribute('background-color', c);

w.add(header);

w.add(body);

w.add(app.createLabel('').setVisible(false).setId('info'));

w.add(tail);

w.setWidgetPosition(tail, 250, 10);

bg.add(w);

bg.setWidgetPosition(w, 0, 0);

//panel cancelar

var cPnl = app.createAbsolutePanel().setHeight('50%').setWidth('50%').setStyleAttribute('background-color', '#ffffff').setId('cancelar').setVisible(false);

cPnl.add(app.createLabel('La operación ha sido cancelada, ningún dato ha sido alterado.'));

bg.add(cPnl);

bg.setWidgetPosition(cPnl, 300, 150);

//panel aceptar

var aPnl = app.createAbsolutePanel().setHeight('50%').setWidth('50%').setStyleAttribute('background-color', '#ffffff').setId('aceptar').setVisible(false);

aPnl.add(app.createLabel('Los cambios fueron guardados!'));

bg.add(aPnl);

bg.setWidgetPosition(aPnl, 300, 150);

app.add(bg);

//header

header.add(app.createImage(LOGO));

header.add(formatText(app.createLabel(""),2));

//body

body.add(p);

//tail

tail.add(formatText(app.createLabel('Recomendamos Chrome para una mejor visualización.'),1));

tail.add(formatText(app.createLabel('Para mas información visite www.googlescripts.com.ar'),1));

return app;

}catch(e){

MailApp.sendEmail('developer@gmail.com', 'Administración de Conferencias - ERROR', 'AprovalForm.addToWindow: '+e);

}

}

function formatText(w, t){

if(t==1){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','10px');}

if(t==2){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','14px').setStyleAttribute('color','red');}

if(t==3){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','14px').setStyleAttribute('font-weight','bold');}

}

Quinto Paso: Generar UI para el Orador.

El orador puede ver la lista de los asistentes a medida que éstos fueron aprobados. Se incluye un cuadro de texto para que el orador pueda realizar los comentarios que crea necesario.

El formulario de consulta de asistentes a la conferencia se realiza de manera similar a la anterior, pero con diferencias en los datos que se modifican y las columnas de la planilla en donde se almacenan. El codigo completo a continuación:

var EMAIL_APROBADOR = "sergioviera@gmail.com";

var EMAIL_ORADOR = "sergioviera@gmail.com";

var LOGO = "http://googlescripts.com.ar/_/rsrc/1298502058934/config/customLogo.gif?revision=3";

var ID_DOC = "tI6_3ESpgdX3WBcgPzEwoOQ"

function doPost(e) {

var app = UiApp.getActiveApplication();

//use the group name to get the value of the selected radio

var s = SpreadsheetApp.openById(ID_DOC).getSheets()[0];

var cant = s.getDataRange().getValues().length;

var msn = 'Los Cambios han sido guardados satisfactoriamente!' ;

for (var i = 1; i<cant; i++){

var a = e.parameter['row'+(i)];

if(a!=undefined) s.getRange('N'+(i+1)).setValue(a);

}

app.getElementById('form').setVisible(false);

app.getElementById('info').setVisible(true).setText(msn);

return app;

}

function doGet(e) {

try{

var app = UiApp.createApplication();

var p = app.createFormPanel().setId('form').setEncoding('multipart/form-data').setStyleAttribute('background-color', '#ffffff').setWidth('100%');

var btns = app.createHorizontalPanel().setStyleAttribute('background-color', '#ffffff');

var r = SpreadsheetApp.openById(ID_DOC).getDataRange();

var x = 1;

var cant = r.getValues().length;

// var grd = app.createGrid(cant+1, 13).setBorderWidth(1);

var grd = app.createFlexTable().setBorderWidth(1);

p.add(grd);

//cabecera

grd.setWidget(0, 0, formatText(app.createLabel('Fecha'),3));

for (var h = 1; h < 12; h++){

grd.setWidget(0, h, formatText(app.createLabel(r.getValues()[0][h]),3));

}

//Columna casilla

grd.setWidget(0, 12, formatText(app.createLabel('Comentarios'),3));

//datos

for (var i = 1; i<cant; i++){

var values = r.getValues();

var data = values[i];

if(values[i][12]=='Aprobado'){

grd.setWidget(x, 0, app.createLabel(Utilities.formatDate(new Date(r.getValues()[x][0]), "GMT", "dd-MM-yyyy")));

for (var h = 1; h < 12; h++){

grd.setWidget(x, h, app.createLabel(r.getValues()[i][h]));

}

//Casillas de verificación

/* var formContent = app.createGrid(4,1).setWidth('100px');

formContent.setWidget(0, 0, app.createRadioButton('n'+i,'Pendiente',false).setValue(true).setFormValue(''));

formContent.setWidget(1, 0, app.createRadioButton('n'+i,'Aprobar',true).setFormValue('Aprobado'));

formContent.setWidget(2, 0, app.createRadioButton('n'+i,'Rechazar',true).setFormValue('Rechazado'));

formContent.setWidget(3, 0, app.createTextBox().setName('row'+i).setId('row'+i).setText('M'+i).setVisible(false));

grd.setWidget(x, h, formContent);

*/

grd.setWidget(x, h, app.createTextBox().setName('row'+i).setId('row'+i).setText(r.getValues()[i][13]));

x++;

}

}

//Boton Aceptar

var btn = app.createSubmitButton('Guardar Cambios');

grd.setWidget(0, 12, btn);

return addToWindow(app, p);

}catch(e){

MailApp.sendEmail('sergioviera@gmail.com', 'Administración de Conferencias - ERROR', 'AprovalForm.doGet: '+e);

}

}

function addToWindow(app, p){

try{

var c = '#aaaaaa';

var bg = app.createAbsolutePanel().setStyleAttribute('background-color', '#333333').setHeight('800px');

//panel general

var w = app.createAbsolutePanel().setHeight('100%').setWidth('100%').setStyleAttribute('background-color', '#ffffff').setId('ventana');

var header = app.createVerticalPanel().setWidth('100%').setStyleAttribute('background-color', c);

var body = app.createAbsolutePanel().setWidth('100%').setStyleAttribute('background-color', c);

var tail = app.createVerticalPanel().setWidth('100%').setStyleAttribute('background-color', c);

w.add(header);

w.add(body);

w.add(app.createLabel('').setVisible(false).setId('info'));

w.add(tail);

w.setWidgetPosition(tail, 250, 10);

bg.add(w);

bg.setWidgetPosition(w, 0, 0);

//panel cancelar

var cPnl = app.createAbsolutePanel().setHeight('50%').setWidth('50%').setStyleAttribute('background-color', '#ffffff').setId('cancelar').setVisible(false);

cPnl.add(app.createLabel('La operación ha sido cancelada, ningún dato ha sido alterado.'));

bg.add(cPnl);

bg.setWidgetPosition(cPnl, 300, 150);

//panel aceptar

var aPnl = app.createAbsolutePanel().setHeight('50%').setWidth('50%').setStyleAttribute('background-color', '#ffffff').setId('aceptar').setVisible(false);

aPnl.add(app.createLabel('Los cambios fueron guardados!'));

bg.add(aPnl);

bg.setWidgetPosition(aPnl, 300, 150);

app.add(bg);

//header

header.add(app.createImage(LOGO));

header.add(formatText(app.createLabel(""),2));

//body

body.add(p);

//tail

tail.add(formatText(app.createLabel('Recomendamos Chrome para una mejor visualización.'),1));

tail.add(formatText(app.createLabel('Para mas información visite www.googlescripts.com.ar'),1));

return app;

}catch(e){

MailApp.sendEmail('sergioviera@gmail.com', 'Administración de Conferencias - ERROR', 'AprovalForm.addToWindow: '+e);

}

}

function formatText(w, t){

if(t==1){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','10px');}

if(t==2){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','14px').setStyleAttribute('color','red');}

if(t==3){return w.setStyleAttribute('font-family','arial').setStyleAttribute('font-size','14px').setStyleAttribute('font-weight','bold');}

}

Podés ver la página completa acá.