Ad Home

Theme images by kelvinjay. Powered by Blogger.

Travel

Header Ads

Java

Selenium

UFT

Framework

General QA Concept

BDD

» » » How To Create Web App in Google Script?

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??


«
Next
Newer Post
»
Previous
Older Post

No comments:

Leave a Reply