User Interface‎ > ‎

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');