Question

Im trying to workaround the impossibility of creating nested listboxes in GAS. I created some arrays to populate the listboxes and used the for looping to connect them to their respective listboxes.

The Arrays

var TicketTypeArray=["TICKETTYPE1","TICKETTYPE2","TICKETTYPE3","TICKETTYPE4","TICKETTYPE5","TICKETTYPE6","TICKETTYPE7","TICKETTYPE8","TICKETTYPE9","TICKETTYPE10","TICKETTYPE11","TICKETTYPE12","TICKETTYPE13","TICKETTYPE14"];
var DemandedByArray=["DEMANDEDBY1","DEMANDEDBY1"];
var AnalystArray=["ANALYST1","ANALYST2","ANALYST3","ANALYST4","ANALYST5","ANALYST6","ANALYST7","ANALYST8","ANALYST9"];
var StatusType1Array=["STATUS1","STATUS2","STATUS3"];
var StatusType2Array=["STATUS1","STATUS2","STATUS3"];
var StatusType3Array=["STATUS1","STATUS2","STATUS3"];

Im trying to use a if else loop to nest the next listbox to another one:

if (TicketTypeListBox="TICKETTYPE1")
{
  for(var i=0; i<StatusType1Array.length; i++)
  {
    StatusListBox.addItem(appRegistro.createLabel(StatusType1Array[i])).setItemText(i, StatusType1Array[i]);
  }
}
  else if (TicketTypeListBox="TICKETTYPE2")
  {
    for(var i=0; i<StatusType2Array.length; i++)
    {
      StatusListBox.addItem(appRegistro.createLabel(StatusType2Array[i])).setItemText(i, StatusType2Array[i]);
    }
  }
  else
  {
    StatusListBox.addItem("Teste");
  }

The TicketTypeListBox is:

var TicketTypeListBox = appRegistro.createListBox().setId('TicketType').setName('TicketType');
for(var i=0; i<TicketTypeArray.length; i++)
{
  TicketTypeListBox.addItem(appRegistro.createLabel(TicketTypeArray[i])).setItemText(i, TicketTypeArray[i]);
}

To show the panel, im using the code:

panel.add(DataLabel);
panel.add(DataTextBox);
panel.add(TicketIDLabel);
panel.add(TicketIDTextBox);
panel.add(TicketTypeLabel);
panel.add(TicketTypeListBox);
panel.add(DemandedByLabel);
panel.add(DemandedByListBox);
panel.add(AnalystLabel);
panel.add(AnalystListBox);
panel.add(StatusLabel);
panel.add(StatusListBox);

appRegistro.add(panel);
return appRegistro

Now, when i run the script in a Google Sites, i get the error message “Cannot find method add(string)”. When debuging, it locates the error just in the line of the TicketTypeListBox.

panel.add(TicketTypeListBox);

What can i do?

Answer 1

This error is coming because in the if block, instead of equality comparator, you have used assignment operator which assigns a string to the list box.
Istead of

if (TicketTypeListBox = "ACCESS CONTROL")

use

if (TicketTypeListBox == "ACCESS CONTROL")

Similarly modify other places also.

I am pretty much sure that still it will not work because, a listbox can not be compared with a string. To create nested listboxes, you will have to use change handler on the lisboxes. Here is a quick example for the same.

var lbArray1 = ['item1', 'item2', 'item3'];
var item1Array = ['item11', 'item12', 'item13'];
var item2Array = ['item21', 'item22', 'item23'];
var item3Array = ['item31', 'item32', 'item33', 'item34'];

function doGet(e){
  var app = UiApp.createApplication();

  var vPanel = app.createVerticalPanel();
  app.add(vPanel);

  var lb1 = app.createListBox().setName('lb1').setId('lb1');
  for(var i in lbArray1){lb1.addItem(lbArray1[i])};
  var lb2 = app.createListBox().setName('lb2').setId('lb2');
  //load the 2nd lb with items dependent on first one
  for(var i in item1Array){lb2.addItem(item1Array[i])};
  vPanel.add(lb1).add(lb2);

  //use change handler to dynamically change the 2nd listbox based on the selection of first listbox
  var changeHandler1 = app.createServerHandler('updateListBox_').addCallbackElement(vPanel);
  lb1.addChangeHandler(changeHandler1);

  return app;
}

function updateListBox_(e){
  var app = UiApp.getActiveApplication();
  //first listbox item selected
  var lb1Item = e.parameter.lb1;

  var lb2 = app.getElementById('lb2');
  lb2.clear();//remove all items from lb2

  if(lb1Item == 'item1'){
    for(var i in item1Array){lb2.addItem(item1Array[i])};
  }
  else if(lb1Item == 'item2'){
    for(var i in item2Array){lb2.addItem(item2Array[i])};
  }
  else if(lb1Item == 'item3'){
    for(var i in item3Array){lb2.addItem(item3Array[i])};
  }

  return app;
}