How To Allow Users to Review Answers before Submiting Form?

Question

I've built a form with UiApp to collect information from the user. It's rather complex with multiple panels and file uploads, so I would like to give the user the opportunity review their inputs before submitting. I was hoping to display their inputs on one final review panel that would then allow them to decide to edit the info and move back to a earlier panel to edit.

Following is the test script. The farthest I've gotten is getting it to return 'textBox' and not the value of the textBox. Is it possible to get the values while staying in the doGet portion of my script, or must I move to doPost to access the values?

What would be the work around you would suggest? Thanks for any and all help!

function doGet(e){
var app = UiApp.createApplication();
var appPanel = app.createVerticalPanel();
var form = app.createFormPanel();
var panel1 = app.createHorizontalPanel();

var emailLabel = app.createLabel('Your Email');
var email = app.createTextBox().setName('email').setId('email');

app.add(form);

var button1 = app.createButton('Go to Review');

panel1.add(emailLabel);
panel1.add(email);
panel1.add(button1);
appPanel.add(panel1);
form.add(appPanel);


var panel2 = app.createHorizontalPanel().setVisible(false);
var reviewLabel = app.createLabel('Your Email:');
var reviewEmail = app.createLabel(email);

panel2.add(reviewLabel);
panel2.add(reviewEmail);
appPanel.add(panel2);

//
var reviewPageTwo = app.createClientHandler()
.forTargets(panel1).setVisible(false)
.forTargets(panel2).setVisible(true);

button1.addClickHandler(reviewPageTwo);

return app;
}

UPDATE 8.24.12 I'm including the resulting script. It includes the review function, the button to lead the user back to edit, and the submitButton to post it. (You will need to replace the spreadsheet ID for the post to work.)

Thank for the help all! Martin

 function doGet(e){
var app = UiApp.createApplication();
var appPanel = app.createVerticalPanel();
var form = app.createFormPanel();
var panel1 = app.createHorizontalPanel().setId('panel1');

var emailLabel = app.createLabel('Your Email');
var email = app.createTextBox().setName('email').setId('email');
var syncChangeHandler = app.createServerHandler('syncText').addCallbackElement(form);


app.add(form);

var button1 = app.createButton('Go to Review');

panel1.add(emailLabel);
panel1.add(email);
panel1.add(button1);
appPanel.add(panel1);
form.add(appPanel);


var panel2 = app.createHorizontalPanel().setId('panel2').setVisible(false);
var reviewGrid = app.createGrid(3,3).setId('reviewGrid');
var reviewEmail = app.createLabel().setId('reviewEmail');
var reviewLabel = app.createLabel('Your Email:');
var submitButton = app.createSubmitButton('Submit');
var button2 = app.createButton('Edit Response');

panel2.add(reviewLabel);
panel2.add(reviewEmail);
panel2.add(button2);
panel2.add(submitButton);
appPanel.add(panel2);

//
var editResponse = app.createClientHandler()
.forTargets(panel1).setVisible(true)
.forTargets(panel2).setVisible(false);

button1.addClickHandler(syncChangeHandler);
button2.addClickHandler(editResponse);

return app;
}

function syncChangeHandler(e){
  var app = UiApp.getActiveApplication(); 


  app.getElementById('reviewEmail').setText(e.parameter.email);
  app.getElementById('panel1').setVisible(false);
  app.getElementById('panel2').setVisible(true);
  return app;
}

function doPost(e){
var ss = SpreadsheetApp.openById('*your spreadsheet id here*').getSheets()[0];
var range = ss.getRange(ss.getLastRow()+1, 1, 1,2);

var values = [[new Date(),e.parameter.email]];
range.setValues(values);

var app = UiApp.getActiveApplication();
var label = app.createLabel('Thank You!');
app.add(label);

return app;
}

Srik Srik · Accepted Answer · 2012-08-20T17:27:53

You have your entire function inside doGet(). The doGet() function is executed when your UI is first loaded. So,

var email = app.createTextBox().setName('email').setId('email');

actually resolves to a text box. When you do

var reviewEmail = app.createLabel(email);

you are trying to pass a text box as an argument to createLabel, which is not allowed. Therefore this won't work. You must handle the changes to the text box in a handler.

function doGet(){
var syncChangeHandler = app.createServerHandler('syncText').addCallbackElement(form);
var email = app.createTextBox().setName('email').setId('email');
...
var reviewEmail = app.createLabel().setId('reviewEmail');
...
}

function syncText(e){
  var app = UiApp.getActiveAplication(); 
  app.getElementById('reviewEmail').setText(e.parameter.email);
  return app;
}

How To Allow Users to Review Answers before Submiting Form?

2 Answers