CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
Fishy Apprentice
Fishy Apprentice

Reputation: 145

Google script: doGet function not found only when using web app?

I'm trying to make a google apps script link up with an HTML document and it is INFURIATING.

My code works fine when I test it using the 'test web app for your latest code' but when I deploy it as a web app, all I get is an error message that says "script function does not found"

//this is my javascript
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index.html');
}

<!-- aaand this is a crude effigy of my index.html fie for demonstration purposes -->
<!DOCTYPEhtml>
<html>
<head>
<h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1> <p>Some ugly, crude HTML for demonstration purposes</p>
<body> <button> A pointless button, just because.</button></body>
</head>
</html>

Upvotes: 2

Views: 1760

Answers (2)

Baby_Boy
Baby_Boy

Reputation: 346

Ok I'll admit the above "accepted" answer is correct (Edit: that is no longer the accepted answer), but........ If you are going to want to incorporate your own CSS file into your html (why would you not?) then your going to need to format it like this:

your original .gs file (.gs) with doGet()

function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

your original html file (.html) (I named all of mine "index")

<!DOCTYPE html>
<html>
  <head>
  <title>Elliots Site</title>
  <base target="_top">
  <?!= include('css'); ?>
    <script>
     
    </script>
  </head>
  <body>
  <div class="to2">
  </div>
    <div class="top">
      <div class="title"> 
        <h1 class="tital">Elliot's site</h1>
      </div>
      <img class="pic1" src="https://docs.google.com/drawings/d/e/2PACX-1vSH6kVTlN1hP891dSK44zmRK6gi7b3iGzt7CnO4P37a8zABg-NADND5q2_hgezsIQEFYqgcz_JVUWk7/pub?w=327&amp;h=187">
    </div>
    <div class= space>
      <ul class="nav">
      <base href=" https://script.google.com/a/pelhamcityschools.org/macros/s/AKfycbwk_bEKfLI4sxCfeFoSWbRV7H4NhYWxr5oTPSGZFs9j/dev" target="_blank">
        <li><a href="html:google.g">google</a></li>
      </ul>
    </div>
    <div class= "part2">
        <img class= "pic" src="https://docs.google.com/drawings/d/e/2PACX-1vTd3j0_lBWS8u0HHFB7Eg0XzOkVdrdZco57nkewuzaTcDzpPkpoDevTzo0FFJEvgctAPhSxUtxvwgCj/pub?w=510&amp;h=360"style="float:left">
          <h2 class= "text">Hi I'm Elliot, and I'm a cool guy. I made this website on my own, and its good. I am happy about it and am excited to show it to dad.</h2>
    </div>
    <div class= "part3">
      <div class="blank">
        <h4>&copy;2020 Elliot Massey</h4>
      </div>
      <div class="space2">
      </div>
    </div>
     <?!= include('javascript'); ?>
  </body>
</html>

Your CSS file (.html) (Please notice the scriptlet that calls on this{The scriptlet is the <?!= include('css'); ?>})

<style>
    /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
title {
  display: none;
}
.to2 {
background-color:#00FFFF;
background-size: cover;
height: 130px;
background-attachment: fixed;
}
.top .title .tital {
  font-family: 'Piazzolla', serif;
  text.getTextStyle(.setLinkUrl("https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@1,500&display=swap"));
}
.top .title {
background-position: center, center;
background-color:yellow;  
background-size: auto;
height: fillparent;
text-align: center;
background-attachment: scroll;
}
.top .pic1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-attachment: fixed;
  vertical-align: middle;
}
.top {
background-color:#00FFFF;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
    /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.space .nav li {
background-color: yellow;
background-size: cover;
height: 100px;
background-attachment: fixed;
display: inline-block;
padding: 20px;
}
.space .nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}
.space {
background-color: white;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
.part2 .pic .text {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-attachment: fixed;
  float: right;
  vertical-align: top;
}
.part2 .pic {
float: left;
background-attachment: fixed;
vertical-align: top;
}
.part2 {
background-color:white;
background-size: cover;
height: 600px;
background-attachment: fixed;
align-items : top;
}

    /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.part3 .blank h4 {
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
background-color: black;
color: white;
text-align: center;
}
.part3 .blank {
align-items : center;
background-color:black;  
background-size: cover;
height: 100px;
text-align: center;
}
.part3 .space2 {
background-color:black;  
background-size: auto;
height: 50px;
}
</style>

and last but not least a java script function (.html)

<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

One last thing, if your screeching about including the CSS () in the original html, don't. One, this a lot less jumbled so you can A. Impress your boss or whoever by making your code appear shorter, B. You can read it easier. Two you can make multiple and quickly switch out the name in the scriptlet. Three, you can debug them separate.

Also feel free to copy and paste this into google app scripts to see the code with their highlights and the end result (I know it looks like crap I only spent ten minutes on it)

This is what you want to paste into scripts if you want your own code (think of it as a layout) in the previous order

function doGet() {
return HtmlService.createTemplateFromFile(YOUR_HTML_HERE)
.evaluate();
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}


<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <?!= include('css'); ?>
    <script>
     
    </script>
  </head>
  <body>
     <?!= include('javascript'); ?>
  </body>
</html>

*the below CSS formatting is not necessary,just recommended

<style>
    /* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
      html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

That's about it... uhhhh...Good Bye

Upvotes: 2

Cooper
Cooper

Reputation: 64082

I used this code

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1>
<p>Some ugly, crude HTML for demonstration purposes</p>
<button> A pointless button, just because.</button>
  </body>
</html>


function doGet() {
  return HtmlService.createHtmlOutputFromFile('ah3');
}

function showDialoge() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}

Make sure you pick the new selection when you deploy as webapp.

enter image description here

Upvotes: 1

Related Questions