CODEWITHSUNDEEP
web-applicationsgoogle-apps-script
iyar
iyar

Reputation: 1

Adding an html page to a web app

I'm pretty new in programming, mostly doing it for fun, so sorry if the question is too obvious and appreciate if you could answer as if I know very little... :)

So I'm trying to make a web app using Google Apps Script, but I wanna design it in Dreamweaver first and use that html for the app (Since the "Build A UI" option is no longer exist in Google Scripts). The app needs to be able to read and modify the original html, in response to the user's actions.

I was thinking to simply do this, but it didn't work, of course:

function doGet(e) {
var app = UiApp.createApplication();
var page = HtmlService.createHtmlOutputFromFile('MyHtml');
app.add(page);
return app;
}

It does work when I write return page; but I just can't reach the fields later, in other functions, when I use var app = UiApp.getActiveApplication();

================================= EDIT =================================

Here's an example for why I need the web app to contain the html page:

function showMyEmail() {
var app = UiApp.getActiveApplication();
var email = Session.getActiveUser().getEmail();

// Assuming 'email_lbl' is the ID of the already existing target label I want to modify.
app.getElementById('email_lbl').setText('Your email is: ' + email);
return app;
}

Unfortunately I can't use it like that because "app" doesn't contain any object that's called "email_lbl". So I need to find a way to embed the html file in the app so I can later on use the UiApp.getActiveApplication(); in other server-side functions.

Also - my first example obviously returned a blank page because "app" didn't contain the "page". (Same problem of course...)

================================= EDIT =================================

Any suggestions? Creative work-arounds? Something I'm missing here?

Sorry if I'm being redundant. I don't know how to explain better...

Appreciate your attention!! iyar

Upvotes: 0

Views: 995

Answers (1)

Spencer Easton
Spencer Easton

Reputation: 5782

You would return the HtmlService itself as you pointed out. All you client side logic would be handled by your Html page as Apps Scripts run on server side. So any JavaScript that requires access to document or window needs to be in your html page. Since it is a webapp you have access to google.script.run to run code in your script.

Check out its docs for this and webapps at:

https://developers.google.com/apps-script/guides/html/reference/run
https://developers.google.com/apps-script/guides/web

code.gs

function doGet(e) {
  var page = HtmlService.createHtmlOutputFromFile('MyHtml');
  return page;
}

function square(val){
  return val*val
}

MyHtml.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>    
    <p id="val"></p>
  </body>
  <script>
    google.script.run.withSuccessHandler(showVal).square(5);  

    function showVal(returnVal){
      document.getElementById('val').textContent = returnVal
    }
  </script>
</html>

Upvotes: 1

Related Questions