Tuesday, August 14, 2012

UiBot - Google Apps Script User Interface Library

I've been playing around with Google Apps Script lately, and I thought I'd share a small class I wrote to make building user interfaces with the UI Service a little more pleasant. With this library, you can specify an interface through a simple declarative JSON syntax, rather then a lot of chained function calls (or the GUI builder). It also includes some helpers to reduce the amount of code needed to build forms.

While you can also create a UI with Google's recently released Html Service, the UI Service has the nice properties of sharing a common design with Google Docs and working smoothly across all of the browsers Docs supports. UiBot works with all of the ui elements supported by the UI Service.

Details and a brief tutorial are at:
https://github.com/gotdan/UiBot#overview

Here's a snippet of UiBot code:
var form = {
wType: 'HorizontalForm',
items: [{
fieldLabel : 'Name:',
wType : 'TextBox',
name : 'userName'
},{
fieldLabel : 'Age:',
wType : 'TextBox',
name : 'age'
},{
fieldLabel : 'Period:',
wType : 'ListBox',
name : 'periodList',
data : ["Day", "Month","Quarter", "Year"],
selected : "Month"
}]
};
var bot = new UiBot.UiBot({
title: 'Test App!',
items: [ form ]
});
view raw gistfile1.js hosted with ❤ by GitHub

1 comment: