应用程序脚本将值从服务器函数返回到 html 表单答案

【问题标题】：Apps script return values from server function to html form应用程序脚本将值从服务器函数返回到 html 表单
【发布时间】：2021-03-18 07:44:32
【问题描述】：

我需要 Apps 脚本方面的专业人员的帮助。我有由 web-app 实现的项目。我在服务器部分写了脚本

var url = "https://docs.google.com/spreadsheets/d/1s8l-8N8dI-GGJi_mmYs2f_88VBcnzWfv3YHgk1HvIh0/edit?usp=sharing";
var sprSRCH = SpreadsheetApp.openByUrl(url);
let sheetSRCHSSCC = sprSRCH.getSheetByName("PUTAWAY_TO");
 
function GetQ(){
  
  var QPLAN = sheetSRCHSSCC.getRange("M2:M").getValues().filter(String).length;
  var myArray = sheetSRCHSSCC.getRange("O2:O" + (QPLAN + 1)).getValues();
  
  var QFACT = 0;
   for (i = 0; i < myArray.length; i++) { 
     if (myArray[i] != "") {
       QFACT += 1
     }
   }
   
}

I need to return values from this function to inputs:
QFACT to FACT
QPLAN to PLAN

            <div class="input-field col s3">
              <input disabled value="" id="PLAN" type="text" >
              <label for="disabled">PLAN</label>
            </div>
            <div class="input-field col s3">
              <input disabled value="" id="FACT" type="text" >
              <label for="disabled">FACT</label>
            </div>

我将不胜感激。我是新手））

【问题讨论】：

你可以使用模板化的html
什么意思？看起来怎么样？
它会在呈现 html 之前在评估方法服务器端加载您想要的数据。转到文档搜索并输入模板化的 html

标签： google-apps-script web-applications

【解决方案1】：

如果您使用 Apps Script 部署 Web App，我可以看到 2 种可能性：

1/ 在页面加载时获取数据（并且仅在加载时）：

在 code.gs 中：

function doGet() {
  var tmp = HtmlService.createTemplateFromFile('page');
  tmp.QFACT = "hello";
  tmp.PLAN = "World!";
  return tmp.evaluate();
}

在 page.html 中：

<html>
  <body>
    <h5><?= QFACT ?></h5>
    <h5><?= QPLAN ?></h5>
  </body>
</html>

2/如果需要点击按钮或者其他方式刷新数据，则需要进行不同的操作：

在你的项目中添加一个page-js.html，并在你的page.html末尾绑定它

<html>
  <body>
    <h5 id="QFACT"></h5>
    <h5 id="QPLAN"></h5>
  </body>
  <?!= include("page-js"); ?> 
</html>

然后在你的 page-js.html 中：

<script>
  function refresh() {
    google.script.run.withSuccessHandler(callback).refresh();
  }

  function callback(e) {
    document.getElementById('QPLAN').innerHTML = e.QPLAN;
    document.getElementById('QFACT').innerHTML = e.QFACT;
  }
</script>

最后在你的 code.gs 中添加 refresh() 函数：

  function refresh() {
    var obj = {};

    obj.QPLAN = "QPLAN";
    obj.QFACT = "QFACT";

    return obj;
  }

【讨论】：

非常感谢。我要拿第二个版本））我必须在这里定期重启哪个功能？
要定期刷新，需要在JS文件中添加setTimeout()函数。文档：w3schools.com/jsref/met_win_settimeout.asp
setTimeout 这里有毫秒？
是的，如文档中所述:)