如何修改和转换Google app UI 成HTML

Question

我尝试将下面这个简单的 google 应用程序脚本代码转换为 HTML 服务代码。下面的代码是使用已弃用的 google 应用程序脚本 UI 服务编写的！谁能帮我解决这个用例中的 HTML 服务示例代码？

我不太确定如何处理它，因为我已经编写代码太久了。

如果能提供一点帮助，我们将不胜感激。

谢谢！！

米雷亚

function() {  
  var ss = SpreadsheetApp.getActiveSpreadsheet();    
  var app = UiApp.createApplication();
  app.setHeight(400);
  var scriptProps = PropertiesService.getScriptProperties(); 
  
  var label1 = app.createLabel('XERO Settings').setStyleAttribute('font-weight', 'bold').setStyleAttribute('padding', '5px').setId('label1');        
  var panel1 = app.createVerticalPanel().setId('panel1');
  var grid = app.createGrid(7, 2);
  var absPanel = app.createAbsolutePanel();  
  
  var handler = app.createServerHandler('saveSettings');    
  var clientHandler1 = app.createClientHandler();  
  var clientHandler2 = app.createClientHandler();    
  var clientHandler3 = app.createClientHandler();    
  
  var btnSave = app.createButton('Save Settings', handler);       
  var lblAppType = app.createLabel('Application Type: ');    
  var appTypes = {Private:0, Public:1, Partner:2};
  var listAppType = app.createListBox().setName('appType').addItem('Private').addItem('Public').addItem('Partner').addChangeHandler(clientHandler1).
  addChangeHandler(clientHandler2).addChangeHandler(clientHandler3).setSelectedIndex(appTypes[(scriptProps.getProperty('appType') != null ? scriptProps.getProperty('appType'): 'Private')]);  
  handler.addCallbackElement(listAppType);
  
  var lblAppName = app.createLabel('Application Name: ');  
  var txtAppName = app.createTextBox().setName('userAgent').setWidth("350")
  .setValue((scriptProps.getProperty('userAgent') != null ? scriptProps.getProperty('userAgent'): ""));
  handler.addCallbackElement(txtAppName);
  
  var lblConsumerKey = app.createLabel('Consumer Key: ');  
  var txtConsumerKey = app.createTextBox().setName('consumerKey').setWidth("350")   
  .setValue((scriptProps.getProperty('consumerKey') != null ? scriptProps.getProperty('consumerKey'): ""));
  handler.addCallbackElement(txtConsumerKey);  
  
  var lblConsumerSecret = app.createLabel('Consumer Secret: ');  
  var txtConsumerSecret = app.createTextBox().setName('consumerSecret').setWidth("350")
    .setValue((scriptProps.getProperty('consumerSecret') != null ? scriptProps.getProperty('consumerSecret'): ""));
  handler.addCallbackElement(txtConsumerSecret);
  
  var lblcallBack = app.createLabel('Callback URL:');
  var txtcallBack = app.createTextBox().setName('callBack').setWidth("350")
    .setValue((scriptProps.getProperty('callbackURL') != null ? scriptProps.getProperty('callbackURL'): ""));
  handler.addCallbackElement(txtcallBack);
  
  var lblRSA = app.createLabel('RSA Private Key:');
  var txtareaRSA = app.createTextArea().setName('RSA').setWidth("350").setHeight("150")
    .setValue((scriptProps.getProperty('rsaKey') != null ? scriptProps.getProperty('rsaKey'): ""));  
  
  if (scriptProps.getProperty('appType') == "Private" || scriptProps.getProperty('appType') == null)     
    txtcallBack.setEnabled(false);
  else if (scriptProps.getProperty('appType') == "Public")     
    txtareaRSA.setEnabled(false);
  
  handler.addCallbackElement(txtareaRSA);  
  clientHandler1.validateMatches(listAppType, 'Private').forTargets(txtcallBack).setEnabled(false).forTargets(txtareaRSA).setEnabled(true);
  clientHandler2.validateMatches(listAppType, 'Public').forTargets(txtcallBack).setEnabled(true).forTargets(txtareaRSA).setEnabled(false);
  clientHandler3.validateMatches(listAppType, 'Partner').forTargets(txtcallBack).setEnabled(true).forTargets(txtareaRSA).setEnabled(true);
  
  grid.setBorderWidth(0);
  grid.setWidget(0, 0, lblAppType);
  grid.setWidget(0, 1, listAppType);  
  grid.setWidget(1, 0, lblAppName);
  grid.setWidget(1, 1, txtAppName);
  grid.setWidget(2, 0, lblConsumerKey);
  grid.setWidget(2, 1, txtConsumerKey);  
  grid.setWidget(3, 0, lblConsumerSecret);
  grid.setWidget(3, 1, txtConsumerSecret);
  grid.setWidget(4, 0, lblcallBack);
  grid.setWidget(4, 1, txtcallBack);
  grid.setWidget(5, 0, lblRSA);
  grid.setWidget(5, 1, txtareaRSA);
  grid.setWidget(6, 1, btnSave);  
  panel1.add(grid).setStyleAttributes(subPanelCSS);    
  app.add(label1);
  app.add(panel1);  
  ss.show(app);  
}

