Creating a dialog form in Google Spreadsheets with Google Apps Script?

Question

The functionality that I am going for is this:

Click on a menu option
Interactive box comes up with 6 textboxes that correspond with a label each
In two of those boxes, at most three, a number is inputted
Corresponding to an algorithm those numbers will change the values in the current active cell range if the value in the cell (a letter) is equal to the label of any of the earlier textbox inputted values, the empty cells get left empty, others that have no correspondence will be changed to 0.
Click OK, the active selected cell range changes accordingly.

I want this functionality to be embedded into the Spreadsheet. I've already started, but since I haven't done anything with GAS I've stumbled upon a few problems and need a solution from someone that knows how to use GAS. I don't know if this functionality is possible the way I envisioned it.

function calculateScores() {
 var sheet = SpreadsheetApp.getActiveSheet();
 var range = sheet.getActiveRange();
 var values = range.getValues();
 for (var i = 0; i <= values.length - 1; i++) {
  var row = values[i];
  Logger.log(row);
 }
};

function onOpen() {
 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 var entries = [{
 name : "Calculate Scores",
 functionName : "calculateScores"
 }];
 spreadsheet.addMenu("Calculate Scores", entries);
};

This creates the menu item and just logs the selected range. Moving forward, how do I solve the problem with the rest of the interface and functionality?

Answer 1

You can do this with UiApp. I've put some sample code below that might help you on your way.

You'll find useful information about UiApp in the documentation here .

Waqar Ahmed's site also has lots of examples that I found enormously helpful.

function calculateScores() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();

  //Create the user interface
  var app = UiApp.createApplication();

  //Create two textboxes
  var tBox1 = app.createTextBox().setName('tBox1').setId('tBox1');
  var tBox2 = app.createTextBox().setName('tBox2').setId('tBox2');

  //Create the OK button and a handler to respond to when OK is clicked.
  var okHandler = app.createServerHandler('respondToOK');
  var btnOK = app.createButton('OK', okHandler);

  //I find grids very handy for arranging labels and widgets like textboxes neatly
  var myGrid = app.createGrid(3, 2).setId('myGrid').setStyleAttribute('background', 'lightCyan')
    .setText(0, 0, 'Label for text box 1')
    .setWidget(0, 1, tBox1)
    .setText(1, 0, 'Label for text box 2')
    .setWidget(1, 1, tBox2)
    .setWidget(2, 1, btnOK);

  /*The OK button's handler needs a callback element otherwise it can't read the user's input.
    You could add multiple callback elements to each of the textboxes but that's just extra code.
    As all the textboxes are added to myGrid then just one callback to that will work fine.
  */
  okHandler.addCallbackElement(myGrid);

  app.add(myGrid);
  ss.show(app);
}

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

  var entry1 = e.parameter.tBox1;
  var entry2 = e.parameter.tBox2;

  //Substitute your own algorhythm here, I just multiplied the two entries
  var result = entry1 * entry2;

  //Enter the result in the active cell
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cellAddress = ss.getActiveCell().getA1Notation();
  ss.getActiveSheet().getRange(cellAddress).setValue(result);

  //Close the user interface
  return app.close();
}

Hope this helps. Good luck!