在 appscript 中创建详细视图选项卡时遇到问题答案

【问题标题】：Trouble creating detail view tab in appscript在 appscript 中创建详细视图选项卡时遇到问题
【发布时间】：2021-01-16 08:22:13
【问题描述】：

实际上，我正在尝试在 google 表格中创建信息模态，以提取与代码匹配的数据，从主表格中获取数据，它应该以模态显示数据，但不知何故，我在传递从主表格中提取的值时遇到了问题工作表到 html 输出文件并以模式显示。它在示例模式中显示为这样，有人可以帮助我理解，我做错了什么吗？虽然我对代码不太熟悉，所以如果我做的事情完全错误，请原谅我：P

链接到示例电子表格：- https://docs.google.com/spreadsheets/d/1f5dGCTzMMCRqZB5hDVTbtHaxS1VNuz0IJOlCXjSNHyI/edit?usp=sharing

当用户单击 sheet1 上的复选框时，脚本运行并显示 msgbox。

function onEdit() {
  
    var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
    var Deleg = SpreadsheetApp.openById('1f5dGCTzMMCRqZB5hDVTbtHaxS1VNuz0IJOlCXjSNHyI').getSheetByName('Delegation Merged Data');
    var aRow =  ss.getActiveCell().getRow();
    var code =  ss.getRange(aRow, 1, 1, 1).getValue();
    ss.getRange(1, 3).setValue(code);
    
    var DelegData = Deleg.getRange(2, 1, Deleg.getLastRow()-1, 7).getDisplayValues();
    Logger.log(DelegData);
    
    var DelegTDetails = DelegData.filter(function(Details){
                    return Details[0] == code   ;
    });

  const htmlTemplate = HtmlService.createTemplateFromFile("Template");
  htmlTemplate.DelegTDetails = DelegTDetails;
  
  var html = HtmlService.createHtmlOutputFromFile('Template')
     .setWidth(1000)
     .setHeight(800);    
      
 SpreadsheetApp.getUi()
    .showModalDialog(html, 'Detail View'+'Test');
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Details View for Firmware Data</h2>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <table style="border-collapse: collapse;
    border: 1px solid black;text-align: center;
     font-family: Arial, Helvetica, sans-serif;
  width: 100%">
        <thead>
             <tr >
                 <th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Delegation Code</th>
                 <th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Assignee</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Assigned by</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Task Name</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Raised on</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Completed on</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Status</th>
             </tr>      
       </thead>
       <tbody>
             <? var a = 1 ;
             DelegTDetails.forEach((r,i) => { ?>
              <tr><td style = "border: 1px solid black;
  border-collapse: collapse"><?= a ?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[0]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[1]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[2]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[3]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[4]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[5]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[6]?></td>
              </tr>
             <?
             a = a+1;
             }) ?>
       </tbody>
    
    </table>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript html google-apps-script google-sheets

【解决方案1】：

修改点：

在您的脚本中，使用了 HTML 模板。但是SpreadsheetApp.getUi().showModalDialog(html, 'Detail View'+'Test') 的html 不包括DelegTDetails 的值。我认为这可能是您的问题的原因。
当我看到你的脚本时，const htmlTemplate = HtmlService.createTemplateFromFile("Template") 被声明了。但是，这个好像没有用。

为了消除这个问题，下面的修改如何？

修改脚本：

请按如下方式修改您的 Google Apps 脚本。

从：

 const htmlTemplate = HtmlService.createTemplateFromFile("Template");
 htmlTemplate.DelegTDetails = DelegTDetails;
 
 var html = HtmlService.createHtmlOutputFromFile('Template')
    .setWidth(1000)
    .setHeight(800);    
     
SpreadsheetApp.getUi()
   .showModalDialog(html, 'Detail View'+'Test');

到：

const htmlTemplate = HtmlService.createTemplateFromFile("Template");
htmlTemplate.DelegTDetails = DelegTDetails;
SpreadsheetApp.getUi().showModalDialog(htmlTemplate.evaluate().setWidth(1000).setHeight(800), 'Detail View'+'Test');

注意：

在此修改中，它假设DelegTDetails 的值是您期望的值。请注意这一点。

参考：

HTML Service: Templated HTML

【讨论】：