Google应用程序将UI服务脚本编写为HTML服务 [英] Google apps script UI services to HTML services

问题描述

我尝试将以下简单的Google应用程序脚本代码转换为HTML服务代码。
以下代码是用弃用的 google应用脚本UI服务编写的！
任何人都可以使用这个用例中的HTML服务示例代码来帮助我吗？

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

推荐答案

你的UI输出看起来像这样：

Your Ui output looks like this:

创建一个HTML文件，并输入以下代码：

testForm.html

Create an HTML file, and enter this code:

<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 文件中添加代码：

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

这篇关于Google应用程序将UI服务脚本编写为HTML服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！