GAS Creating Additional Dynamic HTML Page
790 views
Skip to first unread message
David Howarth
Jun 27, 2022, 4:51:49 PM6/27/22
to Google Apps Script Community
Over the last few days I've been searching through SO and various Google Apps Scripts help files/ forums for a guide to find out if it's possible for the following to be implemented in Google Apps Scripts.
Currently have a fully functioning main HTML page where colleagues selected various options from a list of questions. These inputs are then process via an algorithm that currently emails the user their results.
Is there anyway that these results could be fed into a freshly crated secondary / additional/ dynamic HTML page within the Google App Script? These results are simple text and numbers.
Many thanks for any help with link to how to guides etc etc or even a straight NO. As I can move on with my life.
David
Jonathan Butler
Jun 28, 2022, 8:30:39 AM6/28/22
to google-apps-sc...@googlegroups.com
Yes, this is possible. You have two ways of achieving the result you are looking for.
The first, manipulate the page you are currently on to make it look as though the page has changed. An example of this would be to delete everything on the page and create new elements. This is traditionally called a SPA or single page app.
The second, is to store the users data somewhere (I would use the cache in this scenario if the data is temporary) and create a page that solely reads this data and displays it. The route itself (doGet parameters) will determine the data that gets returned to the user. This is traditionally called a MPA or multi-page app.
They are both good options and there is currently an ongoing war between software engineers as to which is better in what scenario. I don't think it matters too much here. Although, if you choose the multi-page app. The user might need to do an extra click or two because of the way links work on Google Apps Script.
--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/548d14d0-f93b-4af2-8f0e-28c5b34c5fd9n%40googlegroups.com.
Jonathan Butler
Jun 28, 2022, 8:33:55 AM6/28/22
to google-apps-sc...@googlegroups.com
Below is a good video tutorial of a mutli-page app using Google Apps Script.
David Howarth
Jun 28, 2022, 3:59:48 PM6/28/22
to Google Apps Script Community
Thank you for the link VT and explanation as took a long-shot posting to this community. Great - simply wonderful
Clark Lind
Jun 30, 2022, 9:14:03 AM6/30/22
to Google Apps Script Community
Additionally, a third method is to create a whole new window (popup) and pass info to it during the creation. The side effects of this method are that you can no longer interact directly with your script using google.script.run and will have to find another way, like passing parameters back to the published URL.
Use case: I had a webapp to track employee training. The script retrieved the "effective user", getting their email address. I then used an html template, passing in the user email. I also parsed the email to get the first name. The page presented then showed a tailored "Welcome firstName" etc etc. On this page was a button that when pushed, opened a new window with a video for watching (the 'training'). There was a button in the popup window pointing back to the published webapp url, and I passed the user email as a parameter. This then triggered a completion function that created a training certificate from another Drive file, and emailing a pdf copy back to the individual. I also logged the completion info on a training tracking sheet.
Use case: I had a webapp to track employee training. The script retrieved the "effective user", getting their email address. I then used an html template, passing in the user email. I also parsed the email to get the first name. The page presented then showed a tailored "Welcome firstName" etc etc. On this page was a button that when pushed, opened a new window with a video for watching (the 'training'). There was a button in the popup window pointing back to the published webapp url, and I passed the user email as a parameter. This then triggered a completion function that created a training certificate from another Drive file, and emailing a pdf copy back to the individual. I also logged the completion info on a training tracking sheet.
But long story short, you can create more child browser windows, they will just not be directly connected to your webapp anymore. Example:
(ignore the materializecss stuff)
<body>
<h3>Page Heading</h3><p><p>
<h5>Hello <?!= fName ?>, <p>Description... paragraph</h5>
<div class="wrapper">
<h5>Video: [title of video]: </h5>
<button class="btn-large waves-effect waves-light" type="submit"
onClick="w=window.open('#','_blank','height=700,width=1028,scrollbars=1');+
w.document.write(
<?= HtmlService.createHtmlOutputFromFile('video_container').getContent(); ?> );" +
name="action">Launch Video
<i class="material-icons right">play_circle_outline</i>
</button>
<p>
</div>
</body>
(ignore the materializecss stuff)
<body>
<h3>Page Heading</h3><p><p>
<h5>Hello <?!= fName ?>, <p>Description... paragraph</h5>
<div class="wrapper">
<h5>Video: [title of video]: </h5>
<button class="btn-large waves-effect waves-light" type="submit"
onClick="w=window.open('#','_blank','height=700,width=1028,scrollbars=1');+
w.document.write(
<?= HtmlService.createHtmlOutputFromFile('video_container').getContent(); ?> );" +
name="action">Launch Video
<i class="material-icons right">play_circle_outline</i>
</button>
<p>
</div>
</body>
Reply all
Reply to author
Forward
0 new messages