Google apps script UI services to HTML services

Question

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;
}

Answer 1

Your Ui output looks like this:

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);
}