List Box

In this example, I have shown a list box with single select. Whenever you select a item from dropdown list, It will tell you which item you selected.

Reference Page:

Example Demo: Single Select LIst Box

Example Code:

function doGet() {

  var app = UiApp.createApplication();

  var panel = app.createVerticalPanel();

  var listBox = app.createListBox().setName('myList').setWidth('80px');

  listBox.addItem('Item 1');

  listBox.addItem('Item 2');

  listBox.addItem('Item 3');

  listBox.addItem('Item 4');


  //Add a handler to the ListBox when its value is changed

  var handler = app.createServerChangeHandler('showSelectedinfo');



  var infoLabel = app.createLabel('Select from List').setId('info');




  return app; 


//This functions displays the infolabel with when ListBox value is changed

function showSelectedinfo(e){

  var app = UiApp.getActiveApplication();

  app.getElementById('info').setText('You selected :'+e.parameter.myList).setVisible(true)


  return app;


Example Demo: Multiple Select List Box

In this example, you can select multiple item by holding CTRL key.

Example Code:

In the above example, I have only modified the fourth line of the code, which is given here

var listBox = app.createListBox(true).setName('myList').setWidth('80px');