Insert data in sheet using UI forms

In this example, I have created a form with two filelds, Name and Message. When user submits the form, entries are saved in an specified Spreadsheet.

Example Demo:

Spreadsheet preview where data is inserted after submit

Example Script:
var submissioSSKey = 'You Spreadsheet Key';//Change this key to your spreadsheet key
function doGet(){
  var app = UiApp.createApplication().setTitle('myApp');
  var panel = app.createVerticalPanel();
  var grid = app.createGrid(4, 2).setId('myGrid');
  var nameLabel = app.createLabel('Name');
  var nameTextBox = app.createTextBox().setWidth('150px').setName('name');
  var messageLabel = app.createLabel('Message');
  var messageTextArea = app.createTextArea().setWidth('150px').setName('message');
  var submitButton = app.createButton('Submit');
  var infoLabel = app.createLabel('Data inserted in sheet successfully..')
      .setVisible(false).setId('info');
  grid.setWidget(0, 0, nameLabel)
    .setWidget(0, 1, nameTextBox)
    .setWidget(1, 0, messageLabel)
    .setWidget(1, 1, messageTextArea)
    .setWidget(2, 1, submitButton)
    .setWidget(3, 1, infoLabel); 
  var handler = app.createServerClickHandler('insertInSS');
  handler.addCallbackElement(panel);
  submitButton.addClickHandler(handler);  
  panel.add(grid);
  app.add(panel);
  return app;
}

//Function to insert data in the sheet on clicking the submit button
function insertInSS(e){
  var app = UiApp.getActiveApplication();
  var name = e.parameter.name;
  var message = e.parameter.message;
  app.getElementById('info').setVisible(true).setStyleAttribute('color','red');
  
  var sheet = SpreadsheetApp.openById(submissioSSKey).getActiveSheet();
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 2).setValues([[name,message]]);
  return app;
}
 
 



Comments