我需要使用側邊欄來獲取一些變數，然后使用 AppScript 在作業表的最后一行列印。所以，我試圖使用這個代碼：
側邊欄.HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Name: <input type="text" name="txtName" /></p>
<p>Date: <input type="text" name="txtDate" /></p>
<p>Value: <input type="text" name="txtValue" /></p>
<button onclick="doSomething()"> submit </button>
<script>
function doSomething() {
google.script.run.withFailureHandler(myFunction(document.getElementById("txtName", "txtDate", "txtValue").value))
}
</script>
</body>
</html>代碼.js
function myFunction(name = "", date = "", value = "") {
var ss = SpreadsheetApp.getActive()
var sheet = ss.getSheetByName("1")
var lr = sheet.getLastRow() 1
sheet.getRange(lr, 1).setValue(name)
sheet.getRange(lr, 2).setValue(date)
sheet.getRange(lr, 3).setValue(value)
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile("Sidebar");
html.setTitle("Form");
SpreadsheetApp.getUi().showSidebar(html);
}但它不起作用。當我點擊按鈕時，什么也沒有發生。我是 HTML 新手，所以，我可以做些什么來修復它？
uj5u.com熱心網友回復：
看起來你幾乎所有的東西都正確，除了Sidebar.HTML檔案中的兩件事——
- 鑒于您正在使用
getElementById，您還需要id在input欄位中添加一個標簽 - 的實作
google.script.run.withFailureHandler似乎有點偏離。您可以通讀
您可以從側邊欄中呼叫許多服務器端功能。我有一個電子表格，用于回答有關 SO 的問題，其中大部分腳本位于五個檔案中，它們位于關鍵 sbfiles 下的全域哈希表中。目前他們是 ag1,ag2,ag3,ag4,zkeepers。
選擇下拉串列中的名稱是動態的，每次重新加載側邊欄時都會讀取。
當我使用以下功能加載側邊欄時：
有了這個功能：
function showToolsSideBar() { var userInterface = HtmlService.createTemplateFromFile('toolsSideBar').evaluate().setTitle('SO Tools'); SpreadsheetApp.getUi().showSidebar(userInterface); }這將加載具有以下四個按鈕的 toolsSideBar.html：
<br /><strong>Test Buttons</strong> <br /><input type="button" value="run1()" onClick="execFunc1();" /><select id="func1"></select> <br /><input type="button" value="run2()" onClick="execFunc2();" /><select id="func2"></select> <br /><input type="button" value="run3()" onClick="execFunc3();" /><select id="func3"></select> <br /><input type="button" value="run4()" onClick="execFunc4();" /><select id="func4"></select> <hr />這是一個模板化的 html 檔案，其中包含以下行：
<?!= include('sbscript') ?>并且 sbscript.html 包含：
$(function(){ google.script.run .withSuccessHandler(function(vA){ let idA=["func1","func2","func3","func4"]; idA.forEach(function(id){ updateSelect(vA,id); }); }) .getProjectFunctionNames(); var elem = document.getElementById("permnotes1"); var v = localStorage.getItem(elem.name); if(v) {elem.value = v;} elem.addEventListener("change",saveText); //console.log('elem.name: %s',elem.name); })它呼叫此服務器端函式 getProjectFunctionNames()：
function getProjectFunctionNames() { const vfilesA=getGlobal('sbfiles').split(','); const scriptId="script id"; const url = "https://script.googleapis.com/v1/projects/" scriptId "/content?fields=files(functionSet,name)"; const options = {"method":"get","headers": {"Authorization": "Bearer " ScriptApp.getOAuthToken()}}; const res = UrlFetchApp.fetch(url, options); let html=res.getContentText(); //SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Project Functions"); let data=JSON.parse(res.getContentText()); let funcList=[]; let files=data.files; files.forEach(function(Obj){ if(vfilesA.indexOf(Obj.name)!=-1) { if(Obj.functionSet.values) { Obj.functionSet.values.forEach(function(fObj){ funcList.push(fObj.name); }); } } }); //SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(funcList.join(', ')), "Project Functions"); return funcList; }This function uses the apps script api to read all of the files in my global hash table key sbfiles. That list is returned to the success handler of the javascript function and using this function it loads the select boxes for each of the four buttons in the html file using this script:
function updateSelect(vA,id){ var id=id || 'sel1'; var select = document.getElementById(id); select.options.length = 0; vA.unshift(""); for(var i=1;i<vA.length;i ){ select.options[i] = new Option(vA[i],vA[i]); } }Which returns us back to this:
<br /><strong>Test Buttons</strong> <br /><input type="button" value="run1()" onClick="execFunc1();" /><select id="func1"></select> <br /><input type="button" value="run2()" onClick="execFunc2();" /><select id="func2"></select> <br /><input type="button" value="run3()" onClick="execFunc3();" /><select id="func3"></select> <br /><input type="button" value="run4()" onClick="execFunc4();" /><select id="func4"></select> <hr />You may select any of the function names via any of the four select dropdowns and then press the button to the left and you will call the function in the select drop down to the right of the button:
function execFunc1() { var funcname=$('#func1').val(); google.script.run.executeFunctionByName(funcname); } function execFunc2() { var funcname=$('#func2').val(); google.script.run.executeFunctionByName(funcname); } function execFunc3() { var funcname=$('#func3').val(); google.script.run.executeFunctionByName(funcname); } function execFunc4() { var funcname=$('#func4').val(); google.script.run.executeFunctionByName(funcname); }which will then call this function:
function executeFunctionByName(func) { this[func](); }Which in turn calls the functions by name in the files found in the hash table key of sbfiles.
這使我可以在開發它們時從側欄中呼叫我在任何這些檔案中開發的任何功能，只需為四個可能的按鈕中的每一個選擇它們中的每一個，最終呼叫該功能其名稱出現在與該功能關聯的選擇框中。這使得測驗我目前正在處理的代碼很方便。
在開發新代碼以便能夠直接訪問最新代碼時，這是一個非常方便的功能。在開發新的對話框代碼時，這真的很方便，因為您可以從側邊欄重新呼叫您正在處理的函式：
演示：
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395421.html標籤：javascript html 谷歌应用程序脚本 谷歌表格 侧边栏