CODEWITHSUNDEEP
javascriptgoogle-apps-scriptparameter-passing
JBruce
JBruce

Reputation: 449

Passing parameters while Linking to another html page in google apps script

First, this is a google-app-script issue... I can't seem to capture the second (or subsequent) parameters within the HTML page (i.e. "item" in this example)... I've seen many examples using "location.search" and "window.location.search", but none of these seem to work. Could it possibly be as simple as "location.search" is not the correct usage?

Example

Code.gs

var myParam;
/**
 * Get the URL for the Google Apps Script running as a WebApp.
 */

function getScriptUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}
/**
 * Get "home page", or a requested page.
 * Expects a 'page' parameter in querystring.
 *
 * @param {event} e Event passed to doGet, with querystring
 * @returns {String/html} Html to be served
 */
function doGet(e) {
  //Logger.log( Utilities.jsonStringify(e) );
  Logger.log(e.parameter.page);
  var pgToLoad = e.parameter.page;

  if (!e.parameter.page) {
    Logger.log('!e.parameter.page')
    // When no specific page requested, return "home page"
    // return HtmlService.createTemplateFromFile('my1').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
    return HtmlService.createTemplateFromFile('my1').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
  Logger.log('there is something for the page');
  // else, use page parameter to pick an html file from the script
  // return HtmlService.createTemplateFromFile(pgToLoad).evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return HtmlService.createTemplateFromFile(pgToLoad).evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

I have multiple HTML files, but they are basically the same as my1.html below... my1.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Source = my1.html</h1>
    <p id=myParam>Placeholder</p>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2&item=1-234'> <input type='button' name='button' value='my2.html'></a>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my3&item=1-345'> <input type='button' name='button' value='my3.html'></a>
  </body>
</html>
<script>
function getParam(sname)
{
  var params = location.search;
  var sval = "";
  params = params.split("&");
  // split param and value into individual pieces
  for (var i=0; i<params.length; i++)
  {
    temp = params[i].split("=");
    if ( temp[0] == sname ) { sval = temp[1]; }
  }
  return sval;
}
function changeItem() {
  var param = getParam("item");
  var myItem = "Item:-"+param+"-";
  document.getElementById("myParam").innerHTML = myItem;
}
window.onload = changeItem;
</script>

Upvotes: 0

Views: 2602

Answers (2)

Alan Wells
Alan Wells

Reputation: 31300

I think I know what you want to do. It looks like you are getting the search string parameters from the doGet(e) function on the server side, then you are trying to get the same search string parameters again on the "client side" from the onload function? If this is the case, I would abandon trying to get the search string parameters from the client side.

You could store the search string parameters in the browsers sessionStorage:

window.sessionStorage.setItem("searchStringOne","Value One");

and to retrieve:

var valueOne = window.sessionStorage.getItem("searchStringOne");

Session Storage Information

Upvotes: 1

Raghvendra Kumar
Raghvendra Kumar

Reputation: 1388

Here's an example to show how to get the query string parameters to serve different html templates using html-service of app script : 

function doGet(e) {
   Logger.log( Utilities.jsonStringify(e) );

  // Load a home page when no parameter is specified

  if (!e.parameter.redirect) {
  var template = HtmlService.createTemplateFromFile('home');

  var htmlOutput =    template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('Home');
  return htmlOutput;
  }

  //get the page from parameter and load it  

 else{
 var template=HtmlService.createTemplateFromFile(e.parameter['redirect']);

 var htmlOutput = template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('Other Page');

 return htmlOutput;
 }

}

function getScriptUrl() {

  var url = ScriptApp.getService().getUrl();

  return url;
}

then HTML will look like this :

home.html

        <?var url = getScriptUrl();?>

        You are on Home Page.

        <a href='<?=url?>?redirect=pagex'>Goto PageX</a>



        <a href='<?=url?>?redirect=pagey'>Goto PageY</a>

pagex.html

You are on PageX

pagey.html 

You are on PageY

Hope this helps!

Upvotes: 0

Related Questions