User Interface‎ > ‎

Check Box

In this example, I have made a group of  four check boxes and a submit button. When you check some of the check box/boxes and Click the submit button, It will show tell you, what are the checkbox you checked.


Example Demo:

Example Code:

function doGet() {
//Create an appliocation
var app = UiApp.createApplication();
//Create a panel
var panel = app.createVerticalPanel();
//Create the checkbox & set a name so that it's value can be accessed later.
var checkBox1 = app.createCheckBox("Check Box 1").setName('myCB1');
//Similarly create other 3 checkboxes and set their names
var checkBox2 = app.createCheckBox("Check Box 2").setName('myCB2');
var checkBox3 = app.createCheckBox("Check Box 3").setName('myCB3');
var checkBox4 = app.createCheckBox("Check Box 4").setName('myCB4');
//Create Submit Button
var submitButton = app.createButton("Submit");
//creatte click handler and add it to the submit button
var handler = app.createServerClickHandler('tellStatus');
handler.addCallbackElement(checkBox1)
.addCallbackElement(checkBox2)
.addCallbackElement(checkBox3)
.addCallbackElement(checkBox4);
submitButton.addClickHandler(handler);
handler.addCallbackElement(checkBox1)
.addCallbackElement(checkBox2)
.addCallbackElement(checkBox3)
.addCallbackElement(checkBox4);
submitButton.addClickHandler(handler);
//create a status label
satusLabel = app.createLabel("Select some checkbox")
.setId(
.setId("status");
//Add the checkboxes to the panel
panel.add(checkBox1);
panel.add(checkBox2);
panel.add(checkBox3);
panel.add(checkBox4);
//Add the status label to the panel
panel.add(satusLabel);
//Add the button to the panel
panel.add(submitButton);

//Add the penel to the Application
app.add(panel);
return app;
}
}
//Function to execute on click
function tellStatus(e){
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Checkbox1: ' + e.parameter.myCB1
+', Checkbox2: ' + e.parameter.myCB2
+', Checkbox3: ' + e.parameter.myCB3
+', Checkbox4: ' + e.parameter.myCB4)
.setStyleAttribute('color', '#f00');
//Logger.log("Hello")
return app;
}
 
 

Comments