Question

Need a little help figuring out how to get 3 list boxes to populate based on the previous list box. So far what I have is 1 list box that populates from a spreadsheet. Can someone help me with setting up so that the 2nd listbox will populate based off the first and a 3rd listbox that will populate based off of the first listbox? Here is the code:

function doGet(e){
  var app = UiApp.createApplication();
  var mainPage = app.createVerticalPanel().setId('mainPage');
  var dataItemsLB = app.createListBox().setId('dataItemsLB').setName('dataItemsLB'); 
  var dataItemsLbl = app.createLabel('Data Items'); 
  dataItems(dataItemsLB);
  mainPage.add(dataItemsLB);
  app.add(mainPage);
  return app;
  }


  function dataItems(listbox){
  var app = UiApp.getActiveApplication();
  var ss = SpreadsheetApp.openById('0AhraBJOts4V3dDhYbERTR0hFNUtNdEhZd2c4OElpY0E');
  var list = ss.getSheetByName('dataItems');
  var values = list.getRange(1,1,ss.getLastRow(),1).getValues();
  for (var i in values){
  listbox.addItem(values[i][0].toString());
  }
  return app;
  }

The code above is only for 1 listbox but I thought it would help me to start from the bottom so I understand any explanation.
Thanks for any advice!

Answer 1

Replied on community try this code:

function doGet(e){
  var app = UiApp.createApplication();
  var mainPage = app.createVerticalPanel().setId('mainPage');
  var dataItemsLB = app.createListBox().setId('dataItemsLB').setName('dataItemsLB'); // create a basic list box
  var dataItemsLB2 = app.createListBox().setId('dataItemsLB2').setName('dataItemsLB2'); // create a basic list box
  var dataItemsLB3 = app.createListBox().setId('dataItemsLB3').setName('dataItemsLB3'); // create a basic list box
  var dataItemsLbl = app.createLabel('Data Items'); 
  dataItems(dataItemsLB); // call the "dataItems" function to populate the list box


  // Create Server Handlers
  var sHandlerLB = app.createServerHandler("listLBSelect");
  sHandlerLB.addCallbackElement(mainPage);
  dataItemsLB.addChangeHandler(sHandlerLB);
  dataItemsLB2.addChangeHandler(sHandlerLB);  

  mainPage.add(dataItemsLB);
  mainPage.add(dataItemsLB2);
  mainPage.add(dataItemsLB3);
  app.add(mainPage);

  return app;
}


function dataItems(listbox){
  var app = UiApp.getActiveApplication();
  var ss = SpreadsheetApp.openById('0AhraBJOts4V3dDhYbERTR0hFNUtNdEhZd2c4OElpY0E');
  var list = ss.getSheetByName('dataItems');
  var values = list.getRange(1,1,ss.getLastRow(),1).getValues();
  for (var i in values){
    listbox.addItem(values[i][0].toString());
  }
  return app;
}

function listLBSelect(e) {
  var app = UiApp.getActiveApplication();
  Logger.log(e);
  Logger.log("Listbox changed: " + e.parameter.source);
  // check which listbox has been changed:
  switch(e.parameter.source) {
    case "dataItemsLB":
      var dataItemsLB2 = app.getElementById("dataItemsLB2");
      dataItemsLB2.addItem("aaaaaa"); 
      dataItemsLB2.addItem("bbbbbb"); 
      dataItemsLB2.addItem("cccccc"); 
      break;
    case "dataItemsLB2":
      var dataItemsLB3 = app.getElementById("dataItemsLB3");
      dataItemsLB3.addItem("hhhhhh"); 
      dataItemsLB3.addItem("jjjjjj"); 
      dataItemsLB3.addItem("kkkkkk"); 
      break;     
  }
  return app;
}