How To Create Web App in Google Script?

    0
    13
    Spread the love
    • 1
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
      1
      Share

    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??
    Don't miss out!
    Subscribe To Newsletter

    Receive top technical news, lesson ideas, travel tips and more!

    Invalid email address
    Give it a try. You can unsubscribe at any time.

    Spread the love
    • 1
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
      1
      Share

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here