Answer 1

描述

遗憾的是没有转换器。你的对话相对简单，我想我已经捕捉到了所有有趣的东西。我希望你处理属性服务。

在对话框中，我将 appType 从 Public 更改为 Private，以表明更改后的值已发送到属性服务的服务器，如执行日志中所示。

我无意中将 include 放在了 Code.gs 中，因为我通常将 CSS 放在一个文件中，将 HTML 放在另一个文件中，将 js 放在第三个文件中。在这种情况下我没有这样做。

HTML_Test

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      #label1 { font-weight: bold; }
     .textBox { width: 350px; }
     .table { display: table; }
      .table-row { display: table-row; }
      .table-cell { display: table-cell; }
    </style>
  </head>
  <body>
    <p id="label1">XERO Settings</p>
    <div class="panel1">
      <div class="table">
        <div class="table-row">
          <div class="table-cell">Application Type:</div>
          <div class="table-cell">
            <select class="textBox" id="appType" onchange="appTypeOnChange()">
              <option>Private</option>
              <option>Public</option>
              <option>Partner</option>
            </select>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Application Name:</div>
          <div class="table-cell">
            <input class="textBox" id="userAgent" value=<?= userAgent?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Consumer Key:</div>
          <div class="table-cell">
            <input class="textBox" id="consumerKey" value=<?= consumerKey ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Consumer Secret:</div>
          <div class="table-cell">
            <input class="textBox" id="consumerSecret" value=<?= consumerSecret ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Callback URL:</div>
          <div class="table-cell">
            <input class="textBox" id="callBack" value=<?= callBack ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">RSA Private Key:</div>
          <div class="table-cell">
            <input class="textBox" id="rsaKey" value=<?= rsaKey ?>>
          </div>
        </div>
      </div>
    </div>
    <input class="btnSave" type="button" value="Save Settings" onclick="saveSettings()">
    <script>
      function appTypeOnChange() {
        let value = document.getElementById("appType").value;
        if( value == "Private" ) {
          document.getElementById("callBack").disabled = true;
          document.getElementById("rsaKey").disabled = false;
        }
        else if( appType == "Public" ) {
          document.getElementById("callBack").disabled = false;
          document.getElementById("rsaKey").disabled = true;
        }
        else {
          document.getElementById("callBack").disabled = false;
          document.getElementById("rsaKey").disabled = false;
        }
      }

      function saveSettings() {
        let props = {};
        props.appType = document.getElementById("appType").value;
        props.userAgent = document.getElementById("userAgent").value;
        props.consumerKey = document.getElementById("consumerKey").value;
        props.consumerSecret = document.getElementById("consumerSecret").value;
        props.callBack = document.getElementById("callBack").value;
        props.rsaKey = document.getElementById("rsaKey").value;
        props = JSON.stringify(props);
        google.script.run.setProperties(props);
      }

      (function () {
        let appType = <?= appType ?>;
        document.getElementById("appType").value=appType;
        if( appType == "Private" ) {
          document.getElementById("callBack").disabled = true;
        }
        else if( appType == "Public" ) {
          document.getElementById("rsaKey").disabled = true;
        }
      }());
    </script>
  </body>
</html>

对话框

Code.gs

function showTest() {
  try {
    let html = HtmlService.createTemplateFromFile('HTML_Test');
    html.appType = "Public";
    html.userAgent = "John Smith";
    html.consumerKey = "12345678";
    html.consumerSecret = "My Secret";
    html.callBack = "www.goggle.com";
    html.rsaKey = "abcdefg";
    html = html.evaluate();
    SpreadsheetApp.getUi().showModalDialog(html,"Show Test");
  }
  catch(err) {
    SpreadsheetApp.getUi().alert(err);
  }
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
};

function setProperties(props) {
  Logger.log(props);
}

执行日志

Head    setProperties   Unknown May 11, 2022, 8:27:15 AM    0.57 s  
Completed
Cloud logs
May 11, 2022, 8:27:16 AM    Info    {"appType":"Private","userAgent":"John Smith","consumerKey":"12345678","consumerSecret":"My Secret","callBack":"www.goggle.com","rsaKey":"abcdefg"}

参考

HTML Service Templated HTML

如何修改和转换Google app UI 成HTML

How to modify and convert Google app UI into HTML

api

user-interface

google-sheets

google-apps-script