The Html Service in Google Apps Script provides ability to create and serve HTML output from a script.
- As a stand-alone web app
- Embedded in a Site
- Directly from a Spreadsheet
In this blog, we are going to create a stand-alone web-app.
Step 1: Create HTML File
To create an HTML file in Google Apps Script, open the Script Editor and choose File > New > Html File. This will create a new file in your project, which starts out with just the following code:
In this HTML file, we can write standard HTML. Google Apps Script currently supports HTML 4.01, so you can see this spec to understand what is supported.
Step 2: Create gs File
Then, create a Script file and paste following code. It is loading the HTML code from the
html file and returning it as an
HtmlOutput object that will be rendered when a user accesses web app.
Now we have a project with a
html file and a
gs file. To try it out, follow these steps:
- Before we can deploy a script as web app, we must save a version of our script. To do so, choose File > Manage Versions in the Script Editor, provide a description for the version, and then click Save New Version.
- Next, follow the steps listed in Deploying Your Script as a Web App. Choose Publish > Deploy as web app from the menu. A dialog will appear where we will need to make three decisions about how to publish our web app, then click the Deploy button.
- We’ll see a new dialog with a message indicating that our project has been successfully deployed as a web app. Below that message the URL of your web app would displays.
- Open the URL in browser, and we should see a page that looks like the image according to the code in the html file.
HtmlOutput: This object contains content that can be served from a script. This
HtmlOutput object is what we must return from our
doGet function, and it is this content that is served to the user when they access our web app.
This is an object that can produce an
HtmlOutput dynamically. It gets its contents from a file, a string, etc.
Two particularly notable methods of
evaluate method runs the template and returns an
HtmlOutput object. The
HtmlService uses the Caja Compiler to sanitize and sandbox the HTML that gets served to users. To lists some of the limitations on web apps built using
HtmlService as a result of the Caja sanitization process Click here.
<script> tags. These libraries will be fetched on the server before your page is loaded, and will be sanitized in the same way that your code is. That means that if the included library violates any of the rules for
This will create a carousel (Image Slider). Just deploy the project as described above and open the URL in the browser. Carousel will be displays their. Here, a force-printing scriptlet (
<?!= ... ?>) used that outputs the value of its first statement into the resulting HTML, but without any contextual escaping. Its calling a gs file’s method, that would return CSS and JS code to the html file. This will work when page is loaded.
For more information about HtmlServices Click Here.
To view carousel click this link
The code is pushed on github. To view the code click here
16 thoughts on “Google Apps Script: Create user interface using HTML/ CSS/ JavaSript8 min read”
I tried your example. However, the carousel is not rendered as expected. Infact, the images are listed one below the other. I would like to know is it because of attempt to use some unsupported feature?
Thanks for pointing this out. Actually, the path of js file is no longer exist. So, carousel is not rendering as expected. I just updated the post and pushed the code on Github. All required js , css and images are placed there. I also deployed this project script as a web link. You can see the carousel behavior here.
I hope, now this would work as expected.
1. images and the
2. js (Reference : )
in my Google Drive?
Which kind of problem you are getting in this example? If possible, share your code base with me. I’ll check out, that why this example is not working for you. And you have to store these requires images and js file at some place, where you can globally access these files. You can just put these files to Google Cloud, if you have access , and make them visible publicly or just you can make a public folder in your Google drive and share the folder as Public on the web. After that you can access files globally. For this, have a look on this link : http://css.dzone.com/articles/using-google-drive-web-host .
If you again face any kind of problem regarding this example, Please let me know.
The blog the gs+html is very interesting. I create a GAS project and copy the above 4 sets of coding one by one. When I browse a public url, nothing display. I don’t know what’s wrong. There is my url: https://script.google.com/macros/s/AKfycbxvVE1wujvj8GBRyhlEKcKTI_CQtPRDKQ1VVeU0V-V6yqraKT01/exec
Thank you for your help.
Ahh it seems the link does not appear in the comment. The reference is – slides.min.jquery.js
Thank you for putting this together, I am just trying to get my head around Google Sites. I followed your instructions but cannot get the js file to work. Any ideas what I am doing wrong? I am deploying it as a web app then inserting it on the page as a web script gadget…is this right? Thanks
Also. Just so you can see what I have done wrong.This is the home pg where I want it to display: https://sites.google.com/site/bulimbaprivateschool/home
This is the current script: https://script.google.com/macros/s/AKfycbyPgrIIaEGsZh9qvt9DEC5-sYCJCH75Ia4LvZo9Ng/dev
thanks for the nice post. am stuck at the point that the js files are not loaded because the images just show as a list without animation.
was requesting if i could have a copy of your app which is working i can see.
dont know what am doing wrong. dolowed all steps.
Thanks for liking the post. I have shared the carousel code script with you. Now, you can view the code. Just copy the code and put to your own script, then deploy as web app. Hope, you would see a working carousel there.
Let me know, if this also would not work for you.
thanks alot. i got a working copy.
i didnt know where i went wrong in the first place – but thanks again, i will catch up from here.
works like a charme
was wondering if you could help me again to point me in the right directions.
i was to modifier your app to display a full-screen slideshow instate. so i used your working sample as starting point and changed only the java-script references, css and the html in order to reflect the changes. anything else i left unaltered.
but still, i have same problem as before, the java scripts doesn’t get loaded.
i would like to share my copy of app, but dont find your gmail adress. maybe you will see the issue in a second.
am using this script: http://buildinternet.com/project/supersized/demo.html
does app-script only accept specific types of java-scripts (trough restrictions of caja)?
how do i find out if the full-background-script comply to this?
would appreciate your comments.
cheers from mombasa
I am not sure how do I make the images appear in my google app script..even if i make a folder, keep images into it and make it public on web..the images do not appear. do i need to keep the script too in the same folder?
Reblogged this on agarwalruchi08.
Comments are closed.