Google Apps Script with HTML Forms

Question

I am working on a google add-on which uses an HTML sidebar. The sidebar has an HTML form with checkboxes. I want some of the checkboxes to be checked when the user opens the sidebar, based on some User Properties that will already have been initialized. (When the form submits, the Properties are updated. They all start as on). Here is the code for the sidebar:

<!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>

So as far as I can tell, the Logger.logs and Console.logs aren't running, which implies that the function just isn't running. However, I could not find documentation on running Console/Logger Log functions in an HTML script file; I'm not sure if that is actually the telling factor. What I can't figure out is where to run the function so that it can actually effect the checkboxes. I fear that running it onload of the body won't actually do anything to the checkboxes- it would have to run within the form itself. Where should I call the function?

Here is my create settings pane function:

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

Any help appreciated!

This allPreferences.getProperty(propsList[1]) looks like a call to PropertiesService which is a server side function. To goto the server from the client you will need to use google.script.run. — Cooper
– Cooper, Commented Aug 4, 2019 at 13:23
So if I do that in onLoad, will it run when I have the form fully loaded? Also, yes, I use the script service: allPreferences = PropertiesService.getUserProperties(); — Lle.4
– Lle.4, Commented Aug 5, 2019 at 22:07
Re: logging: When you run client-side scripts, these are running in your web browser, not on the server. Logger is for server-side logging, that's why you aren't getting that to work. console.log should be logging to your developer console in your browser. Google your browser's name and "developer console" for how to view it. — dwmorrin
– dwmorrin, Commented Aug 6, 2019 at 1:01

Cooper · Accepted Answer · 2019-08-05 22:39:24Z

2

You could use a function like this when you load the sidebar

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

Client to Server Communication

edited Aug 5, 2019 at 22:39

answered Aug 4, 2019 at 13:33

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lle.4 Over a year ago

Ok, thanks for the suggestion. I'm slightly confused with the code, and please forgive the fact that I have not worked extensively with HTML. Where would I place this? Would it just go in the form? Or in the main body of the HTML? And also, do I just have the entire function within the successHandler? Thanks for the help.

Cooper Over a year ago

As shown it goes between the script tags along with the rest of the head javascript. And it's run after the window loads or you could use $(function(){}) if you want to go with JQuery and in that case it runs when the DOM loads. It calls the server side function getPropertyData() and it can return data to an anonymous function or you could use .withSuccessHandler(functionName) and it will pass the returned data to the function. Take a look at Client To Server Communication section in the documentation.

dwmorrin · Accepted Answer · 2019-08-06 23:23:20Z

1

Your onSettingsOpen references propsList, but this is undefined. You should pass the data in the function by giving the function an argument, e.g. onSettingsOpen(preferences).

Assuming you are storing these preferences in some PropertiesService, when you call Properties.getProperties() you get back an object with key, value pairs. If you make these match your HTML input "id" attributes, you can just lookup the values in the object by passing the id as a key.

Inside the sidebar:

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

Server-side code would need the appropriate getAllPreferences function:

function getAllPreferences() {
  return PropertiesService.getUserProperties().getProperties();
}

edited Aug 6, 2019 at 23:23

answered Aug 6, 2019 at 1:28

dwmorrin

2,76410 silver badges17 bronze badges

4 Comments

Lle.4 Over a year ago

Thanks. This is reading in the following error in the developer console: Uncaught TypeError: google.script.run.withSuccessHanlder is not a function at userCodeAppPanel:2 Any suggestions? Also, the code goes in the head section, right?

Lle.4 Over a year ago

I'm also seeing nothing in the console when I run this

dwmorrin Over a year ago

@Lle.4 Sorry I misspelled withSuccessHandler

Lle.4 Over a year ago

OH MY GOD IT WORKS!!! thank you so much for this solution, I have put in a lot of time and effort trying to figure out how to make this happen. It's amazing. Thank you many times over.

Collectives™ on Stack Overflow

Google Apps Script with HTML Forms

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related