CODEWITHSUNDEEP
htmlformsgoogle-apps-script
Lle.4
Lle.4

Reputation: 616

Google Apps Script with HTML Forms

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!

Upvotes: 0

Views: 162

Answers (2)

dwmorrin
dwmorrin

Reputation: 2734

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

Upvotes: 1

Cooper
Cooper

Reputation: 64062

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

Upvotes: 2

Related Questions