How to use Google Apps Scripts on Google Sites web page – Tutorial

Hello Friends, In the previous post I have shared first Google Apps tutorial on technokarak.com. In the tutorial you can learn How to auto fill Google Forms fields with Spreadsheet column values. This post showcase a simple tutorial to insert Google Apps script in Google Sites web page. Google Sites allows users to create websites in few minutes, but there are certain limitations like you can’t write your own code to design the web page. To overcome this Google Sites allows insertion of Google Apps scripts in a web page.

How to Insert Google Apps Scripts in Google Sites Web Page

Starting with the tutorial, first you need to create a script to insert in a web page. To do so, open Google Docs and create a new spreadsheet by clicking “Create->Spreadsheet” link.

gs-1

Rename the spreadsheet as per your requirement. Next step is to create a Google Script which will be inserted in a Google Sites Web Page. Open the spreadsheet created in the first step and click on “Tools->Script Editor” Menu item as shown in the image below:

gs2

You will see some code written in the script with a function(), delete that code and save the file. Now the most important part of hosting a Google Apps scripts on Google Sites Web page. To use a script file on web page, your code should start with either doGet(e) or doPost(e) functions. See the image below for sample code used in this tutorial

gs3

Save the file and Click on “File->Manage Versions” menu item as shown below:

gs4

There you will see all the versions of the script starting from the first time script was compiled. Simply click on “Save New Version” button irrespective of the version you see(or no version was shown).

 gs5

Now the script is ready to be deployed as web app, for that click on “Publish->Deploy as web app..” menu.

gs6

Select the Project version to be deployed and select the users who can access the web app. In this post I have selected “Anonymous” which means any one can access the script. Click on “Update” button to start the deployment process. See the process below for complete information.

gs7

Next step is to insert the created Google script in web page. Create new Google site page and click “Insert->Apps Script” menu item

gs8

Now just paste the Google script web app URL created earlier in the deployment step and set the script height and width settings.

gs9

Save the web page and visit the page to see the Google Apps Script in action.

gs10

Test yourself and comment below if you face any problem.

One Response

  1. sajil May 28, 2014

Leave a Reply