How to insert Google web app URL dynamically with javascript

Question

I'm building a webapp for our teachers in the school that I work for.

the web app has 4 views/pages, 1. one which shows a menu (home) 2. one to submit student observations, 3. one to consult/query observations previously entered 4. and one to update an existent observation.

On the consult page, I can populate an html table dynamically with observations records and I want the observation ID column to serve links (anchor elements) with the webapp url in the href attribute along some parameters so when the teacher clicks on the observation id link they are taken to the update view/page of the webapp where they can update the observation associated with the id of the link they clicked on.

in my javascript portion of the webapp...

this works

//webapp url hardcoded
var webAppURL = 'https://script.google.com/a/domain.com/macros/s/AKfy.../dev';
...
document.getElementById("tableReport").innerHTML += dataRetrieved.map(function(row){
          return "<tr><td><a href='"+ webAppURL + "?p=edit&oid=" + row[0] + "'target='_blank'>"+ row[0] +"</a></td><td>" + row[2] + "</td><td>" + row[3] + "</td><td>" + row[4] + "</td><td>" + row[5] + "</td><td>" + row[6] + "</td><td>" + row[7] + "</td><td>" + row[8] + "</td><td>" + row[9] + "</td><td>" + row[10] + "</td></tr>";
        }).join(' ');

but this doesn't

//webapp url retrieved from gaps scriptapp class
var webAppURL = '<?= ScriptApp.getService().getUrl(); ?>';
...
document.getElementById("tableReport").innerHTML += dataRetrieved.map(function(row){
          return "<tr><td><a href='"+ webAppURL + "?p=edit&oid=" + row[0] + "'target='_blank'>"+ row[0] +"</a></td><td>" + row[2] + "</td><td>" + row[3] + "</td><td>" + row[4] + "</td><td>" + row[5] + "</td><td>" + row[6] + "</td><td>" + row[7] + "</td><td>" + row[8] + "</td><td>" + row[9] + "</td><td>" + row[10] + "</td></tr>";
        }).join(' ');

I know ScriptApp.getService().getUrl() would render the webapp url properly in my html portion of the webapp as I have that working in my menu page/view of my web app but I don't know how to get the same result when doing it through javascript dynamically.

I tried without the double or single quotes but that seems to crap my javascript out.

Is there a way to insert the google web app url dinamically with javascript?

Thank you in advance.

Cooper · Accepted Answer · 2019-08-05 01:16:04Z

3

Javascript:

  function getUrl() {
    google.script.run
    .withSuccessHandler(function(url){})
      //send the url anywhere you want in the html
    .getWebAppUrl()
  }

Google Script:

function getWebAppUrl() {
  return ScriptApp.getService().getUrl();
}

Client To Server Communication

edited Aug 5, 2019 at 1:16

answered Aug 5, 2019 at 1:03

Cooper

64.2k7 gold badges28 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francisco Cortes Over a year ago

Thank you @Cooper. I adapted your answer to suit my needs: //get app url when the report window loads and save value on global variable app_url window.addEventListener('load', getAppURL); ``` function getAppURL (){ google.script.run.withSuccessHandler(function(url){app_url=url;}) .getWebAppUrl(); } ```

Collectives™ on Stack Overflow

How to insert Google web app URL dynamically with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related