如何创建一个网络应用程序，我可以根据下拉选择从 sheet 中读取文本？

How can I create a web app where I can read text from a sheet based on dropdown selections?

我正在尝试创建一个角色描述生成器，它从 Google Sheet 中读取预先编写的文本，并通过选择（团队、角色、资历级别）将其组装到 Web 应用程序的块中等）在下拉菜单中。

这是 sheet 中数据的示例：

Team name Team description
A-team Description
B-team Description
... ...

到目前为止，对于团队选择，我已经创建了从 sheet 读取数据的下拉菜单，并将每个团队的名称拉入下拉列表。但我的问题是将相应的团队描述文本加载到 HTML 页面中。我似乎无法让它工作。

按下生成按钮时，应该会加载 A 队的描述，但我得到的是 [object MouseEvent]。

有什么建议吗？提前致谢！ :)

这是我的代码：

Code.gs

var url = "*spreadsheet URL*";

function doGet(e) {
  
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

//get the data for the dropdown list
function valuesForList(list) {
  
  //define the data
  var ss = SpreadsheetApp.openByUrl(url)
  var teamsSheet = ss.getSheetByName('Data');
  var lastRow = teamsSheet.getLastRow();
  var teamsRange = teamsSheet.getRange(1, 3, lastRow, 1);
  
  //create a named range
  ss.setNamedRange('teamsList', teamsRange);
  
  //get the values from the range
  var listValues = ss.getRangeByName(list).getValues();
  
  return listValues;
   
}

//the function to show the data on the index.html
function PostInfo (userInfo){
  
  //load the data
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Teams"); 
  var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues();
  
  var teamList = data.map(function(r){ return r[0]});
  var teamDesc = data.map(function(r){ return r[1]});
  
  var position = teamList.indexOf(userInfo.teams);
  if(position > -1){
    
    return teamDesc[position]; 
    
  } else {
  
  return "Unavailable";
  }
  
}

index.html

<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
    
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
    
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  
    <script>
   
    function onListSuccess(list) {
    
      var listLength = list.length;
      
      for (i=0; i<listLength;i++) {
        var dropdown = document.getElementById("teams");
        
        var opt = document.createElement("option");
        
        dropdown.options.add(opt);
        
        opt.text = list[i][0];
        opt.value = list[i][0];
              
      }
       
    }    
       
    function onListSelect(teamDesc){
    
    var text = teamDesc.toString().split(",");
    
    document.getElementById('est').innerHTML = text;  
  }
  
    
  </script>
 
  </head>
  
  
  <body>
    <div id="main">
    <h1>Role Description Generator</h1>
    <p>
      <label for="teams">Team:</label>
    </p>
    <p>
      <select name="teams" id="teams" tabindex="2"></select>
    </p>
        <button id="btn">Generate</button>
    <div>   
       <label for="est">Team description:</label>
        <p id="est" name="est"></p>
    </div>
    </div>
  </body>
  
  
  <script>
 
  function populateList(){
  google.script.run.withSuccessHandler(onListSuccess).valuesForList('teamsList');
  }
   
   
  document.getElementById("teams").addEventListener("change", doStuff);
  document.getElementById("btn").addEventListener("click", onListSelect);
    
  function doStuff(){
  
  var userInfo = {};
  
  userInfo.teams = document.getElementById("teams").value;
  
  google.script.run.PostInfo(userInfo);
  
  }
  
  window.addEventListener('load', populateList);
  
  </script>

</html>

修改点：

  • 在您的脚本中，当下拉列表更改时，doStuff() 为 运行。但在这种情况下，google.script.run.PostInfo(userInfo) 运行 仅在 Google Apps 脚本中具有 PostInfo 的功能。这样，返回值就不会被使用了。
  • 并且，单击按钮时，onListSelect 为 运行。但在这种情况下，teamDesc of onListSelect(teamDesc) 是事件对象。这样，显示了 [object MouseEvent] 这样的值。我认为这可能是您遇到问题的原因。
  • 顺便说一句，当我看到您的 Google Apps 脚本时，我注意到 PostInfo 有一个修改点。当var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues(); 为运行 时，我认为发生错误。因为 ws2 没有声明。在您的情况下，是 ws 吗？我认为这可能是您复制错误造成的。

当你想在点击按钮时显示来自PostInfo的值，下面的修改怎么样？

修改后的脚本：

HTML&Javascript 边:

从： 
document.getElementById("teams").addEventListener("change", doStuff);
document.getElementById("btn").addEventListener("click", onListSelect);
  
function doStuff(){

var userInfo = {};

userInfo.teams = document.getElementById("teams").value;

google.script.run.PostInfo(userInfo);

}
到： 
document.getElementById("btn").addEventListener("click", doStuff);

function doStuff(){
  var userInfo = {};
  userInfo.teams = document.getElementById("teams").value;
  google.script.run.withSuccessHandler(onListSelect).PostInfo(userInfo);
}

Google Apps 脚本端：

从： 
var ws = ss.getSheetByName("Teams"); 
var data = ws.getRange(2,1,ws2.getLastRow(),2).getValues();
到： 
var ws = ss.getSheetByName("Teams"); 
var data = ws.getRange(2,1,ws.getLastRow(),2).getValues();

注：

  • 在此修改中，它假设 Google Apps 脚本工作正常并且 returns 正确的值。请注意这一点。

参考：