Validación de formularios en campos y FileUpload
Estoy buscando hacer campos de validación / requeridos en un formulario que tiene entrada de texto ySubir archivo para archivos adjuntos.
El script toma entradas y permite al usuario adjuntar un archivo. Al enviarlo, agrega campos de entrada a la hoja de cálculo y carga el archivo en mi disco. Lo que quiero hacer es forzar la entrada de texto y las listas desplegables para que sean respondidas y requieren un archivo adjunto.
Encontré este enlace para ejemplos."Ejemplo de validación" pero tengo un problema al intentar agregar esto al controlador de clic en mi código. ¿Puede alguien ayudar a apuntar en la dirección correcta?
// Script-as-app template.
var submissionSSKey = 'Insert SS Key';
function doGet(e) {
var app = UiApp.createApplication().setTitle('Loan Registration Processing');
var panel = app.createFormPanel();
var grid = app.createGrid(10,2).setId('loanGrid');
var loanTypeLabel = app.createLabel('Loan Type');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerNameLabel = app.createLabel("Borrower's Name");
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountLabel = app.createLabel('Loan Amount');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDateLabel = app.createLabel('Loan Date');
var appDateTextbox = app.createDateBox().setWidth('150px').setName('date');
var lienPostition = app.createLabel('Lien Position');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propertyType = app.createLabel('Property Type');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4 Units');
propType.addItem('Manufactured');
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow').setVisible(false)
//file upload
var upLoadTypeLabel = app.createLabel('Point File');
var upLoad = (app.createFileUpload().setName('thefile'));
var upLoadTypeLabel2 = app.createLabel('Credit Report');
var upLoad2 = (app.createFileUpload().setName('thefile2'));
//Grid layout of items on form
grid.setWidget(0, 0, loanTypeLabel)
.setWidget(0, 1, loanList)
.setWidget(1, 0, borrowerNameLabel)
.setWidget(1, 1, borrowerTextbox)
.setWidget(2, 0, loanAmountLabel)
.setWidget(2, 1, loanAmountTextbox)
.setWidget(3, 0, appDateLabel)
.setWidget(3, 1, appDateTextbox)
.setWidget(4, 0, lienPostition)
.setWidget(4, 1, lienPos)
.setWidget(5, 0, propertyType)
.setWidget(5, 1, propType)
.setWidget(6, 0, upLoadTypeLabel)
.setWidget(6, 1, upLoad)
.setWidget(7, 0, upLoadTypeLabel2)
.setWidget(7, 1, upLoad2)
.setWidget(8, 0, submitButton)
.setWidget(9, 1, warning)
var cliHandler = app.createClientHandler().forTargets(warning).setVisible(true)
submitButton.addClickHandler(cliHandler);
panel.add(grid);
app.add(panel);
return app;
}
function doPost(e) {
var app = UiApp.getActiveApplication();
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
//Spreadsheet to load form values to
var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;
var fileBlob2 = e.parameter.thefile2;
//Grabs the folder to send upload files
var folder = DocsList.getFolderById('0B8PHKnfhErK-T2IzRW9ZWjcwRmc');
//Creates the upload file in root
var doc = DocsList.createFile(fileBlob);
var doc2 = DocsList.createFile(fileBlob2);
//moves created files in root to specific folder
doc.addToFolder(folder);
doc2.addToFolder(folder);
//Remove the copy left in the root, leaving only the version in the specific folder
doc.removeFromFolder(DocsList.getRootFolder());
doc2.removeFromFolder(DocsList.getRootFolder());
//Message to user after submit of form
var uplabel = app.createHTML('<B>Thank you for your Loan Registation Subumission. Press F5 on your keyboard to enter another Loan Registration.</B>');
//Send email to group
var emailAddress = '[email protected]';
var folderURL = 'Folder URL';
var ssURL = 'SS URL';
var message = "<HTML><BODY>"
+ "<P>" + " A new Loan Registration has been submitted."
+ '<P>You can access the Loan Submitted documents <A HREF="' + folderURL + '">here</A>.'
+ '<P>You can access the submitted Loan Registration Spreadsheet <A HREF="' + ssURL + '">here</A>.'
+ "</HTML></BODY>";
MailApp.sendEmail(emailAddress, "New Loan Registrtion Submittal Posted!", "", {htmlBody: message});
app.add(uplabel);
return app;
}
EDITAR: el agregado en el segundo archivo de carga y envío no se habilitará
Regresé, edité el script y modifiqué un poco para realizar básicamente la misma función que antes, pero esta necesita cargar dos archivos. Sigo el mismo código pero después de probar el botón de envío nunca se habilitará ... Aquí está el código que se actualizó:
//Create the Labels, TextBoxes, and Drop downs
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var Lender = app.createTextBox().setWidth('150px').setName('lender');
var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
correspondentBroker.addItem('Select Option');
correspondentBroker.addItem('Correspondent');
correspondentBroker.addItem('Broker');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var loanprogram = app.createTextBox().setWidth('150px').setName('program');
var rate = app.createTextBox().setWidth('150px').setName('rate');
var ysp = app.createTextBox().setWidth('150px').setName('ysp');
var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
var ltv = app.createTextBox().setWidth('150px').setName('ltv');
var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
impound.addItem('Select Option');
impound.addItem('Yes');
impound.addItem('No');
var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
mortgageIns.addItem('Select Option');
mortgageIns.addItem('MI');
mortgageIns.addItem('PMI Borrower Paid');
mortgageIns.addItem('PMI Lender Paid');
var upLoad = app.createFileUpload().setName('thefile');
var upLoad2 = app.createFileUpload().setName('thefile2');
var uploadtracker = app.createTextBox().setVisible(false);
var uploadtracker2 = app.createTextBox().setVisible(false);
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#FFcc99').setStyleAttribute('fontSize','20px');
//Click Handlers are set
var cliHandler2 = app.createClientHandler()
.validateLength(borrowerTextbox, 1, 40)
.validateLength(Lender, 1, 40)
.validateNotMatches(correspondentBroker,'Select Option')
.validateLength(loanAmountTextbox, 1, 40)
.validateLength(loanprogram, 1, 40)
.validateNotMatches(mortgageIns,'Select Option')
.validateLength(rate, 1, 40)
.validateLength(ysp, 1, 40)
.validateLength(closingcostcredit, 1, 40)
.validateLength(ltv, 1, 40)
.validateNotMatches(impound, 'Select Option')
.validateMatches(uploadtracker, 'selected')
.validateMatches(uploadtracker2, 'selected')
.forTargets(submitButton).setEnabled(true)
.forTargets(warning)
.setHTML('Now you can submit your form')
.setStyleAttribute('background','#99FF99')
.setStyleAttribute('fontSize','12px');
var cliHandler3 = app.createClientHandler().forTargets(uploadtracker).forTargets(uploadtracker2).setText('selected')
//Grid layout of items on form
grid.setText(0, 0, 'Borrower Name')
.setWidget(0, 1, borrowerTextbox)
.setText(1, 0, "Lender")
.setWidget(1, 1, Lender)
.setText(2, 0, 'Correspondent or Broker')
.setWidget(2, 1, correspondentBroker)
.setText(3, 0, 'Loan Amount')
.setWidget(3, 1, loanAmountTextbox)
.setText(4, 0, 'Loan Program')
.setWidget(4, 1, loanprogram)
.setText(5, 0, 'Rate')
.setWidget(5, 1, rate)
.setText(6, 0, 'YSP')
.setWidget(6, 1,ysp)
.setText(7, 0, 'Closing Cost Credit')
.setWidget(7, 1, closingcostcredit)
.setText(8, 0, 'LTV')
.setWidget(8, 1, ltv)
.setText(9, 0, 'Impounds')
.setWidget(9, 1,impound)
.setText(10, 0, 'Point File')
.setWidget(10, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setText(11, 0, 'Credit Report')
.setWidget(11, 1, upLoad2.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setWidget(12, 0, submitButton)
.setWidget(12, 1, warning)
.setWidget(13, 0, uploadtracker)
.setWidget(13, 1, uploadtracker2)
.addClickHandler(cliHandler2);
var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO Google Drive<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);
panel.add(grid);
app.add(panel);
return app;
}
EDITAR-para agregar CliHandler4 Actualicé el código para reflejar el 4º cliHandler pero aún no puedo activar el botón de envío. No estoy seguro de por qué está fallando ... Lo he revisado varias veces y parece que no puedo averiguar qué es lo que está mal ... Aquí está el código
EDITAR como respuesta: faltaba un widget en la interfaz de usuario (mortgageIns)
var submissionSSKey = 'ID GOES HERE';
var Panelstyle = {'background':'#c0d6e4','padding':'100px','borderStyle':'ridge','borderWidth':'15PX','borderColor':'#31698a'}
function doGet(e) {
var app = UiApp.createApplication().setTitle('PCH Mortgage Disclosure Request');
app.add(app.createImage("http://www.pchmortgage.com/img/logo_thumbnail/6644.png"));
var instructLabel = app.createHTML('<B><p> </p><p>Be sure to fill in each field completely prior to submitting the Disclsure Request</P></B>');
app.add(instructLabel);
//Create the FormPanel and Grid for the application
var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(450, 300);
var grid = app.createGrid(15,2).setId('loanGrid');
//Create the Labels, TextBoxes, and Drop downs
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var lender = app.createTextBox().setWidth('150px').setName('lender');
var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
correspondentBroker.addItem('Select Option');
correspondentBroker.addItem('Correspondent');
correspondentBroker.addItem('Broker');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var loanprogram = app.createTextBox().setWidth('150px').setName('program');
var rate = app.createTextBox().setWidth('150px').setName('rate');
var ysp = app.createTextBox().setWidth('150px').setName('ysp');
var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
var ltv = app.createTextBox().setWidth('150px').setName('ltv');
var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
impound.addItem('Select Option');
impound.addItem('Yes');
impound.addItem('No');
var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
mortgageIns.addItem('Select Option');
mortgageIns.addItem('MI');
mortgageIns.addItem('PMI Borrower Paid');
mortgageIns.addItem('PMI Lender Paid');
var upLoad = app.createFileUpload().setName('thefile');
var upLoad2 = app.createFileUpload().setName('thefile2');
var uploadtracker = app.createTextBox().setVisible(false);
var uploadtracker2 = app.createTextBox().setVisible(false);
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#9999ff').setStyleAttribute('fontSize','20px');
//Click Handlers are set
var cliHandler2 = app.createClientHandler().validateLength(borrowerTextbox, 1, 40).validateLength(lender, 1, 40)
.validateNotMatches(correspondentBroker,'Select Option').validateLength(loanAmountTextbox, 1, 40).validateLength(loanprogram, 1, 40)
.validateLength(rate, 1, 40).validateLength(ysp, 1, 40).validateLength(closingcostcredit, 1, 40)
.validateLength(ltv, 1, 40).validateNotMatches(mortgageIns,'Select Option')
.validateMatches(uploadtracker, 'selected').validateMatches(uploadtracker2, 'selected')
.forTargets(submitButton).setEnabled(true).forTargets(warning).setHTML('Now you can submit your form')
.setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');
var cliHandler3 = app.createClientHandler().forTargets(uploadtracker).setText('selected')
var cliHandler4 = app.createClientHandler().forTargets(uploadtracker2).setText('selected')
//Grid layout of items on form
grid.setText(0, 0, 'Borrower Name')
.setWidget(0, 1, borrowerTextbox)
.setText(1, 0, "Lender")
.setWidget(1, 1, lender)
.setText(2, 0, 'Correspondent or Broker')
.setWidget(2, 1, correspondentBroker)
.setText(3, 0, 'Loan Amount')
.setWidget(3, 1, loanAmountTextbox)
.setText(4, 0, 'Loan Program')
.setWidget(4, 1, loanprogram)
.setText(5, 0, 'Rate')
.setWidget(5, 1, rate)
.setText(6, 0, 'YSP')
.setWidget(6, 1,ysp)
.setText(7, 0, 'Closing Cost Credit')
.setWidget(7, 1, closingcostcredit)
.setText(8, 0, 'LTV')
.setWidget(8, 1, ltv)
.setText(9, 0, 'Impounds')
.setWidget(9, 1,impound)
.setText(10, 0, 'Mortgage Insurance')
.setWidget(10, 1,mortgageIns)
.setText(11, 0, 'Point File')
.setWidget(11, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setText(12, 0, 'Credit Report')
.setWidget(12, 1, upLoad2.addChangeHandler(cliHandler4).addChangeHandler(cliHandler2))
.setWidget(13, 0, submitButton)
.setWidget(13, 1, warning)
.setWidget(14, 0, uploadtracker)
.setWidget(14, 1, uploadtracker2)
.addClickHandler(cliHandler2);
var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO GOOGLE DRIVE<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);
panel.add(grid);
app.add(panel);
return app;
}