Question

0

224

Views

Javascript Limitations of Google Apps Scripts WebApps?

C'mon help me push the boundaries a little here...

Google supports sticking your Javascript in an html file. This guy shows how to display images in a webapp done in a google script. That guy makes those images have s3x (I mean, give me a better description here!)

Settings variables for the images residing in a Google Drive in the Code.gs and later trying to use them in the javascript file doesn't work. I get a blank screen.

Is this a limitation of Google or a Javascript knowledge limitation on my part?

This here is the code dot js where I map the two images.

This shows the html we see

This is where the magic happen...

the css....

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T22:25:03.491Z

Issue:

You instantiated pic1 and pic2 in your Code.gs and is expecting to have those values when you are in your HTML/JavaScript file which is not totally the case.

Solution:

To pass values from server side to client side, use google.script.run. You can directly call get_the_images instead of instantiating it to variables then passing them. See sample code below on how values are passed from GS to your HTML/JavaScript.

Code.gs:

function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile('Page');
  return htmlOutput.evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function get_the_images() {
  // supposedly ID of said images (IDs for test purposes)
  return ['rxcmaiw_23jsu', 'qwejiasd23saf'];
}

Page.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    value of pic1 id is:
    <span id="pic1">
    </span>
    </br>
    value of pic2 id is:
    <span id="pic2">
    </span>

    <?!= include('Javascript'); ?>
  </body>
</html>

Javascript.html:

<script>
  let span1 = document.querySelector('#pic1');
  let span2 = document.querySelector('#pic2');
  // call get_the_images function from Code.gs
  google.script.run.withSuccessHandler(onSuccess).get_the_images();

  function onSuccess(result){
    // result contains the return value of get_the_images
    var [pic1, pic2] = result;
    // at this point, pic1 and pic2 contains the ids
    // show them as images using your script
    // below just confirms the IDs if passed properly
    span1.innerHTML = pic1;
    span2.innerHTML = pic2;
  }
</script>

Output:

Reference:

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

0

224