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