Google Apps腳本UI服務轉換為HTML服務

Question

我嘗試將下面的這個簡單的Google Apps腳本代碼轉換為HTML服務代碼。 以下代碼是使用不推薦使用的 Google Apps腳本UI服務編寫的！ 在這個用例中，誰能幫我提供HTML服務示例代碼？

// 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

您的Ui輸出看起來像這樣：

創建一個HTML文件，然后輸入以下代碼：

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>

將以下代碼復制到：

代碼

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

在單獨的.gs文件中添加以下代碼：

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