1

I try to convert this simple google apps script code below to HTML services code. The code below is written with the deprecated google apps script UI services! Can anyone help me with HTML services example code in this usecase?

// Script with deprecated UI-services
// How to create this app with HTML-services?!!!?
//This script runs in a google website.
//It has one textobject and 1 button.
//when the button is pressed the value entered is stored in the spreadsheet

ssKey = 'sheetkey....';  

function doGet(){ 
  var app = UiApp.createApplication().setTitle('myApp');

  //Create panels en grid
  var MainPanel = app.createVerticalPanel();
  var Vpanel1 = app.createVerticalPanel().setId('Vpanel2');
  var grid = app.createGrid(4, 2).setId('myGrid');

  //Vpanel1 widgets
  var nameLabel = app.createLabel('Name');
  var nameTextBox = app.createTextBox().setWidth('400px').setName('name').setId('name');
  var submitButton = app.createButton('Verstuur').setId('submitButton');
    grid.setWidget(0, 0, nameLabel)
    .setWidget(0, 1, nameTextBox)
     .setWidget(1, 1, submitButton);

  //Set handlers en callbackelement
  var handler = app.createServerClickHandler('InsertInSS');
  handler.addCallbackElement(Vpanel1);
  submitButton.addClickHandler(handler); 

  // build screen
  Vpanel1.add(grid);
  app.add(Vpanel1);

  return app;
}

function InsertInSS(e){
  var app =UiApp.getActiveApplication();
  var collectedData = [new Date(), e.parameter.name] ;

  var SS = SpreadsheetApp.openById(ssKey);
  var Sheet = SS.getSheetByName('Contacts');
  Sheet.getRange(Sheet.getLastRow()+1, 1, 1, collectedData.length).setValues([collectedData]);

  app.getElementById('submitButton').setVisible(false);

  //Reset fields on screen
  app.getElementById('name').setText("");

  return app;
}

1 Answers1

4

Your Ui output looks like this:

Ui Output

Create an HTML file, and enter this code:

testForm.html

<div>
  <div>
      Name: <input id='idNameField' type='text'/>
  </div>

  <br/>

  <input type='button' value='Verstuur' onmouseup='runGoogleScript()'/>
</div>

<script>
  function onSuccess(argReturnValue) {
    alert('was successful ' + argReturnValue);
    //Reset fields on screen
    Document.getElementById('idNameField').value = "";
  }

  function runGoogleScript() {
    console.log('runGoogleScript ran!');

    var inputValue = document.getElementById('idNameField').value;

    google.script.run.withSuccessHandler(onSuccess)
      .InsertInSS(inputValue);
  };

</script>

Copy the follow code into:

Code.gs

function doGet() {

  return HtmlService.createTemplateFromFile('testForm')
    .evaluate() // evaluate MUST come before setting the NATIVE mode
    .setTitle('The Name of Your Page')
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

In a seperate .gs file add this code:

function InsertInSS(argPassedInName){
  var ssKey = 'sheetkey....';

  var SS = SpreadsheetApp.openById(ssKey);
  var Sheet = SS.getSheetByName('Contacts');
  Sheet.getRange(Sheet.getLastRow()+1, 1, 1, argPassedInName.length).setValue(argPassedInName);
}
Alan Wells
  • 30,746
  • 15
  • 104
  • 152
  • 2
    While its great that you anwer these type of questions, s.o. is not the right place for this. There is no specific question or no effort shown in writting the code just "please write this for me". – Zig Mandel Mar 21 '15 at 14:48
  • 1
    If you would like, please see my profile, and send me an email about this issue. – Alan Wells Mar 21 '15 at 14:53
  • 1
    what do you mean, no effort shown in writing this code? I did put months of effort in writing this code, beginning from scratch with google apps script! I could not find a startingpoint to convert my applications to html-services, so i posted it on stackoverflow. Is that wrong then? –  Mar 22 '15 at 09:02