create a new page in a form dynamically, based on

Question

I have a question regarding forms in google-apps-script. Lets say I have already created a form with a single page and a input box for text. Is it possible to create the follow-up page dynamically, based on the data out of the textbox? Something like:

First Page: insert customer id -> continue -> Second Page: information about the customer.

I know that there are events like onLoad and onSubmit, but there is no onContinue event for example.

Is it possible to create something like that with google-apps-script? What would be the best way to archive such a behavior? B.R.

Answer 1

Using the UiApp service, you have one doGet() and one doPost() function... but here's a way to extend them to support a dynamic multi-part form. (The example code is borrowed from this answer.

Your doGet() simply builds part1 of your form. In the form, however, you need to identify your form by name, like this:

  var form = app.createFormPanel().setId("emailCopyForm");

You doPost() then, will pass off handling of the post operation to different functions, depending on which form has been submitted. See below. (Also included: reportFormParameters (), a default handler that will display all data collected by a form part.)

/**
 * doPost function with multi-form handling. Individual form handlers must
 * return UiApp instances.
 */
function doPost(eventInfo) {
  var app;
  Logger.log("Form ID = %s", eventInfo.parameter.formId);
  // Call appropriate handler for the posted form
  switch (eventInfo.parameter.formId) {
    case 'emailCopyForm':
      app = postEmailCopyForm(eventInfo);
      break;
    default:
      app = reportFormParameters (eventInfo);
      break;
  }
  return app;
}

/**
 * Debug function - returns a UiInstance containing all parameters from the
 * provided form Event.
 *
 * Example of use:
 * <pre>
 *     function doPost(eventInfo) {
 *       return reportFormParameters(eventInfo);
 *     }
 * </pre>
 *
 * @param {Event} eventInfo Event from UiApp Form submission
 *
 * @return {UiInstance}
 */
function reportFormParameters (eventInfo) {
  var app = UiApp.getActiveApplication();
  var panel = app.createVerticalPanel();
  panel.add(app.createLabel("Form submitted"));
  for (var param in eventInfo.parameter) {
    switch (param) {
      // Skip the noise; these keys are used internally by UiApp
      case 'lib':
      case 'appId':
      case 'formId':
      case 'token':
      case 'csid':
      case 'mid':
        break;

      // Report parameters named in form
      default:
        panel.add(app.createLabel(" - " + param + " = " + eventInfo.parameter[param]));
        break;
    }
  }
  app.add(panel);
  return app;
}

To generate each form part, subsequent form handlers can use the data retrieved in previous parts to dynamically add new Form objects to the ui.

Answer 2

Here is some working code that demonstrates a multiple page form. The code uses a single "hidden" state in a TextBox and multiple SubmitButtons to allow the user to advance forward and backward through the form sequence, as well as to validate the contents of the form. The two extra SubmitButtons are "rewired" using ClientHandlers that simply modify the hidden state prior to form submission.