【问题标题】:Google App Script Bounded to Spreadsheet绑定到电子表格的 Google App 脚本
【发布时间】:2017-04-28 02:18:15
【问题描述】:

我想要完成的是用于项目管理的 Google 电子表格。我在网格中有很多单元格,用户应该选择项目是否已完成。现在这个电子表格将只对项目经理可用。我想象这个过程会起作用的方式是项目经理选择特定的单元格并将它们分配给技术人员的电子邮件地址。然后脚本将生成移动友好的 html UI 并将其发送给技术人员(我想到了 Google 表单,但我想创建更多定制的 UI)。然后,技术人员将在完成一项同时更新电子表格的任务后选择一个复选框。下次技术人员打开 UI 时,它会填充之前选中的所有复选框。 我发现我可以让它工作的唯一方法是绑定到电子表格的谷歌脚本网络应用程序。我创建了一个测试 HTML 文件和 .gs 文件:

.html 文件

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
   <h1> Web App Test </h1>
   <input type="button" value="Click Me" id="buttonclicked" onclick="getSomeData()"/> 
   <div id="output" class="current">output</div>
    
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
   </script>
   
   <script>
    
      
     function getSomeData()
     {       
       google.script.run
           .withSuccessHandler(onSuccess)
           .withFailureHandler(showError)
           .testForWebApp();     
       myLog("in WebAppTest.html getSomeData()");
     } 
     
     function onSuccess(testParam)
     {
       var div = document.getElementById('output');
       if (sectionName == null)
       div.innerHTML = "<p style='color:red;'>You didn't hit the script</p>";     
       else
       div.innerHTML = "<p style='color:white;'>" + testParam + "</p>";            
     }
      
     function showError()
     {
       var div = document.getElementById('output');
       
       div.innerHTML = "<p style='color:red;'>You didn't hit the script</p>";     
          
     }
   </script>
</body>

和 .gs 文件:

function doGet() 
{
  return HtmlService.createHtmlOutputFromFile('WebAppTest')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function testForWebApp()
{
  myLog("In testForWebApp()");
  var msg = "Yep you hit the script!";
  return msg;
}

function myLog(log)
{
//log = 'test';
  Logger.log(log);
  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();  
  var sheet = spreadsheet.getSheetByName('log');
  var lastRow = sheet.getLastRow();
  
  sheet.insertRowBefore(1);
  var newLogDateRange = sheet.getRange(1, 1);
  var newLogTextRange = sheet.getRange(1, 2);
  
  var now = new Date();
  newLogDateRange.setValue(now);
  newLogTextRange.setValue(log)
}

当我发布应用程序并点击生成的链接时,我看到我的 html 页面带有一个 Click Me 按钮。点击事件运行了getSomeData() 函数,该函数调用了google.script.run 函数。服务器端.testForWebApp() 被执行,因为我从myLog() 获得了一个日志条目,但从未调用过.withSuccessHandler.withFailureHandler。同时,应该在google.script.run 之后执行的myLog() 也永远不会运行。 我绝对不明白它是如何工作的,并且怀疑如果我将脚本作为 Web 应用程序发布,那么 HTML 将不再与脚本绑定,但我在网上找不到任何关于它的信息。 感谢您的帮助。

【问题讨论】:

    标签: javascript google-apps-script google-sheets


    【解决方案1】:

    首先,您不能从客户端 javascript 调用服务器端 myLog() 函数,除非您使用 google.script.run.myLog() 调用它因此

    myLog("in WebAppTest.html getSomeData()"); 
    

    在您的getSomeData() 中不会在您的 Google 表格中记录任何内容

    其次,函数onSuccess(testParam)中的这段代码

    if (sectionName == null)
    

    导致您的函数过早终止,因为没有定义名为 sectionName 的变量。

    注意:您可以在网络浏览器的控制台中监控所有这些错误。

    以下是修改后的代码,应该可以按照您的预期工作 最终代码:

    Web 应用测试

    输出

     function getSomeData()
     {       
       google.script.run
           .withSuccessHandler(onSuccess)
           .withFailureHandler(showError)
           .testForWebApp();     
       console.log("in WebAppTest.html getSomeData()");  //Log it on the browser console
     } 
    
     function onSuccess(testParam)
     {
       var div = document.getElementById('output');
       if (testParam == null)          // Changed it to testParam from sectionName, to check the value returned from testWebApp()
       div.innerHTML = "<p style='color:red;'>You didn't hit the script</p>";     
       else
       div.innerHTML = "<p style='color:black;'>Success:" + testParam + "</p>";            
     }
    
     function showError()
     {
       var div = document.getElementById('output');
    
       div.innerHTML = "<p style='color:red;'>You didn't hit the script</p>";     
    
     }
    

    编辑

    最后一点,下面的代码会使返回文本不可见,因为文本和背景颜色将是相同的颜色(白色):

    div.innerHTML = "<p style='color:white;'>Success:" + testParam + "</p>";
    

    因此在最终代码中将文本颜色更改为黑色

    希望有帮助!

    【讨论】:

    • 这个论坛很棒。我一直在努力寻找问题,而错误就在那里。非常感谢!终于可以进入下一个里程碑了。
    【解决方案2】:

    尝试重新部署网络应用,但要使用新的项目版本。

    【讨论】:

    • 我已经这样做了,但没有结果。感谢您的建议。
    • 即使在新的项目版本下?您是否检查过脚本编辑器中查看选项卡下的执行记录? -- 这应该能让您对任何执行错误有所了解。
    • 执行记录:
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-24
    • 2012-06-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多