Building UI in Apps Script just got a whole lot easier!

Tuesday, June 21, 2011 | 10:57 AM

Labels:

One of the most useful parts of Apps Script is the Ui service. UiApp lets you build a professional looking web app in just a few lines of code. Some of our users have built incredibly complex apps this way, all hosted by Google and running in any modern browser.

For a lot of users, though, UiApp seems a bit daunting. It can be hard to visualize how small changes to your code affect the look of your app, or how adding a component in one place of the UI can shift the positioning of a component in another place. We know what that’s like - we write scripts too! That’s why we’re excited to unveil the new Apps Script GUI Builder.

Creating User Interfaces by Drag and Drop

The GUI Builder lets you construct user interfaces for your scripts quickly and easily. Simply draw the application, set some properties, and you are ready to go! You can use a GUI you’ve constructed this way inside a Spreadsheets dialog, on a Sites page, or as a standalone web service at its own URL.

To use what you’ve built with the GUI Builder inside an app, use this snippet of code:
function doGet() {
var app = UiApp.createApplication();
var component = app.loadComponent(“MyGui”);
app.add(component);
return app;
}

The new loadComponent method loads your GUI and makes it available to the app. Then you can add it to the app like any other component. You can also add it inside another panel, instead of at the root of the app.

GUI Elements created in the Builder behave exactly as if you had created them in code. If you want to reference them in a script, you can do so with the app.getElementById() method. Every element from the GUI will have an ID property (you’ll see it in the GUI Builder) and you can use those to reference components and change them. For example, in the code below we are changing the text color of a button to red.
var button = app.getElementById(“Button1”);
button.setStyleAttribute(“color”, “red”);

Extending the User Interface

Of course, you can do anything you like with these references, such as adding new widgets to panels, or removing widgets created in the builder. You can also use these references to add only part of a GUI to an app. Suppose that inside your GUI is an AbsolutePanel called “Panel1”. This code displays only that panel:
function doGet() {
var app = UiApp.createApplication();
var component = app.loadComponent(“MyGui”);
app.add(component.getElementById(“Pane1l”));
return app;
}

Advanced Features of GUI Builder

Finally, you can add a component to the same app multiple times. If you do this, however, you need to do something extra to make sure that the ID properties don’t collide. Since every element in the GUI has an ID from the builder, you have to specify a different prefix for each copy of the app that you load. This code adds a GUI from the GUI Builder to the same app twice:
app.add(app.loadComponent(“MyGui”, {prefix: “a”}));
app.add(app.loadComponent(“MyGui”, {prefix: “b”}));

You can reference individual elements from each copy using these prefixes. “Button1” becomes “aButton1”, and so on.

Publishing Applications to your users

Once you’ve built a GUI, you can can enable your app as a web service from the Share > Publish as Service menu in the script editor. That will give you a URL for your app, and you’ll see the GUI you built right away! You can also show a GUI inside a spreadsheet using the sheet.show() method.

The GUI Builder currently supports a subset of UiApp widgets, but you can expect that set to continue to grow until all widgets are supported. In the meantime, you can augment a GUI with code, as is demonstrated above. We’ll also continue to improve UiApp - we’ve been listening to your feedback, and we have a lot of excited things planned.

Getting Started

GUI Builder can be accessed from the Apps Script Editor. Click File > Build a user interface and start building interfaces.

You keep building great apps. We’ll keep making it easier.


Corey Goldfeder profile

Corey is a Google software engineer on the Apps Script Project, based in New York. He has previously worked on Similar Shape search for 3DWarehouse, and as a robotics researcher before joining Google.


Want to weigh in on this topic? Discuss on Buzz

23 comments:

Rahim Hirani said...

This is an absolutely fantastic feature!

Daniel said...

When will this feature roll out for Google Apps Education?

Nil said...

Why is that 'I' in 'UI' lowercase? It's bugging the hell out of me...

Anonymous said...

