您可以使用Modal Dialog盒子。该对话框可以包含自定义 HTML。
创建一个 onOpen() 函数
添加此代码：
// This will run when the spreadsheet is opened or the browser page is refreshed
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom Menu')
.addItem('Open Dialog Box', 'openDialog')
.addToUi();
}
That onOpen()函数将在电子表格打开时运行。
创建一个在选择菜单项时运行的函数
In a .gs脚本文件中添加这个函数。
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Put a Title Description HERE');
}
创建一个index.html文件
在 Apps 脚本代码编辑器中，
Choose:
输入此 HTML：
<br>
The NEW Zip: <input type="text" />
<br>
<br>
<input type="button" value="Get The Information" onclick='injectSomeText()'/>
<br>
<br>
<input type="button" value="Get Sheet Data" onclick='getSheetData()'/>
Here is your information!
<div id='myZipInfo'></div>
<br><br>
<input type="button" value="Close"
onclick="google.script.host.close()" />
<script>
window.injectSomeText = function() {
console.log('it ran');
document.getElementById('myZipInfo').textContent = 'This is test text. It worked!';
};
window.onSuccess = function(returnedData) {
document.getElementById('myZipInfo').textContent = returnedData;
}
window.getSheetData = function() {
google.script.run.withSuccessHandler(onSuccess)
.readSheetData();
}
</script>
以“index”名称保存文件
现在添加一些更多的代码Code.gs file.
Code.gs
function readSheetData() {
var sheet = SpreadsheetApp.getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 0; i < data.length; i++) {
Logger.log('Column One: ' + data[i][0]);
Logger.log('Column Two: ' + data[i][1]);
}
return data;
}
保存 Code.gs 文件并
使用 Google 电子表格刷新浏览器窗口，然后onOpen()函数将运行。
此示例展示了将 HTML、按钮和输入字段放入模态对话框的基础知识。
您可以创建一个名为：固定邮政编码，并让它运行你的postcodeFix()功能。
<input type="button" value="Fixed Post Code" onclick="google.script.run.postcodeFix()"/>
您仍然需要配置代码以从电子表格的正确行和列中检索数据，并找出将该信息注入 HTML 的最佳方法。您可能希望将数据配置为数组或对象或两者的某种组合。
此示例显示可以将 HTML 注入到对话框中。单击“获取信息”按钮，对话框中将出现文本。
请注意，index.html 文件的 HTML 中有一个 HTML SCRIPT 标记。实际上，您可以添加客户端 JavaScript 并让它在模态对话框中运行。
以下是针对您的电子表格的解决方案：
function readSheetData() {
var sheet = SpreadsheetApp.getActiveSheet();
var values = sheet.getDataRange().getValues();
var lookup = "Incorrect Postcode";
var data = [];
for (var i = 0; i < values.length; i++) {
Logger.log(values[i][65]);
if (values[i][65] == lookup){
data.push(values[i][3]); //Push Zip Code to Array
data.push(i+1); //Push Row Number to array which is same as iteration number + 1
}
};
Logger.log(data)
return data;
}
New HTML
<style>
table, td {
border: 1px solid black;
}
</style>
<input type="button" value="Get Bad ZIPs" onclick='getSheetData()'/>
<br>
<br>
<div id='msgInfo' style='display:none'> Here is your information! </div>
<br>
<table id="myTable">
<th>Zip Code</th>
<th>Row Number</th>
<th>New ZIP</th>
</table>
<br>
<br>
<input type="button" value="Close"
onclick="google.script.host.close()" />
<script>
window.onSuccess = function(returnedData) {
document.getElementById('msgInfo').style = 'display:inline';
// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");
console.log(returnedData.length);
for (var i=0; i < returnedData.length; i = i+2) {
console.log("i: " + i);
console.log("returnedData[i]: " + returnedData[i]);
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(i/2);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = returnedData[i];
cell2.innerHTML = returnedData[i+1];
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
cell3.appendChild(element1);
};
}
window.getSheetData = function() {
google.script.run.withSuccessHandler(onSuccess)
.readSheetData();
}
</script>
