How to read and print PropertiesServices from client-side HTML with Google Apps Script?

Question

The foo variable is sent from the client side HTML to Code.js as demonstrated by the logs. When this occurs, the bar key from PropertiesService is set and logged.

How is PropertiesServices accessed from the client side HTML and output as text?

logs:

Cloud logs
Oct 15, 2022, 5:27:14 PM
Info
logProperties..
Oct 15, 2022, 5:27:14 PM
Info
bar
Oct 15, 2022, 5:27:14 PM
Info
foo
Oct 15, 2022, 5:27:14 PM
Info
sending foo

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function sendFoo()
    {
      var foo = document.getElementById("foo").value;
      google.script.run.setBar(foo);
      document.getElementById("foo").value = '';
    }
    </script>
  </head>
  <body>
    foo is:<input type="text" id="foo" />
    <input type="button" value="sendFoo" onclick="sendFoo()" /> <br> <br> <br>
    bar is:
  </body>
</html>

I believe this can be accomplished with span tag.

code:

function setBar(foo) {
  PropertiesService.getScriptProperties().setProperty("foo",foo);
  PropertiesService.getScriptProperties().setProperty("bar","foo received");
  logProperties();
}

function initProperties() {
  PropertiesService.getScriptProperties().deleteAllProperties();
}

function logProperties() {
  Logger.log("logProperties..");
  var keys = PropertiesService.getScriptProperties().getKeys();
  keys.forEach(key => {
    Logger.log(key);
    Logger.log(PropertiesService.getScriptProperties().getProperty(key));
  });
}

function getUrl() {
  var url = ScriptApp.getService().getUrl();
  return url;
}

function doGet(e) {
  initProperties();
  var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

This is just within Google Apps Script and has been kept as simple as possible, but no simpler.

see also:

https://codewithcurt.com/how-to-call-google-apps-script-function-from-web-app/

PropertiesService only runs on the server. It's not part of clientside Javascript. — Cooper
– Cooper, Commented Oct 16, 2022 at 0:57
There's no such functionality with GAS? I thought it had that baked in. — Nick
– Nick, Commented Oct 16, 2022 at 0:59
Google Apps Script runs on google servers not on your browser. Javascript runs on your browswer. Although some Javascript functions also can run on google servers. — Cooper
– Cooper, Commented Oct 16, 2022 at 1:01

Nick · Accepted Answer · 2022-10-16 01:31:58Z

Less than perfect, but accomplishes the main goal of getting data from server and displaying client side when requested by the client.

code:

var sheetId = "1L3Sd-J780mQtb7JYsmJzInI1kMdrQA8GbLspQJ5eVW4";
var sheetName = "data";

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('WebApp');
}

function getOneCellData() { 
  Logger.log("getOneCellData..");
  var ss = SpreadsheetApp.openById(sheetId);
  var sheet = ss.getSheetByName(sheetName); 
  var data = sheet.getRange(1,1,1,1).getValue(); 
  return data;  
}

function getMultiCellData() { 
  var ss = SpreadsheetApp.openById(sheetId);
  var sheet = ss.getSheetByName(sheetName); 
  var data = sheet.getRange('A1:C1').getValues(); 
  return data;  
}

function getInOutData(inData) { 
  Logger.log("getInOutData");
  var outData = "IN DATA: " + inData; 
  return outData;  
}

html:

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script>
  function callOneCellData()
  {
    google.script.run.withSuccessHandler(function(returnData) 
    {
       document.getElementById("oneCellData").innerHTML = returnData;
    }).getOneCellData();
  }
  
  function callMultiCellData()
  {
    google.script.run.withSuccessHandler(function(returnArray) 
    {
        console.log(returnArray);
        var stringArray = returnArray.toString();
        document.getElementById("multiData").innerHTML = stringArray;
    }).getMultiCellData();
  }
  
  function callInOutData()
  {
    var inData = document.getElementById("inData").value
    google.script.run.withSuccessHandler(function(outData) 
    {
        document.getElementById("outData").innerHTML = outData;
    }).getInOutData(inData);
  }
  
  function callData()
  {
    callOneCellData();
    callMultiCellData();
    callInOutData();
  }  
  </script>
  </head>
  <body>
  <label>One Cell Data</label><br><textarea id="oneCellData" ></textarea><br>
  <label>Multi Data</label><br><textarea id="multiData" ></textarea><br>
  <label>In Data</label><br><input type="text" id="inData" /><br>
  <label>Out Data</label><br><textarea id="outData" ></textarea><br>
  <input type="button" onclick="callData()" value="Get Data" />
  </body>
</html>

I had thought this was best done with Properties but that may not be so.

Ideally, would display the above textarea as just "plain" text.

Collectives™ on Stack Overflow

How to read and print PropertiesServices from client-side HTML with Google Apps Script?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related