Several months ago, I wrote about automating Google Sites using Apps Script. I have been trying to take a look at all of the services available in Apps Script, and I really wanted to play with the UI components. Previously, the UI components were tied to Google Docs and you could not use the UI components directly on a page. That changed with yesterday’s announcement about including an Apps Script Widget on a web page. As we all know, most applications require some sort of user interface. Given that this is all related to Google Sites, it makes even more sense for a web site to have a user interface, obviously. Typically, you would just create the HTML and load up the pages to create your site. However, that is fairly boring and does not give you any dynamic capabilities. What if you want to integrate social services or even have a more dynamic web site where some of the user interface is generated by JavaScript?

There are two tutorials specific to creating UI components on your web page. The first is a simple “Hello World” example, which shows you the minimum amount of work needed to create a script and add the Apps Script widget to the page. Obviously, that example is not too interesting. The second tutorial is a simple time booking application that hooks the UI to a spreadsheet backend. This example is much bigger than the Hello World example, but it is also a little too big for an initial tutorial. The time booking tutorial has some good examples of using buttons and click handlers when you need that kind of detail.

Given that I have been waiting months for the Apps Script Widget, I decided to dive in as quickly as possible. First, you need to review the UI Services to see what you can do. Because Google Sites is quickly becoming an application platform, I wanted to see how much work was required to create a login form. To the right is the example form on a Google Sites page. As you can see it is very simple. It does not include a cancel button mainly because the UI services layout was forcing it to appear below the Login button and I just wanted a quick demo. Given that the form is fairly basic, I am sure that you want to know what the code actually looks like as well.

function doGet() {
 var app = UiApp.createApplication();
 var myForm = app.createVerticalPanel();
 myForm.setWidth("500");
 myForm.setStyleAttribute("padding", "20px");
 myForm.setStyleAttribute("font-size", "12pt");

 var loginLabel = app.createLabel("Username");
 loginLabel.setStyleAttribute("font-weight", "bold");
 myForm.add(loginLabel);

 var loginBox = app.createTextBox();
 loginBox.setWidth("100");
 myForm.add(loginBox);

 var passwordLabel = app.createLabel("Password");
 passwordLabel.setStyleAttribute("font-weight", "bold");
 myForm.add(passwordLabel);

 var passwordBox = app.createTextBox();
 passwordBox.setWidth("100");
 myForm.add(passwordBox);

 var submitButton = app.createButton("Login");
 submitButton.setStyleAttribute("display", "inline");
 myForm.add(submitButton);

 app.add(myForm);
 return app;
}

In less than 30 lines of code, I created a basic form. That actually does not sound that impressive, but I made no attempts to make the code shorter. If I created generic createLabel and createTextBox functions, I could probably get the line count down to 20 lines. This becomes really interesting when you start thinking about the possibilities. If you can dynamically create HTML code within your Google Sites pages, you now have just as much power as any typical blog platform, like WordPress. Given the other abilities within the Apps Script platform, like XML Services, Mail Services and Calendar Services, you can see that the power in Google Sites is now competing directly with Microsoft SharePoint. I would even argue that Google Sites is looking to take the “simple implementation” route that Visual Basic took so many years ago. All of the Apps Scripts services are available using JavaScript. Comparing that to the typical C# implementations required for SharePoint customizations, Google Sites could easily take some “low-end” or departmental business away  from SharePoint. With this Apps Script development and the Google Docs suite, Google is making a big push into the enterprise. Google also announced a change to comments in Google Docs where the comments are being moved to the sidebar and morphed into a collaborative discussion. This collaboration adds to the enterprise capabilities of Google Docs.

Does this mean that Google Sites is really ready for major development? Not quite yet. One issue with the Apps Script Widget is that the main function must be named doGet(). This is not obvious from the tutorials or any of the documentation, and it is possible that it is a defect of some sort. I have noticed other minor issues like this when dealing with other services and method calls as well. UI Services is also marked as “Experimental”, as are a few others services like JDBC Services. Do these issues mean that Google Sites should be ignored until it becomes more stable? Definitely not. There is too much power available that you can easily take advantage of. Google Sites has become a serious development platform, and should be ignored at your own risk.