User Interface‎ > ‎

Radio Buttons

In this example, I have created 2 radio buttons which are identified as group1.
Once the button is selected, it will show you, which button has been selected.

Reference Page:

Example Demo:

Example Code:

function doGet() {
  //Create application
  var app = UiApp.createApplication().setTitle('Radio Button Demo');
  //Create a panel
  var radioPanel = app.createVerticalPanel();
  //Create Radio Buttons with group name 'group1'
  var radio1 = app.createRadioButton('group1', 'First Option').setName('First').setId('First');
  var radio2 = app.createRadioButton('group1', 'Second Option').setName('Second').setId('Second');
  var infoLabel = app.createLabel().setVisible(false).setId('statusInfo').setStyleAttribute('color', '#f00');
 
  //Create a Change Handler
  var handler1 = app.createServerValueChangeHandler('showstatus1');
  handler1.addCallbackElement(radioPanel);
  //Add this handler to the radio Buttons
  radio1.addValueChangeHandler(handler1);
  //Similraly for second radios...
  var handler2 = app.createServerValueChangeHandler('showstatus2');
  handler2.addCallbackElement(radioPanel);
  radio2.addValueChangeHandler(handler2);
 
  //Add all the buttons to the panel
  radioPanel.add(radio1)
    .add(radio2)
    .add(infoLabel);
  //Add the panel to the application
  app.add(radioPanel);
  //return the application
  return app;
}

function showstatus1(e){
  var app = UiApp.getActiveApplication();
  var radioValue = e.parameter.First;
  app.getElementById('Second').setValue(false);
  app.getElementById('statusInfo').setVisible(true).setText('You have selected first radio:' + radioValue);
  return app;
}

function showstatus2(e){
  var app = UiApp.getActiveApplication();
  var radioValue = e.parameter.Second;
  app.getElementById('First').setValue(false);
  app.getElementById('statusInfo').setVisible(true).setText('You have selected second radio:' + radioValue);
  return app;
}
 
 

Comments