Digital Inspiration
The HTML Service of Google Apps Scripts lets you serve HTML web pages with standard CSS and client side JavaScript as a web app. You can also communicate with various Google services and render the results in a HTML5 web page.
For instance, with HTML Service, you can build a Gmail like web app that displays your latest email messages and you can even interact - like delete or reply to emails. Or you can display a range of data from a Google Spreadsheet without making your entire sheet public.
Example #1 - a sample web app that displays a static web page. The script of course needs to be deployed as a web app through the script editor.
// code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME); } // index.html<div>Hello, world!</div>Example #2 - Here the page uses CSS and JavaScript to display the current time to the user. Notice how we include the content of external files into the index.html file using the include() method.
// code.gsfunction doGet() { var html = HtmlService.createTemplateFromFile('html').evaluate(); html.setTitle('Webpage Title'); return html;}function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();}// script_js.html<script> function getTime() { document.getElementById('time').innerHTML = new Date().toString(); }</script>// script_css.html<style> div { padding: 20px; border: 1px solid gray; }</style>// index.html<?!= include('script_js'); ?><?!= include('script_css'); ?><html> <body> <div id="time"></div> </body></html>Example #3 - Here we’ll display the content of a spreadsheet into a web page. When the index.html file is loaded on the client side, it call the getData() server function and, if the call is successful, the data is rendered using the showData() method.
// code.gs function doGet() { var html = HtmlService.createTemplateFromFile("html").evaluate(); html.setTitle("DynamicWebpage"); return html; } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).setSandboxMode(HtmlService.SandboxMode.IFRAME) .getContent(); } function getData(){ var sheet =SpreadsheetApp.openById("SheetID").getSheets()[0]; return sheet.getDataRange().getValues(); } // script_js.html<script> window.onload = function () { google.script.run.withSuccessHandler(showData).getData(); }; function showData(data) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<br>' + data[i].join(':'); } document.getElementById('data').innerHTML = html; }</script>// index.html<?!= include('script_js'); ?><body> <div id="data"></div></body>Google Apps Script
ShareWhatsAppTwitterFacebook
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons includingMail Merge for GmailandDocument Studio. Read more onLifehackerandYourStory
Digital Inspiration has won several awards since it's launch in 2004.
Google Developer Expert
Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.
ProductHunt Golden Kitty
Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.
Microsoft MVP Alumni
Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.
Google Cloud Champion
Google awarded us the Champion Innovator title recognizing our technical skill and expertise.
Subscribe to our YouTube channel and get notified whenever we upload a new video tutorial.
Send Confirmation Emails with Google Forms
Create Mail Merge with Gmail and Google Sheets
Create PDF Files from Google Form Responses
Automate Document Workflow with Google Forms and Sheets
Request e-Signatures with Google Forms
Save Gmail Emails to Google Drive
Email Google Sheets Automatically
Create Photo Badges with Google Slides
Send Stripe Invoices with Google Forms
How to Sell Digital Goods with PayPal and Google Sheets
Google Apps Script - A Developer's Guide
Rename File uploads in Google Forms
File Upload Forms for Google Drive
Dictation - Type with your Voice
YouTube Video Uploader for Teams
Limit Google Form Responses Automatically
Convert Google Slides to Video and Animated GIFs
How to Hide Files inside Google Drive
Create Merge Documents with Google Sheets or Google Forms
Create PDF Documents with Images and QR Codes
Send Unique File Attachments with Mail Merge for Gmail
Print Password Protected PDF Files
Embed Google Photos in your Website
Create Emoji Art with Google Sheets
Google Add-ons
We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.
Send personalized email to your contacts with Google Sheets & Gmail
Create pixel perfect documents from Google Sheets and Google Forms
Download emails and attachments from Gmail to your Google Drive
Send email to respondents when they submit your Google Forms
Email entire spreadsheets, selected cell ranges or send dynamic charts on schedule.
Turn your Google Slides presentations into animated GIF images and videos
Tutorials
Email Newsletter
Sign up for our email newsletter to stay up to date.
We will never send any spam emails. Promise.
