CODEWITHSUNDEEP
google-apps-script
Karl_S
Karl_S

Reputation: 3554

Pass items to script in html template

I have a script I am publishing as a web app. I want to pass parameters to the script via the web app url, such as https://script.google.com/a/...JS0AsIOipm/exec?year=2016&festival=Canada and pass them ultimately into the client side script, using them to set default form field values.

I have tried a few things, and the farthest I have been able to get is this: In Code.gs, I define a variable globally, set that to the passed parameter

//Define this here globally so it is accessed in the HTML Template
var passedParameter;
/**-----------------------------------------------------------------------------------
|
|    Begin section for app interface
|
------------------------------------------------------------------------------------*/
// Script-as-app template.
function doGet(passed) {

  if(passed.parameter.festival && passed.parameter.year){
    passedParameter = passed.parameter;
  }

  var result=HtmlService.createTemplateFromFile('GridView').evaluate()
      .setWidth(1285);

  return result;
}

//Allow us to include other files in the HTML
function include(filename) {

return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

GridView.html contains:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>

  <script>
    var passedData = "<?!= passedParameter ?>"; //Stores the data directly in the javascript code
  </script>

  <body>

  <p>passed=<?!= passedParameter.year ?></p>
  </body>

    <?!= include('GridView_JS'); ?>

</html>

Which does show the value for passedParameter.year

So it includes GridView_JS.html. This is where I want to use values from the passed year and festival. This file has, among other functions:

<script>
function showMenuYear(menuItems) {
  var list = $('#optionListYear');

    var desiredValue = passedData.festival + ' ' + passedData.year;
      for(var i=0; i<list.options.length; i++) {
        if ( list.options[i].text == desiredValue ) {
            list.selectedIndex = i;
        break;
        }
      }
  }
</script>

but it errors out stating passedParameter is not defined. How do I get it to use these? I know I am passing passedParameter.year and passedParameter.festival based on being able to display them in the first HTML file.

So what do I need to do to be able to use these in my script?

Upvotes: 1

Views: 1188

Answers (1)

Alan Wells
Alan Wells

Reputation: 31300

There are multiple things that need to happen.

Add two scriptlets into the JavaScript code in the 'GridView_JS' file:

var desiredValue = <?!= passedParameter.festival ?> + ' ' + <?!= passedParameter.year ?>;

But you must also make sure that your include() function uses .evaluate();

HtmlService.createTemplateFromFile(fileName).evaluate();

Currently, your include function uses: createHtmlOutputFromFile()

That needs to be replaced with createTemplateFromFile(fileName).evaluate()

So, what will happen, is that the include() function will first evaluate the 'GridView_JS' file, and then the GridView.html file gets evaluated.

There are other options. You could put the passed in parameters into either temporary Cache or Properties Service. Cache is temporary, and Properties Service is permanent. Then, when the HTML loads, you could run JavaScript from an onload event, and make a call to the server to get the values out of either Cache of Properties Service. But, there's no point in doing that if you want the values immediately available in the HTML. It's good to know what the alternatives are depending upon the situation.

Upvotes: 2

Related Questions