Google Apps Script Example - How to change value of listbox dependent value of radio button

Question

I have a question about Google Apps Script. I want to create a basic form where the form contain a textbox, radio button, listbox and fileupload. My issues here, I want to change value of listbox dependent on selection of radio button.

For example :

//variable radio button
var valRadio1 = app.createRadioButton("radio", "One").setName("One").setId("One");
var valRadio2 = app.createRadioButton("radio", "Two").setName("Two").setId("Two");

//arrays of listbox
var item1 = ["item1","item2"];
var item2 = ["item3","item4"];

//variable listbox
var listBox = app.createListBox().setId("box").setName("box");

If I select valRadio1, then listBox will load value of item1 and if I select valRadio2, then listBox will load value of item2. So can you explain to me the solution of my issue and can you give me a little example to solve my issue? Thank you very much if you all can help me :D.

Note : I'm still using UI Service, so please explain to me with that way :D.

Answer 1

I would recommend to use HTML service over UiApp as it is depreciated.

However, following answer may help what you are looking for. In order to achieve this, you have to attach click event handler with each radio button.

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Title'); 
  var panel = app.createVerticalPanel();
  var lb = app.createListBox(true)
                 .setId('lbId')
                 .setName('lbName')
                 .setHeight(60)
                 .setWidth(60);

  var valRadio1 = app.createRadioButton("Radio", "one").setName('one').setId('one');
  var valRadio2 = app.createRadioButton("Radio", "two").setName('two').setId('two');

  var handler1 = app.createServerChangeHandler('one');
  handler1.addCallbackElement(panel);  
  valRadio1.addClickHandler(handler1);

  var handler2 = app.createServerChangeHandler('two');
  handler2.addCallbackElement(panel);  
  valRadio2.addClickHandler(handler2);

  panel.add(valRadio1);      
  panel.add(valRadio2);  

  panel.add(lb);
  app.add(panel);  

  return app;
}

function one(e){
  var app = UiApp.getActiveApplication(); 
  app.getElementById('two').setValue(false);
  var lb = app.getElementById('lbId');
  lb.clear();

  var item1 = ["item1","item2"];

  for(var i=0;i<item1.length;i++) {
    lb.addItem(item1[i]);
  }

  return app;
}

function two(e){
  var app = UiApp.getActiveApplication(); 
  app.getElementById('one').setValue(false);
  var lb = app.getElementById('lbId');
  lb.clear();

  var item2 = ["item3","item4"];

  for(var i=0;i<item2.length;i++) {
    lb.addItem(item2[i]);
  }

  return app;
}

For more information, you can refer depreciated documentation of UiApp.