0

I'm not a developer, so please be kind. I have used Google Apps Script to create a Web App for the charity I work for.

At the top of the page, there is a set of menu options.

Rather than add these manually to each page, I have created a Header.html file and then used an include() function on each page to include the header.

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

This is fine, except that the links in the Header.html are all relative links to load other html pages within the web app using the doGet() function to serve a new HTML page, e.g.

<a href="https://script.google.com/macros/s/{deployment ID}/exec?logout=1">Logout </a>

As a result, every time I deploy the app, I have to then manually update the links in the Header.html file and redeploy.

I tried using ScriptApp.getService().getUrl(), but this will not work via the include() function as it is just inserted as text.

What is the best way to have a header that gives the same set of links on each page but where the link is generated programmatically to have the current deployment ID in the URL?

EDIT: Code requested by @Carlos M

Code.gs:

function doGet(e){
var cache = CacheService.getUserCache()
 .
 .
 .
//============================
//           LOGOUT
//============================
if(e.parameter.logout)
{
  cache.removeAll(["email", "name", "code", "loggedIn", "month"])
}
.
.
.
}

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

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

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <?var url = getUrl() ?>
    <?!= include('Header'); ?>
    <div>
      <h1>Membership Duty Booking</h1>
      <span id="message"><?=message ?></span>
      <p class="bold">Select a Month</p>
.
.
.
</body>
</html>

Header.html

<div>
  [MULTIPLE SIMILAR ENTRIES FOR "MENU" OPTIONS]
  <span class="uHeader">
    <a href="https://script.google.com/macros/s/{Deployment ID}/exec?logout=1">Logout </a>
  </span>
</div>

It is the {Deployment ID} in the Header.html file that I need to update. As you can see, I am already using the method suggested by @MetaMan below, but it will not work for an HTML file that is added using the include() function. It works elsewhere, but not for this scenario. This is what I am trying to resolve :)

kxm
  • 55
  • 7
  • Please post your code, which needs to be a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – CMB Apr 23 '21 at 15:59
  • Try using `ScriptApp.getService().getUrl();` [ref](https://developers.google.com/apps-script/reference/script/script-app#getService()) – Cooper Apr 24 '21 at 16:20
  • @MetaMan I already tried that. It's in the original post, but I forgot to tag it as code. It doesn't work in this scenario. – kxm Apr 26 '21 at 10:59
  • This is what I've used in the past: https://stackoverflow.com/a/46943386/7215091 – Cooper Apr 26 '21 at 13:18
  • Thanks @MetaMan. The problem I have is that I have an HTML page (Header) included within another HTML page (Index). This is because I have many HTML pages and I want each of them to have the same Header portion. I could hard code it into each page using the `ScriptApp.getService().getUrl()` method, but that seems like a bad idea. I have therefore abstracted the header into its own HTML file and included it on each page using a single line of code. The problem is that any code in the Header.html file is not executed as code and rendered directly as text on the final HTML page. – kxm Apr 27 '21 at 15:41
  • Well that's your call. But then as you said you're not a developer so perhaps you should rethink the approach. I personally load all of my page links into a navbar div which is a fairly standard approach. The ScriptApp.getService().getUrl() gets the url's main exec link and from that I usually just attach the additional query string. – Cooper Apr 27 '21 at 16:41
  • Thanks @MetaMan. How do you add a navbar div? Are you putting that same code into every page? How do you then manage a change? I was trying to avoid having to edit multiple HTML pages every time the nav links change. – kxm Apr 29 '21 at 07:04
  • `` – Cooper Apr 29 '21 at 07:28
  • 1
    Take a look at this [example](https://stackoverflow.com/a/55770563/7215091) It uses a div that's actually a sidebar but you can build anyway you wish. It shows you how to load the pages and everything. It's a simple 4 page website. – Cooper Apr 29 '21 at 07:42

0 Answers0