How To Create Web App in Google Script?

Share and Enjoy !

Image credit Google.com
Objective:

I have Seen Google script first in a tech fest organized by Google. In this post we will prepare a small web app  by using Google script.

The App will consist 1 text box.
1 submit button

after clicking on Submit button the app will print the text to the label.

Design:

Google app script is similar to layout concept in java.You can check the layout concept in java here.The default layout is flow layout which will contain single component.But Google script supports different layouts as well.

Implementation:

To create an app the code will be

var app = UiApp.createApplication();

Now we will create the vertical panel.

var Vpanel = app.createVerticalPanel();

Similarly we need to create Horizontal panel.We need to create 2 horizontal panels

var Hpanel1=app.createHorizontalPanel();
var Hpanel2=app.createHorizontalPanel();

Now we need to create the components,like label,textbox

var label1=app.createLabel('Enter your Name................... ');
var textBox=app.createTextBox();
textBox.setName('myTextBox').setId('myTextBox');

Structuring the app..

Hpanel1.add(label1);
Hpanel1.add(textBox);
Vpanel.add(Hpanel1);

How to create button in App script?

var button = app.createButton('Click Me');
app.add(button);

Now add a handler to button

var handler = app.createServerHandler('myClickHandler');
button.addClickHandler(handler);
handler.addCallbackElement(Vpanel);

Let us look into the handler function now. What will happen after clicking on the button.It will fetch the value from the text box and print it to level.

var textBoxValue = e.parameter.myTextBox; 
panel.add(app.createHTML('Hi You are...'+textBoxValue));
app.add(panel);
Code:

Below is the full implementation of the app created in Google Script.

function doGet() {
var app = UiApp.createApplication();
//Create app
var Vpanel = app.createVerticalPanel();
//Create vericle panel
var Hpanel1=app.createHorizontalPanel();
var Hpanel2=app.createHorizontalPanel();
//Create horizontal panels
var label1=app.createLabel('Enter your Name................... ');
//Create labels
var textBox=app.createTextBox();
//Create textbox
textBox.setName('myTextBox').setId('myTextBox');
//Set attribute to textbox
Hpanel1.add(label1);
//Adding label to Horintal panel
Hpanel1.add(textBox);
//Add textbox to Horizontal Panel
Vpanel.add(Hpanel1);
//Add Horizontal Panel to Verticle Panel
app.add(Vpanel);
//Add Verticle Panel to App
var button = app.createButton('Click Me');
//Create button
app.add(button);
//Add button to App
var label = app.createLabel('Please Enter Details.')
.setId('statusLabel')
.setVisible(false);
//Create label and adding propertise to Label
app.add(label);
//Add label to App
var handler = app.createServerHandler('myClickHandler');
//Create handler
button.addClickHandler(handler);
//Add Handler to button
handler.addCallbackElement(Vpanel);
// This code get value from the elements present in the Varticle panel
return app;
}

function myClickHandler(e) {
var app = UiApp.getActiveApplication();
var textBoxValue = e.parameter.myTextBox;
//Get Value from Testbox
var panel=app.createHorizontalPanel();

panel.add(app.createHTML('Hi You are...'+textBoxValue));
//Print the Value in Panel
app.add(panel);
//Add the Panel
return app;
}
Output??

Share and Enjoy !

Leave a Reply

Your email address will not be published. Required fields are marked *