[英]Google Apps Script with HTML Forms
我正在使用HTML邊欄的Google加載項上工作。 邊欄具有帶復選框的HTML表單。 我希望根據一些已經初始化的用戶屬性,在用戶打開側欄時選中某些復選框。 (提交表單后,屬性將更新。它們都從on開始)。 這是側邊欄的代碼:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Settings</title>
<script>
function onSettingsOpen()
{
Logger.log("In the script");
console.log("In the script");
document.getElementById(propsList[0]).checked = (allPreferences.getProperty(propsList[0]) === "true");
document.getElementById(propsList[1]).checked = (allPreferences.getProperty(propsList[1]) === "true");
document.getElementById(propsList[2]).checked = (allPreferences.getProperty(propsList[2]) === "true");
document.getElementById(propsList[3]).checked = (allPreferences.getProperty(propsList[3]) === "true");
document.getElementById(propsList[4]).checked = (allPreferences.getProperty(propsList[4]) === "true");
document.getElementById(propsList[5]).checked = (allPreferences.getProperty(propsList[5]) === "true");
}
</script>
</head>
<body onload="onSettingsOpen()">
<form id="baseSettings" onsubmit="event.preventDefault(); google.script.run.processForm(this)">
<h2>What settings would you like to be on? Please select all that apply.</h2>
<br>
<input type="checkbox" name="checks" value="spaces" id="spaces">Double spaces
<br>
<input type="checkbox" name="checks" value="punctuation" id="punctuation">Punctuation outside of quotes
<br>
<input type="checkbox" name="checks" value="caps" id="caps">Capitilazation at beginning of sentences
<br>
<input type="checkbox" name="checks" value="contractions" id="contractions">Contractions
<br>
<input type="checkbox" name="checks" value="numbers" id="numbers">Small numbers
<br>
<input type="checkbox" name="checks" value="repWords" id="repWords">Repeated words
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
據我所知,Logger.logs和Console.logs沒有運行,這意味着該功能沒有運行。 但是,我在HTML腳本文件中找不到有關運行控制台/記錄器日志功能的文檔。 我不確定這是否是真正的原因。 我不知道要在哪里運行該函數,以便它實際上可以影響復選框。 我擔心在身體加載時運行它實際上不會對復選框產生任何影響-它必須在表單本身中運行。 我應該在哪里調用該函數?
這是我的創建設置窗格功能:
function openSettings ()
{
populateData ();
initializePreferences();
Logger.log("Data is initialized; pref 1 = " +
allPreferences.getProperty(propsList[0]));
var htmlOutput = HtmlService
.createHtmlOutputFromFile('Settings.html')
.setWidth(300)
.setTitle("Settings");
DocumentApp.getUi().showSidebar(htmlOutput);
}
任何幫助表示贊賞!
您可以在加載側欄時使用類似這樣的功能
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(data){
//initialize your checkboxes here
})
.getPropertData();//go to server side to get access to PropertiesService data
};
您的onSettingsOpen
引用propsList
,但這是未定義的。 您應該通過給函數提供參數來傳遞函數中的數據,例如onSettingsOpen(preferences)
。
假設您將這些首選項存儲在某些PropertiesService中 ,當您調用Properties.getProperties()時,您將獲得一個具有鍵,值對的對象。 如果使它們與HTML輸入的“ id”屬性匹配,則可以通過將id作為鍵來在對象中查找值。
在側邊欄中:
<script>
google.script.run.withSuccessHandler(onSettingsOpen).getAllPreferences();
// @param {Object} preferences - key, value pairs from Properties.getProperties()
function onSettingsOpen(preferences)
{
console.log("In the script");
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; ++i) {
checkboxes[i].checked = preferences[checkboxes[i].id];
}
}
</script>
服務器端代碼將需要適當的getAllPreferences
函數:
function getAllPreferences() {
return PropertiesService.getUserProperties().getProperties();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.