Sites and Script

http://sites.google.com/site/scriptsexamples/sites-and-script

NOTE: This method is outdated now that one can use Insert -> Script Gadget. However there may be benefit in other aspects of the code. 

In this tutorial you will learn how to add user interaction to Google Sites using Google Script. 

Things you will learn:

• Make a simple Gadget
• Write a UiApp script
• Insert everything in a Site

This is what it will look like:

After clicking "Register Now" the user will be able to enter information into what looks like a popup box.

Step 1 the UiApp Script

Open your site and navigate to the Script Editor

More actions, Manage site, Apps Script, Launch Editor

Paste in the following code. 

For more information on how the UiApp works please browse around this site and go through the Stock Watcher Reloaded tutorial.

UiApp Script

function doGet(e) {
  
  var app = UiApp.createApplication().setTitle("UiApp");
  
  var mainPanel = app.createVerticalPanel().setId('mainPanel');
  app.add(mainPanel);
  
  var grid = app.createGrid(4,2).setCellPadding(2)
      .setStyleAttribute('margin-left', '100px').setId('grid');
  mainPanel.add(grid);
  grid.setWidget(0,0, app.createLabel("Name:"));
  grid.setWidget(0,1, app.createTextBox().setWidth('150px'));
  
  var classList = app.createListBox();
  classList.addItem('JavaScript 101');
  classList.addItem('GWT 400');
  classList.addItem('CS 235');
  
  grid.setWidget(1,0, app.createLabel("Class:"));
  grid.setWidget(1,1, classList);
  
  var regButton = app.createButton('Register');
  var buttonHandler = app.createServerClickHandler('done_');
  buttonHandler.addCallbackElement(mainPanel);
  regButton.addClickHandler(buttonHandler);
  
  grid.setWidget(2,1, regButton);
  
  var thanks = app.createLabel('Thank you for registering').setVisible(false).setId('thanks')
      .setStyleAttribute('margin-left', '100px').setStyleAttribute('margin-top', '50px');
  mainPanel.add(thanks);
  
  return app;
  
}

function done_(e){
  var app = UiApp.getActiveApplication();
  
  app.getElementById('thanks').setVisible(true);
  app.getElementById('grid').setVisible(false);
  
  return app;
}

You will need to Publish the the script as a service and get the URL. 

See: Create a UiApp Script 

Paste the URL in a new window and ensure it works as expected.

Step 2 Create a Gadget

Open up your handy text editor, I use VIM so there is no junk added to my files, and create a file with the extension .xml

ex: registerGadget.xml

Paste this code:

Gadget

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs

title="A Sample Gadget">

   // More Module Preferences go here

</ModulePrefs>

 <Content type="html">

 <![CDATA[

<style type="text/css">

a {

  background-color: green;

  color: white;

  padding: 6px;

  text-decoration: none;

-moz-border-radius: 15px;

border-radius: 15px;

}

</style>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

<!--Hide script from old browsers

function newWindow(newContent)

 {

  winContent = window.open(newContent, 'nextWin', 'left=200, top=200,width=350,height=350, toolbar=yes,scrollbars=yes, resizable=yes, location=no')

 }

 //Stop hiding script from old browsers -->

 </SCRIPT>

<br>

<A HREF="javascript:newWindow('UiApp_URL_Goes_Here')">

  Register Now &rArr;</a>

 ]]>

 </Content>

</Module>

In the 'a' tag insert your UiApp URL

Save and upload the file to a Public web location. 

You can use a Google Site and the Files template to store your Gadget, just make sure it is set to Public access. 

Get the URL to your new Gadget

Step 3 Insert the Gadget

Edit the page you want to add the Gadget and select

Insert, more Gadgets..., Add by URL

Paste in your gadgets URL

Use Width 200 and Height 50 

 

Save and click the Register Now button.

You will have a window pop up close to the center of the page asking for user input. 

Click the Register button to get an Ajax interaction. Next you get to decide what the script will do, calendar, create a page, send emails. It is up to you.

Happy customizing!