Web App测试

Question

我想要完成的是用于项目管理的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)
}

当我发布应用程序并按照生成的链接时，我看到了带有Click Me按钮的html页面。 click事件运行了getSomeData()函数，该函数调用了google.script.run函数。服务器端.testForWebApp()已执行，因为我从myLog()获得了一个日志条目，但.withSuccessHandler或.withFailureHandler从未被调用过。同时，myLog()之后应执行的google.script.run也不会运行。我绝对不明白它是如何工作的，并怀疑如果我将脚本作为Web应用程序发布，HTML就不再受到脚本的限制，但我无法在线找到任何有关它的信息。谢谢你的帮助。

Answer 1

尝试重新部署网络应用，但是在新的项目版本下。

Answer 2

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

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

您的getSomeData()中的

并未在Google工作表中记录任何内容

其次，这个代码在函数onSuccess(testParam)

中

if (sectionName == null)

导致函数提前终止，因为没有定义名为sectionName的变量。

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

以下是应该按照您的意图运行的修改后的代码最终代码：

Web App测试

输出

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

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

希望有所帮助！

Google App脚本绑定到电子表格

2 个答案:

Web App测试