Question

I’m trying to make a UI that allow users to select an action for each agenda item in a spreadsheet. After a user select an action, I would like to update the spreadsheet with the selection. Since the data in the spreadsheet are not static, the UI was written dynamically.

This is how I created the listboxes :

// add labels and a drop down box of actions for each agenda item mark for today
for (i = 0; i < labels.length; i++) {
// labels is an array of objects
var topic = labels[i]['topic'];

// add label to grid
myGrid.setWidget(i, 0, myApp.createLabel(topic));

// the id of each listbox is the content of its corresponding label
var id = ObjApp.camelString(topic)
var lboxActions = myApp.createListBox().setId(id);

//add items to listbox
lboxActions.addItem('Select');
lboxActions.addItem('Add to agenda');
lboxActions.addItem('Move to another meeting');
lboxActions.addItem('Move to a special meetin');
lboxActions.addItem('Move to email');

//add drop down list to grid
myGrid.setWidget(i, 1, lboxActions);

}

I have 3 questions:

1) Which is a better design?

a) Design 1: a save button next to each listbox.

b) Design 2: one submit button at the bottom to save every entry

2) How would I collect information on what the user select? How would I write such handlers? I added the following code for each design but I don’t think I’m doing it right.

a) Design 1: the following lines of code were added to the for loop described above

var buttonSave = myApp.createButton('Save');
myGrid.setWidget(i, 2, buttonSave);

var handlerSelection = myApp.createServerHandler('selectAction');
handlerSelection.addCallbackElement(mainPanel);
buttonSave.addClickHandler(handlerSelection);

b) Design 2: the following lines of code were added outside the for loop

//update spreadsheet when user click "submit"
var handlerUpdate = myApp.createServerHandler('responseToSubmit');
handlerUpdate.addCallbackElement(mainPanel);
buttonSubmit.addClickHandler(handlerUpdate);

mainPanel.add(myGrid);
mainPanel.add(buttonSubmit);
myApp.add(mainPanel);

3) How do I write functions for the handlers? These are not correct because I wasn’t able to extract the information from the list boxes.

a) Design 1

function responseToSave(e) {

   var name = e.parameter.source;
   var selection = e.parameter.name;

   var selectionObj = new Object();

   selectionObj['status'] = selection;
   selectionObj['name'] = name;

   choicesMade.push(selectionObj)

   Logger.log(choicesMade);
   return choicesMade;
}

b) Design 2

function responseToSubmit(e) {
  var myApp = UiApp.getActiveApplication();

  for (i=0; i < labels.length; i++) {
     var lboxId = ObjApp.camelString(labels[i]['topic']);

     //[EDIT] e.parameter.lboxId would not work because lboxId is a string 
     var selection = e.parameter[lboxId];

     choicesMade[labels[i]] = selection;
     }

  Logger.log(choicesMade);
  return choicesMade;
}

Thanks

Answer 1

Q1:
The design purely depends on what your application is intended to do and how your users use it. There is no ‘better’ design – each of them has its own pros and cons and the choice would be based on how your app is used.
However, do also consider Design 3 which is saving the changes when the dropdown box is changed. It will be one click less for the user

Q2 and Q3:
You should use the setName on the listBox

var lboxActions = myApp.createListBox().setId(id).setName(id); 

I generally use the same string for the id and the name to avoid confusion, but you should use setName
After that you can access the item selected in the handler function as

e.parameter.id

Finally, on buttonSave, you should use the addClickHandler instead of addChangeHandler.