1

I have a webapp that has multiple pages served as templates in a sandbox. I want to pass an ID as a url parameter between pages in my webapp.

Issue 1: I don't know how from my javascript page file I can access the url parameters as when using window.location I do not get the same url that shows in the address bar.

Is there a way of getting the parameter directly from javascript or do I have to get the server to send it to javascript?

If I need to get it from the server I am worried that as the webapp is meant to have multiple users who are on different pages of the webapp how will the server know which url to send?

Sorry if what I am saying does not make sense! I include some code below to try and help explain the issue...

Code.gs code:

function doGet(e){
 
 var param1 = e.parameters.v;
  
  var param2 = e.parameters.id;
  if(param1 == "form"){
  
    return loadForm(); 
  
  } else if(e.parameters.v == "class") {
    return loadClassView();
  } else {
    var tmp = HtmlService.createTemplateFromFile("home");
    tmp.baseUrlToSend = baseURL;
    
    return tmp.evaluate();
  }
}

javascript:

function OnLoad(){

   var thisURL = window.location;
   alert(thisURL);
   //I hoped this would alert something along the lines of "https://script.google.com/a/macros/s/-MY-WEB-APP-ID-/dev?v=class&id=0d2f35e9-d785-4fab-a8ee-fe8933f1c159" 
   //But what this actually alerts is "https://n-g5aftzut - REMOVED FOR SECURITY -mmajfkwvesq-0lu-script.googleusercontent.com/userCodeAppPanel"
    
}
Nimantha
  • 6,405
  • 6
  • 28
  • 69
John Kane
  • 41
  • 1
  • 6

1 Answers1

2

Answer:

You will need to evaluate the parameter server-side to determine which page to load. The links to the pages should be written accordingly in your HTML.

More Information:

The script URL and the page in which the content is loaded are not of the same origin. As a result, you can not use window.location to get the script URL as you will receive a googleusercontent.com address, rather than a script.google.com address.

Solutions:

The first way of doing this is simply modifying your HTML to hard-code in your URLs. Your doGet() function will look something like:

function doGet(e) {
  if (!e.parameter.v || e.parameter.v == "home") {
    return HtmlService.createTemplateFromFile("home").evaluate();
  }  
  else if (e.parameter.v == "form") {
    return loadForm();
  }  
  else if (e.parameter.v == "class") {
    return loadClassView();
  }
}

function loadForm() {
  // do some template processing here
  return HtmlService.createTemplateFromFile('form').evaluate();
}

function loadClassView() {
  // do some template processing here
  return HtmlService.createTemplateFromFile('class').evaluate();
}

And then in your HTML you can hard-code in your links:

<a href='https://script.google.com/a/domain.com/macros/s/script-id/exec?v=class'>Click here to go to 'Class'.</a>

Alternatively, you can use your current templating and insert the script url when the doGet() function is called for the respective page:

function doGet(e) {
  if (!e.parameter.v || e.parameter.v == "home") {
    return HtmlService.createTemplateFromFile("home").evaluate();
  }  
  // etc...
}

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

And insert it where you need in your html file:

<? var url = getScriptUrl(); ?>
<!-- more stuff -->
<a href="<?!= url ?>?v=class">Click here to go to 'Class'</a>

The scriptlet here will call the defined getScriptUrl() function in your server-side code which returns the web app url, and then append it to the beginning of the parameter in the anchor element.

References:

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Rafa Guillermo
  • 14,474
  • 3
  • 18
  • 54
  • 1
    @OP To add to this, one of the important reasons, you just can't simply do `window.top.location.href` is because of the restrictions imposed by [tag:same-origin-policy], where you can write the `top` href, but not read it. – TheMaster Sep 09 '20 at 13:33
  • @Rafa Guillermo Thank you for this! I have to add the ID as a second parameter to the url and that is obtained from a search of the spreadsheet (acting as a db). So I don't think I will be able to hard script the url in the HTML. – John Kane Sep 09 '20 at 14:02
  • If I do get the url from the server will multiple users cause problems with this situation? I am able to create the URLs no problem but I don't know how to retrieve the parameters from the url via the server – John Kane Sep 09 '20 at 14:04
  • @JohnKane You can get the IDs in the same way. Define a `getId()` function in your `code.gs` file and have it return the id. you can then call ` var classId = getId(); ?>` in your html and append it in the same way: `Click here to go to 'Class'`. – Rafa Guillermo Sep 09 '20 at 14:06
  • @JohnKane Multiple users won't cause problems, it'll be distinct calls that are sessioned. If it's user dependent, then depending on how your organisation is set up you can run the web app as "User accessing the web app" and process that information accordingly. – Rafa Guillermo Sep 09 '20 at 14:07