Google drive app: How can i get my HTML file to read a varitable defined in code.gs?

Question

Novice programmer here, please be gentle.

I'm attempting to create a series of search functions in an HTML file that can search the contents of a google drive database, and display the results in a popup.

Here is the relevant code:

Code.GS

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('page')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi() 
      .showSidebar(html);
}

function load() {
data = SpreadsheetApp.getActiveSheet().getDataRange().getValues()
};

page.html

google.script.run.load()


function poponload() {
    testwindow = window.open("", "mywindow", 'location=1,status=1,scrollbars=1,width=400,height=200');
    testwindow.moveTo(0, 0);
    testwindow.document.write('<br>Date = ', data[1][1]);

}

When the varitable 'data' is called from the html file, the javascript console is reporting that it is not defined. I have read and re-read the documentation at

https://developers.google.com/apps-script/guides/html/communication

and

https://developers.google.com/apps-script/guides/html/templates

But the answer still eludes me. What am I doing wrong? Or perhaps not doing, to get the 'data' variable to be read by the page.html file?

Answer 1

Here is the official documentation about this .

In short, call your server functions with success or failure handlers. If the function that you are calling is returning anything, then it will be passed to the callback function you specified.

Client

$(function(){ 
  google.script.run.withSuccessHandler(onSuccess).load();
}); //this is jQuery lib, and the function will run when the document is ready, not when the script is loaded, which is usually a better practice
function poponload(data) {
  testwindow = window.open("", "mywindow",'location=1,status=1,scrollbars=1,width=400,height=200');
  testwindow.moveTo(0, 0);
  testwindow.document.write('<br>Date = ', data[1][1]);
}

Server

function load(){
  var data;
  ...get data somehow...
  return data;
}