Google Apps Script: Create user interface using HTML/ CSS/ JavaSript

Table of contents

Reading Time: 5 minutes

The Html Service in Google Apps Script provides ability to create and serve HTML output from a script.

Scripts that create user interfaces with the Html Service can contain HTML, JavaScript, and CSS. Our scripts can display the user interface in the following three ways:

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.

function doGet() {
return HtmlService.createHtmlOutputFromFile('<htmlFileName>');
}

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.

The Html Service allows to serve HTML output from a script, sanitized by Google Caja. The Caja Compiler is an open-source tool for making third-party HTML, CSS and JavaScript safe to embed in your website or web app. The Html Service contains two primary classes:

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.

HtmlTemplate. 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 HtmlTemplate are evaluate and getCode. The evaluate method runs the template and returns an HtmlOutput object. The getCode method returns a string of JavaScript code based on the template file. This code that is returned is the code that the template is actually running.

Caja Sanitization:

Google Apps Script web apps run on the script.google.com domain. This enables many useful features, such as embedding scripts in Google Sites and having access to the identity and authorizations of signed-in users who are accessing the web app. However, to protect the security of the users accessing these web apps, the scripts are not allowed to serve arbitrary HTML or JavaScript. 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.

We can include external JavaScript libraries in our code via <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 HtmlService code, you will get an error loading your web app. Many JavaScript libraries will work within these rules, but not all will. To check working on any JavaScript file, we can use Caja Playground.

Here, is the example that contains a gs file, and html files. This example creating a carousel (Image Slider) using HTML/ CSS/ JavaScript.

Carousel.gs File:


function doGet() {
var result=HtmlService.createTemplateFromFile('CreateCarousel').evaluate();
return result;
}

function getContent(filename) {

var return1= HtmlService.createTemplateFromFile(filename).getRawContent();
return return1;
}

CreateCarousel.html:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carousel</title>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/js/slides.min.jquery.js"></script>

<?!= getContent("CarouselCSS")?>
<?!= getContent("CarouselJS")?>
</head>
<body>

<div id="slides">
<div>

<div>
<img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/slide-1.jpg"
width="930" height="450" alt="Slide 1">
<div>
<p>Image 1</p>
</div>
</div>

<div>
<img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/slide-2.jpg"
width="930" height="450" alt="Slide 2">
<div>
<p>Image 2</p>
</div>
</div>

<div>
<img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/slide-3.jpg"
width="930" height="450" alt="Slide 3">
<div>
<p>Image 3</p>
</div>
</div>

<div>
<img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/slide.jpg"
width="930" height="450" alt="Slide 3">
<div>
<p>Image 4</p>
</div>
</div>

</div>
<a href="#"><img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/arrow-prev.png"
width="24" height="43" alt="Arrow Prev"></a> <a href="#"
class="next"><img
src="https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/arrow-next.png"
width="24" height="43" alt="Arrow Next"></a>
</div>

</body>
</html>

carouselCSS.html:


<style>
body {
font: normal 62.5%/1.5 Arial, sans-serif;
letter-spacing: 0;
background-color: #e5e6e8;
height: 430px;
padding: 0;
margin: 0;
}

/*
Slideshow
*/
#slides {
z-index: 100;
}

/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width: 920px;
height: 390px;
overflow: hidden;
display: none;
margin: 0 auto;
}

/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container div.slide {
width: 920px;
display: block;
height: 390px;
}

/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position: absolute;
top: 160px;
left: 190px;
width: 24px;
height: 43px;
display: block;
z-index: 101;
opacity: 0.5;
}

#slides .next {
left: 1080px;
}

/*
Pagination
*/
.pagination {
margin: 26px auto 0;
width: 100px;
}

.pagination li {
float: left;
margin: 0 1px;
list-style: none;
}

.pagination li a {
display: block;
width: 12px;
height: 0;
padding-top: 12px;
background-position: 0 0;
float: left;
overflow: hidden;
}

.pagination li.current a {
background-position: 0 -12px;
}

/*
Caption
*/
.caption {
z-index: 500;
position: absolute;
left: 0;
bottom: 50px;
height: auto;
padding: 5px 20px 10 20px;
background: #000;
background: rgba(0, 0, 0, 0.5);
width: 930px;
line-height: 1.33;
color: #b0f0d8;
border-top: 1px solid #000;
text-shadow: none;
font: normal 16px arial, helvetica;
}

a:link,a:visited {
color: #599100;
text-decoration: none;
}

a:hover,a:active {
color: #599100;
text-decoration: underline;
}

span.newsTitle {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
border-bottom: 1px solid #b0f0d8;
}
</style>

carouselJS.html:

<script>
$(function(){
$('#slides').slides({
  preload : true,
  preloadImage : 'https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/loading.gif',
play : 7000,
pause : 3500,
hoverPause : true,
animationStart : function(current) {
$('.caption').animate({
bottom : -35
}, 100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ',
current);
};
},
animationComplete : function(current) {
$('.caption').animate({
bottom : 0
}, 200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ',
current);
};
},
slidesLoaded : function() {
$('.caption').animate({
bottom : 0
}, 200);
}
});
$('.pagination li a')
.css(
'background-image',
'url(https://raw.github.com/ruchiagarwal-knoldus/Google-Apps-Script--Create-user-interface-using-HTML--CSS--JavaSript/master/img/pagination.png)');

});
</script>

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”

Hi Ruchi,

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?

agarwalruchi08 says:

March 19, 2013 at 11:55 AM

Hi Meghna,

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.

Thank You!

Hi Ruchi!

Thank You for a fantastic piece of example. It helped me clear a lot of basics with respect to using external Javascript with GAS. Strangely, the same piece of code that works for you does not work for me. Do I have to store the

1. images and the
2. js (Reference : )

in my Google Drive?

agarwalruchi08 says:

March 26, 2013 at 6:18 AM

Hi Meghna,

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.

Thank You!
1. Paulus says:
  
  May 19, 2013 at 9:00 AM
  
  Hi Ruchi,
  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.
  Paulus

Ahh it seems the link does not appear in the comment. The reference is – slides.min.jquery.js

Hello,
i want to create a blogging web application using HTML, CSS and Javascript

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

Cherie Flowers says:

June 1, 2013 at 9:54 AM

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 again.

hi –

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

agarwalruchi08 says:

March 21, 2014 at 10:59 PM

Hello Peter,

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!
1. peter says:
  
  March 21, 2014 at 11:15 PM
  
  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.
  
  cheers
2. Ronny says:
  
  March 21, 2014 at 11:57 PM
  
  thanks!!!
  
  works like a charme
3. Ronny says:
  
  March 23, 2014 at 4:29 PM
  
  hi –
  
  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

Hello
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?