Google 应用程序脚本 UI 服务到 HTML 服务

Question

我尝试将下面这个简单的 google 应用程序脚本代码转换为 HTML 服务代码。下面的代码是用 已弃用 google 应用程序脚本 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>

将以下代码复制到：

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

在单独的 .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);
}

Google 应用程序脚本 UI 服务到 HTML 服务

Google apps script UI services to HTML services

user-interface

google-apps-script

testForm.html

Code.gs