Passing Values from .gs to htmlService in Google Apps Script
Learn how to effectively pass data from .gs files to HTML service in Google Apps Script, including handling loading spinners and generating PDF links.
---
This video is based on the question https://stackoverflow.com/q/73687339/ asked by the user 'Rookie_Js' ( https://stackoverflow.com/u/19776640/ ) and on the answer https://stackoverflow.com/a/73690918/ provided by the user 'Cooper' ( https://stackoverflow.com/u/7215091/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.
Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Pass value from .gs to htmlService
Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.
If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Passing Values from .gs to htmlService in Google Apps Script: A Guide
When working with Google Apps Script (GAS), you might find yourself needing to pass data between your script files (.gs) and the HTML service. This can be particularly challenging for beginners who are not yet familiar with JavaScript or the intricacies of GAS. In this guide, we'll walk through a common scenario where you need to pass a PDF link generated by your script to an HTML file, while also managing a loading spinner to improve user experience.
Understanding the Problem
Imagine you have a situation where you're generating a PDF from a Google Sheet using a .gs script and need to present a link to this PDF in the user interface through an HTML service. Additionally, you want a loading spinner to indicate background processing until the PDF is generated and the link is available. Here's a breakdown of the two main challenges:
Passing the PDF link: After generating the PDF, how do you pass its link back to your HTML file?
Controlling the loading spinner: How do you hide the spinner once the PDF is ready to be accessed?
The Solution
Now that we understand the challenges, let's focus on a practical solution. We'll address each problem in detail.
Step 1: Passing the PDF Link
To pass data from your .gs file to your HTML service, you can utilize a template to insert the data directly into your HTML. Here's how to implement this:
[[See Video to Reveal this Text or Code Snippet]]
In this snippet:
We create a template from the HTML file (PDFlinkHTML.html).
We assign the PDF link (generated from your pdf.gs function) to a variable in the template (pdflink).
Lastly, we evaluate the template and display it in a modal dialog.
This way, you have successfully passed the PDF link to your HTML, allowing you to utilize it as needed.
Step 2: Hiding the Loading Spinner
Managing a user-friendly experience is crucial. To hide the loading spinner once the PDF link is ready, you may want to handle this with some simple JavaScript or jQuery in your HTML. Here's a quick approach:
Include a spinner in your HTML: Make sure that your loading spinner is part of the HTML code where you want to show it.
Hide the spinner when PDF is ready: Once your PDF link is available, you can use JavaScript to hide the spinner. Here’s a simple example you can place inside your HTML template:
[[See Video to Reveal this Text or Code Snippet]]
In this script snippet:
The function hideSpinner() will set the display property of the spinner element to "none," effectively hiding it.
You can call this function using window.onload or any other appropriate event once your PDF link is loaded.
Conclusion
By following these steps, you can seamlessly pass values from your .gs scripts to your HTML service while also managing elements like loading spinners. This will not only enhance the functionality of your Google Apps Script projects but also ensure a smoother user experience.
Feel free to implement this in your own projects and make adjustments as necessary to suit your specific use cases! If you have further questions or need clarification, don't hesitate to ask. Happy coding!
