带有HTML表单的Google Apps脚本

Question

我正在使用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);
}

任何帮助表示赞赏！

Answer 1

您可以在加载侧栏时使用类似这样的功能

<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
  };

客户端到服务器的通信

Answer 2

您的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();
}

带有HTML表单的Google Apps脚本

问题描述

2 个解决方案

解决方案1
2 2019-08-04 13:33:51

解决方案2
1 已采纳 2019-08-06 01:28:34

带有HTML表单的Google Apps脚本

问题描述

2 个解决方案

解决方案1 2 2019-08-04 13:33:51

解决方案2 1 已采纳 2019-08-06 01:28:34

解决方案1
2 2019-08-04 13:33:51

解决方案2
1 已采纳 2019-08-06 01:28:34