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.

    Ads code goes here
    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 Comment

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