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');
  handler.addCallbackElement(listBox);
  listBox.addChangeHandler(handler);
  var infoLabel = app.createLabel('Select from List').setId('info');
  panel.add(listBox);
  panel.add(infoLabel);
  app.add(panel);
  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)
    .setStyleAttribute('color','#008000');
  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');
 
 


Comments