Nil - standard policy to use pascal case to name classes without upper case strings of letters together (upper case represents constant values in code).

Adis H. said...

Reminds me of something :D http://bit.ly/ma9l3y

Anonymous said...

sorry guys Tibco GI had this years ago. The real gui builder is called a Designer and was built by a Sencha intern (see ExtJS).

Peter Svensson said...

I agree that TIBCO did this years ago, also IBM Project Zero, that Korean guy's PHP-based UI designer, WaveMaker, MS Visual Studio ( :) even et.c

But the interesting point here is not that UI WYSIWYG editors already exists but that Google now has a decent one that is *integrated with Google Docs/Apps* so the back-end storage and connectivity is solved. Maybe not in an optimal way (yet) but still not something you have to worry about.

I think this is the beginning of something that will go a very long way. Looking forward to views/containers and transitions so we can have tab, stack, accordion containers and hierarchical containers.

Good work!

Mike Pirnat said...

So now we've almost got an online version of HyperCard? Excellent! (No sarcasm intended; HC was an amazingly liberating platform, and quite ahead of its time.)

Clement Herreman said...

That is suspect, it looks like VB6 built on Javascript.

mark0108 said...

When Will this be added?

mark0108 said...

when will this be added?

RS said...

Where can we go for help on this? The example code doesn't work for me. I created my own GUI and saved it as ATMProgram. I used the sample code provided in the help file. All I did was change the line app.add(app.loadComponent("myGUI")); to reflect my GUI's name which is "ATMProgram", and I get this error: Invalid argument: resourceName (line 3). I've googled the error, but with no luck. Why doesn't the most basic sample code work?

function myFunction() {
var app = UiApp.createApplication();
app.add(app.loadComponent("ATMProgram"));
SpreadsheetsApp.getActiveSpreadsheet().show(app);
}

Michael said...

@RS
Post your question at the Google Apps Script help forum:
http://www.google.com/support/forum/p/apps-script?hl=en

Nicolas ANDRE said...

Hi Thx for the video. It's possible to have the full code ?

Raul C. said...

Currently, Jul 17th, loadComponent( "resourcename") method is still causing a bad "Invalid Argument: resourceName" error.

Raul C. said...

Hi i would like ask a question:

as loadComponent("resourceName") method is still not working, is there any chance to add an "Export_Code" functionality tu GUI Builder (something like a new option in File menĂ¹)? In this way we could be able to cut - paste relevant component's code created by GUI builder.

Thansk for your support.
Raul

Raul C. said...

Hi
it is my pleasure to inform you all that today (@July 23rd 2011), the loadComponent() method
IS WORKING FINE (also for my scripts). And it is a really GREAT feature!!

Thanks to all the guys they worked on it.

Raul

Michael M said...

Do we have to build the UI again for every spreadsheet we want to run the script in?

Felicia said...

I'm trying to play with this as a newbie and build a form with two text boxes and button where I can take two numbers and add them and return the results under the button. I can build the GUI form and display it as a gadget in Sites, but I can't get the button to work (and probably the input boxes either). Yes, I'm a total newbie - just curious and want to try it out.

Gajendra said...

hi everyone!

my code is not showing any error at run time but I don,t know why its not showing my ui screen.please help me.

function doGet() {
var app = UiApp.createApplication();
var component = app.loadComponent("MailGui");
app.add(component);
return app;
}
function sendMail() {
var txtTo=app.getElementById("txtTo");
}

commet said...

Hi Corey - Is there any way you know of to reference an "app" after saving the appid(using "app.getId()")?

That would be great and provide access to widgets on other pages.

Thanks Commet

Nick Dorogavtsev said...

OMG! I'm so excited! Raw tool... but better then nothing :-) Anyone knows where to submit found glitches?

eric marten said...

One of the most important feature of the app builder is app script,Ui script etc and we can learn with the help of this blog information. Thanks for sharing this useful information with us.