AbsolutePanel Deprecated.
Anchor Deprecated.
Anchor Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that represents a simple element. That is, a hyperlink to a different page. By design, these hyperlinks always open in a new page. Links that reload the current page are not allowed. Here is an example of how to use this widget: function doGet() { var app = UiApp.createApplication(); // Creates a link to your favorite search engine. var anchor = app.createAnchor("a link", "http://www.google.com"); app.add(anchor); return app; } Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Anchor documentation here.
Button Deprecated.
Button Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard push-button widget. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); // create a button and give it a click handler var button = app.createButton("click me!").setId("button"); button.addClickHandler(app.createServerHandler("handlerFunction")); app.add(button); return app; }
function handlerFunction(eventInfo) { var app = UiApp.getActiveApplication(); app.getElementById("button").setText("I was clicked!"); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Button documentation here.
CaptionPanel Deprecated.
CaptionPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that wraps its contents in a border with a caption that appears in the upper left corner of the border. This is an implementation of the fieldset HTML element. Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Note also that the placement of the caption in a caption panel will vary slightly from browser to browser, so this widget is not a good choice when precise cross-browser layout is needed. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var panel = app.createCaptionPanel("my caption!"); panel.add(app.createButton("a button inside...")); app.add(panel); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the CaptionPanel documentation here.
CheckBox Deprecated.
CheckBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard check box widget. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var handler = app.createServerHandler("change"); var check = app.createCheckBox("click me").addValueChangeHandler(handler); app.add(check); return app; }
function change() { var app = UiApp.getActiveApplication(); app.add(app.createLabel("The value changed!")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the CheckBox documentation here.
ClientHandler Deprecated.
ClientHandler Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. An event handler that runs in the user's browser without needing a call back to the server. These will, in general, run much faster than ServerHandlers but they are also more limited in what they can do. Any method that accepts a "Handler" parameter can accept a ClientHandler. If you set validators on a ClientHandler, they will be checked before the handler performs its actions. The actions will only be performed if the validators succeed. If you have multiple ClientHandlers for the same event on the same widget, they will perform their actions in the order that they were added. An example of using client handlers:
function doGet() { var app = UiApp.createApplication(); var button = app.createButton("Say Hello");
// Create a label with the "Hello World!" text and hide it for now var label = app.createLabel("Hello World!").setVisible(false);
// Create a new handler that does not require the server. // We give the handler two actions to perform on different targets. // The first action disables the widget that invokes the handler // and the second displays the label. var handler = app.createClientHandler() .forEventSource().setEnabled(false) .forTargets(label).setVisible(true);
// Add our new handler to be invoked when the button is clicked button.addClickHandler(handler);
app.add(button); app.add(label); return app; }
Component Deprecated.
Component Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A generic component object. Implementing classes Name Brief description AbsolutePanel An absolute panel positions all of its children absolutely, allowing them to overlap. Anchor A widget that represents a simple element. Button A standard push-button widget. CaptionPanel A panel that wraps its contents in a border with a caption that appears in the upper left corner of the border. Chart A Chart object, which can be embedded into documents, UI elements, or used as a static image. CheckBox A standard check box widget. ClientHandler An event handler that runs in the user's browser without needing a call back to the server. Control A user interface control object, that drives the data displayed by a DashboardPanel. DashboardPanel A dashboard is a visual structure that enables the organization and management of multiple charts that share the same underlying data. DateBox A text box that shows a DatePicker when the user focuses on it. DatePicker A date picker widget. DecoratedStackPanel A StackPanel that wraps each item in a 2x3 grid (six box), which allows users to add rounded corners. DecoratedTabBar A TabBar that wraps each tab in a 2x3 grid (six box), which allows users to add rounded corners. DecoratedTabPanel A TabPanel that uses a DecoratedTabBar with rounded corners. DecoratorPanel A SimplePanel that wraps its contents in stylized boxes, which can be used to add rounded corners to a Widget. DialogBox A form of popup that has a caption area at the top and can be dragged by the user. DocsListDialog A "file-open" dialog for Google Drive. EmbeddedChart Represents a chart that has been embedded into a Spreadsheet. FileUpload A widget that wraps the HTML element. FlexTable A flexible table that creates cells on demand. FlowPanel A panel that formats its child widgets using the default HTML layout behavior. FocusPanel A simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events. FormPanel A panel that wraps its contents in an HTML
DateBox Deprecated.
DateBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A text box that shows a DatePicker when the user focuses on it. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var handler = app.createServerHandler("change"); var dateBox = app.createDateBox().addValueChangeHandler(handler).setId("datebox"); app.add(dateBox); return app; }
function change(eventInfo) { var app = UiApp.getActiveApplication(); app.add(app.createLabel("The value of the date box changed to " + eventInfo.parameter.datebox)); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DateBox documentation here.
DatePicker Deprecated.
DatePicker Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A date picker widget. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var handler = app.createServerHandler("change"); var picker = app.createDatePicker().addValueChangeHandler(handler).setId("picker"); app.add(picker); return app; }
function change(eventInfo) { var app = UiApp.getActiveApplication(); app.add(app.createLabel("The value of the date picker changed to " + eventInfo.parameter.picker)); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DatePicker documentation here.
DateTimeFormat Deprecated.
DateTimeFormat Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Date and time format constants for widgets such as DateBox. These correspond to the predefined constants from the Google Web Toolkit. You can read more about these constants here.
DecoratedStackPanel Deprecated.
DecoratedStackPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A StackPanel that wraps each item in a 2x3 grid (six box), which allows users to add rounded corners. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DecoratedStackPanel documentation here.
DecoratedTabBar Deprecated.
DecoratedTabBar Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A TabBar that wraps each tab in a 2x3 grid (six box), which allows users to add rounded corners. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DecoratedTabBar documentation here.
DecoratedTabPanel Deprecated.
DecoratedTabPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A TabPanel that uses a DecoratedTabBar with rounded corners. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DecoratedTabPanel documentation here.
DecoratorPanel Deprecated.
DecoratorPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A SimplePanel that wraps its contents in stylized boxes, which can be used to add rounded corners to a Widget. Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DecoratorPanel documentation here.
DialogBox Deprecated.
DialogBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A form of popup that has a caption area at the top and can be dragged by the user. Unlike a PopupPanel, calls to setWidth(width) and setHeight(height) will set the width and height of the dialog box itself, even if a widget has not been added as yet. In general it's not recommended to add this panel as a child of another widget or of the app as that will make it behave like any other inline panel and not act as a popup. Instead, create the popup and then use its show() and hide() methods to show and hide it. See the example below. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DialogBox documentation here. Here is an example showing how to use the dialog box widget:
function doGet() { var app = UiApp.createApplication(); // Create a dialog box. var dialog = app.createDialogBox(); // Set the position and dimensions. dialog.setPopupPosition(100, 100).setSize(500, 500); // Show the dialog. Note that it does not have to be "added" to the UiInstance. dialog.show(); return app; }
DocsListDialog Deprecated.
DocsListDialog Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A "file-open" dialog for Google Drive. Unlike most UiApp objects, DocsListDialog should not be added to the UiInstance. The example below shows how to display a DocsListDialog in the new version of Google Sheets. Note that HTML service offers a similar but superior feature, Google Picker. In almost all cases, using Google Picker is preferable.
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or FormApp. .createMenu('Custom Menu') .addItem('Select file', 'showDialog') .addToUi(); }
function showDialog() { // Dummy call to DriveApp to ensure the OAuth dialog requests Google Drive scope, so that the // getOAuthToken() call below returns a token with the necessary permissions. DriveApp.getRootFolder();
var app = UiApp.createApplication() .setWidth(570) .setHeight(352);
var serverHandler = app.createServerHandler('pickerHandler');
app.createDocsListDialog() .addCloseHandler(serverHandler) .addSelectionHandler(serverHandler) .setOAuthToken(ScriptApp.getOAuthToken()) .showDocsPicker();
SpreadsheetApp.getUi() // Or DocumentApp or FormApp. .showModalDialog(app,' '); }
function pickerHandler(e) { var action = e.parameter.eventType; var app = UiApp.getActiveApplication();
if (action == 'selection') { var doc = e.parameter.items[0]; var id = doc.id; var name = doc.name; var url = doc.url; app.add(app.createLabel('You picked ')); app.add(app.createAnchor(name, url)); app.add(app.createLabel('(ID: ' + id + ').')); } else if (action == 'close') { app.add(app.createLabel('You clicked "Cancel".')); }
return app; }
FileType Deprecated.
FileType Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. File type constants for the DocsListDialog.
FileUpload Deprecated.
FileUpload Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that wraps the HTML element. This widget must be used within a FormPanel. The result of a FileUpload is a "Blob" which can we used in various other functions. Below is an example of how to use FileUpload. function doGet(e) { var app = UiApp.createApplication().setTitle("Upload CSV to Sheet"); var formContent = app.createVerticalPanel(); formContent.add(app.createFileUpload().setName('thefile')); formContent.add(app.createSubmitButton()); var form = app.createFormPanel(); form.add(formContent); app.add(form); return app; } function doPost(e) { // data returned is a blob for FileUpload widget var fileBlob = e.parameter.thefile; var doc = DocsList.createFile(fileBlob); } Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the FileUpload documentation here.
FlexTable Deprecated.
FlexTable Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A flexible table that creates cells on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); app.add(app.createFlexTable() .insertRow(0).insertRow(0).insertRow(0) .insertCell(0, 0) .insertCell(0, 1) .insertCell(0, 2) .insertCell(1, 0) .insertCell(1, 1) .insertCell(2, 0) .setBorderWidth(5).setCellPadding(10).setCellSpacing(10)); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the FlexTable documentation here.
FlowPanel Deprecated.
FlowPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that formats its child widgets using the default HTML layout behavior. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var panel = app.createFlowPanel(); panel.add(app.createButton("button 1")); panel.add(app.createButton("button 2")); app.add(panel); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the FlowPanel documentation here.
FocusPanel Deprecated.
FocusPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events. Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var focus = app.createFocusPanel(); var flow = app.createFlowPanel(); flow.add(app.createButton("button 1")); flow.add(app.createButton("button 2")); focus.add(flow); app.add(focus); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the FocusPanel documentation here.
FormPanel Deprecated.
FormPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that wraps its contents in an HTML <FORM> element. This panel can be used with a SubmitButton to post form values to the server. All children of this panel (direct, or even children of sub-panels) that have a setName function and have been given a name will have their values sent to the server when the form is submitted. The submit can be handled in the special "doPost" function, as shown in the example. Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var form = app.createFormPanel(); var flow = app.createFlowPanel(); flow.add(app.createTextBox().setName("textBox")); flow.add(app.createListBox().setName("listBox").addItem("option 1").addItem("option 2")); flow.add(app.createSubmitButton("Submit")); form.add(flow); app.add(form); return app; }
function doPost(eventInfo) { var app = UiApp.getActiveApplication(); app.add(app.createLabel("Form submitted. The text box's value was '" + eventInfo.parameter.textBox + "' and the list box's value was '" + eventInfo.parameter.listBox + "'")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the FormPanel documentation here.
Grid Deprecated.
Grid Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A rectangular grid that can contain text, html, or a child widget within its cells. It must be resized explicitly to the desired number of rows and columns. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); app.add(app.createGrid(3, 3) .setBorderWidth(1) .setCellSpacing(10) .setCellPadding(10) .setText(0, 0, "X") .setText(1, 1, "X") .setText(2, 2, "X") .setText(0, 1, "O") .setText(0, 2, "O") .setStyleAttribute(0, 0, "color", "red") .setStyleAttribute(1, 1, "color", "red") .setStyleAttribute(2, 2, "color", "red") .setStyleAttribute(0, 1, "color", "blue") .setStyleAttribute(0, 2, "color", "blue")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Grid documentation here.
HTML Deprecated.
HTML Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that contains arbitrary text, which is interpreted as HTML. Only basic HTML markup such as bold, italic, etc. are allowed; in particular, scripts will be stripped out completely. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); app.add(app.createHTML("Hello World!")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the HTML documentation here.
Handler Deprecated.
Handler Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Base interface for client and server handlers. Implementing classes Name Brief description ClientHandler An event handler that runs in the user's browser without needing a call back to the server. ServerHandler An event handler that runs on the server.
Hidden Deprecated.
Hidden Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Represents a hidden field for storing data in the user's browser that can be passed back to a handler as a "callback element". Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); // Note that the name "appState" for callbacks, and the id "hidden" for // getting a reference to the widget, are not required to be the same. var hidden = app.createHidden("appState", "0").setId("hidden"); app.add(hidden); var handler = app.createServerHandler("click").addCallbackElement(hidden); app.add(app.createButton("click me!", handler)); app.add(app.createLabel("clicked 0 times").setId("label")); return app; }
function click(eventInfo) { var app = UiApp.createApplication(); // We have the value of the hidden field because it was a callback element. var numClicks = Number(eventInfo.parameter.appState); numClicks++; // Just store the number as a string. We could actually store arbitrarily complex data // here using JSON.stringify() to turn a JavaScript object into a string to store, and // JSON.parse() to turn the string back into an object. app.getElementById("hidden").setValue(String(numClicks)); app.getElementById("label").setText("clicked " + numClicks + " times"); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Hidden documentation here.
HorizontalAlignment Deprecated.
HorizontalAlignment Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Horizontal alignment constants to use with setHorizontalAlignment methods in UiApp.
HorizontalPanel Deprecated.
HorizontalPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that lays all of its widgets out in a single horizontal column. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var panel = app.createHorizontalPanel(); panel.add(app.createButton("button 1")); panel.add(app.createButton("button 2")); app.add(panel); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the HorizontalPanel documentation here.
Image Deprecated.
Image Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that displays the image at a given URL. The image can be in 'unclipped' mode (the default) or 'clipped' mode. In clipped mode, a viewport is overlaid on top of the image so that a subset of the image will be displayed. In unclipped mode, there is no viewport - the entire image will be visible. Whether an image is in clipped or unclipped mode depends on how the image is constructed, and how it is transformed after construction. Methods will operate differently depending on the mode that the image is in. These differences are detailed in the documentation for each method. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); // The very first Google Doodle! app.add(app.createImage("http://www.google.com/logos/googleburn.jpg")); // Just the man in the middle app.add(app.createImage("http://www.google.com/logos/googleburn.jpg", 118, 0, 50, 106)); return app; }
Due to browser-specific HTML constructions needed to achieve the clipping effect, certain CSS attributes, such as padding and background, may not work as expected when an image is in clipped mode. These limitations can usually be easily worked around by encapsulating the image in a container widget that can itself be styled. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Image documentation here.
InlineLabel Deprecated.
InlineLabel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that contains arbitrary text, not interpreted as HTML. This widget uses a element, causing it to be displayed with inline layout. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the InlineLabel documentation here.
Label Deprecated.
Label Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that contains arbitrary text, not interpreted as HTML. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); app.add(app.createLabel("Hello World!")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Label documentation here.
ListBox Deprecated.
ListBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A widget that presents a list of choices to the user, either as a list box or as a drop-down list. Here is an example usage, which should be executed from within a spreadsheet bound script.
// execute this in a spreadsheet function show() { var doc = SpreadsheetApp.getActiveSpreadsheet(); var app = UiApp.createApplication().setTitle('My Application'); var panel = app.createVerticalPanel(); var lb = app.createListBox(true).setId('myId').setName('myLbName');
// add items to ListBox lb.setVisibleItemCount(3); lb.addItem('first'); lb.addItem('second'); lb.addItem('third'); lb.addItem('fourth'); lb.addItem('fifth'); lb.addItem('sixth');
panel.add(lb); var button = app.createButton('press me'); var handler = app.createServerClickHandler('click').addCallbackElement(panel); button.addClickHandler(handler); panel.add(button); app.add(panel); doc.show(app); }
function click(eventInfo) { var app = UiApp.getActiveApplication(); // get values of ListBox var value = eventInfo.parameter.myLbName; // multi select box returns a comma separated string var n = value.split(',');
var doc = SpreadsheetApp.getActiveSpreadsheet(); doc.getRange('a1').setValue(value); doc.getRange('b1').setValue('there are ' + n.length + ' items selected'); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the ListBox documentation here.
MenuBar Deprecated.
MenuBar Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard menu bar widget. A menu bar can contain any number of menu items, each of which can either fire an event handler or open a cascaded menu bar. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the MenuBar documentation here.
MenuItem Deprecated.
MenuItem Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. An entry in a MenuBar. Menu items can either fire an event handler when they are clicked, or open a cascading sub-menu. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the MenuItem documentation here.
MenuItemSeparator Deprecated.
MenuItemSeparator Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A separator that can be placed in a MenuBar. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the MenuItemSeparator documentation here.
PasswordTextBox Deprecated.
PasswordTextBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A text box that visually masks its input to prevent eavesdropping. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var text = app.createPasswordTextBox().setName("text"); var handler = app.createServerHandler("test").addCallbackElement(text); app.add(text); app.add(app.createButton("Test", handler)); app.add(app.createLabel("0 characters").setId("label")); return app; }
function test(eventInfo) { var app = UiApp.createApplication(); // Because the text box was named "text" and added as a callback element to the // button's click event, we have its value available in eventInfo.parameter.text. var pass = eventInfo.parameter.text; var isStrong = pass.length >= 10 && /[A-Z]/.test(pass) && /[a-z]/.test(pass) && /[0-9]/.test(pass); var label = app.getElementById("label"); if (isStrong) { label.setText("Strong! Well, not really, but this is just an example.") .setStyleAttribute("color", "green"); } else { label.setText("Weak! Use at least 10 characters, with uppercase, lowercase, and digits") .setStyleAttribute("color", "red"); } return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the PasswordTextBox documentation here.
PopupPanel Deprecated.
PopupPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that can "pop up" over other widgets. It overlays the browser's client area (and any previously-created popups). In general it's not recommended to add this panel as a child of another widget or of the app as that will make it behave like any other inline panel and not act as a popup. Instead, create the popup and then use its show() and hide() methods to show and hide it. See the example below. To make the popup stay at a fixed location rather than scrolling with the page, try setting the 'position', 'fixed' style on it with setStyleAttribute(attribute, value). Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the PopupPanel documentation here. Here is an example showing how to use the popup panel widget:
function doGet() { var app = UiApp.createApplication(); // Create a popup panel and set it to be modal. var popupPanel = app.createPopupPanel(false, true); // Add a button to the panel and set the dimensions and position. popupPanel.add(app.createButton()).setWidth("100px").setHeight("100px") .setPopupPosition(100, 100); // Show the panel. Note that it does not have to be "added" to the UiInstance. popupPanel.show(); return app; }
PushButton Deprecated.
PushButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A normal push button with custom styling. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); // create a button and give it a click handler var button = app.createPushButton().setText("click me!").setId("button"); button.addClickHandler(app.createServerHandler("handlerFunction")); app.add(button); return app; }
function handlerFunction(eventInfo) { var app = UiApp.getActiveApplication(); app.add(app.createLabel("The button was clicked!")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the PushButton documentation here.
RadioButton Deprecated.
RadioButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A mutually-exclusive selection radio button widget. This widget fires click events when the radio button is clicked, and value change events when the button becomes checked. Note, however, that browser limitations prevent value change events from being sent when the radio button is cleared as a side effect of another in the group being clicked. RadioButtons are grouped according to the following rules: In the absence of a FormPanel, RadioButtons with the same name are part of the same group. Within a FormPanel, all unnamed RadioButtons are part of the same group. Within a FormPanel, all RadioButtons with the same name are part of the same group - but not part of the same group as RadioButtons with the same name outside of the FormPanel. Note that radio button selections within a group do not propagate to server handlers created with UiInstance#createServerHandler(). Instead, to capture values on the server, use doPost() or separate handlers for each RadioButton. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the RadioButton documentation here.
ResetButton Deprecated.
ResetButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard push-button widget which will automatically reset its enclosing FormPanel if any. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var panel = app.createFlowPanel(); panel.add(app.createTextBox().setText("some text")); panel.add(app.createResetButton("reset the textbox")); var form = app.createFormPanel(); form.add(panel); app.add(form); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the ResetButton documentation here.
ScrollPanel Deprecated.
ScrollPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that wraps its contents in a scrollable element. Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); // Create some long content. var vertical = app.createVerticalPanel(); for (var i = 0; i < 100; ++i) { vertical.add(app.createButton("button " + i)); } var scroll = app.createScrollPanel().setPixelSize(100, 100); scroll.add(vertical); app.add(scroll); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the ScrollPanel documentation here.
ServerHandler Deprecated.
ServerHandler Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. An event handler that runs on the server. These will, in general, run much slower than ClientHandlers but they are not limited in what they can do. Any method that accepts a "Handler" parameter can accept a ServerHandler. When a ServerHandler is invoked, the function it refers to is called on the Apps Script server in a "fresh" script. This means that no variable values will have survived from previous handlers or from the initial script that loaded the app. Global variables in the script will be re-evaluated, which means that it's a bad idea to do anything slow (like opening a Spreadsheet or fetching a Calendar) in a global variable. If you need to save state on the server, you can try using ScriptProperties or UserProperties. You can also add a Hidden field to your app storing the information you want to save and pass it back explicitly to handlers as a "callback element." If you set validators on a ServerHandler, they will be checked before the handler calls the server. The server will only be called if the validators succeed. If you have multiple ServerHandlers for the same event on the same widget, they will be called simultaneously.
SimpleCheckBox Deprecated.
SimpleCheckBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A simple checkbox widget, with no label. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SimpleCheckBox documentation here.
SimplePanel Deprecated.
SimplePanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that can contain only one widget. This panel is useful for adding styling effects to the child widget. To add more children, make the child of this panel a different panel that can contain more than one child. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var simple = app.createSimplePanel(); var flow = app.createFlowPanel(); flow.add(app.createButton("button 1")); flow.add(app.createButton("button 2")); simple.add(flow); app.add(simple); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SimplePanel documentation here.
SimpleRadioButton Deprecated.
SimpleRadioButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A simple radio button widget, with no label. SimpleRadioButtons are grouped according to the same rules as RadioButtons. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SimpleRadioButton documentation here.
SplitLayoutPanel Deprecated.
SplitLayoutPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that adds user-positioned splitters between each of its child widgets. This panel is similar to a DockLayoutPanel, but each pair of child widgets has a splitter between them that the user can drag. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SplitLayoutPanel documentation here.
StackPanel Deprecated.
StackPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that stacks its children vertically, displaying only one at a time, with a header for each child which the user can click to display. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the StackPanel documentation here.
SubmitButton Deprecated.
SubmitButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard push-button widget which will automatically submit its enclosing FormPanel if any. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var form = app.createFormPanel(); var flow = app.createFlowPanel(); flow.add(app.createTextBox().setName("textBox")); flow.add(app.createSubmitButton("Submit")); form.add(flow); app.add(form); return app; }
function doPost(eventInfo) { var app = UiApp.getActiveApplication(); app.add(app.createLabel("Form submitted. The text box's value was '" + eventInfo.parameter.textBox + "'")); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SubmitButton documentation here.
SuggestBox Deprecated.
SuggestBox Deprecated. This class is deprecated and should not be used in new scripts. A SuggestBox is a text box or text area which displays a pre-configured set of selections that match the user's input. This widget is not currently functional. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the SuggestBox documentation here.
TabBar Deprecated.
TabBar Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A horizontal bar of folder-style tabs, most commonly used as part of a TabPanel. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TabBar documentation here.
TabPanel Deprecated.
TabPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TabPanel documentation here.
TextArea Deprecated.
TextArea Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A text box that allows multiple lines of text to be entered. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var text = app.createTextArea().setName("text"); var handler = app.createServerHandler("count").addCallbackElement(text); app.add(text); app.add(app.createButton("Count", handler)); app.add(app.createLabel("0 characters").setId("label")); return app; }
function count(eventInfo) { var app = UiApp.createApplication(); // Because the text area was named "text" and added as a callback element to the // button's click event, we have its value available in eventInfo.parameter.text. app.getElementById("label").setText(eventInfo.parameter.text.length + " characters"); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TextArea documentation here.
TextBox Deprecated.
TextBox Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard single-line text box. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var text = app.createTextBox().setName("text"); var handler = app.createServerHandler("count").addCallbackElement(text); app.add(text); app.add(app.createButton("Count", handler)); app.add(app.createLabel("0 characters").setId("label")); return app; }
function count(eventInfo) { var app = UiApp.createApplication(); // Because the text box was named "text" and added as a callback element to the // button's click event, we have its value available in eventInfo.parameter.text. app.getElementById("label").setText(eventInfo.parameter.text.length + " characters"); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TextBox documentation here.
ToggleButton Deprecated.
ToggleButton Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A ToggleButton is a stylish stateful button which allows the user to toggle between up and down states. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the ToggleButton documentation here.
Tree Deprecated.
Tree Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A standard hierarchical tree widget. The tree contains a hierarchy of TreeItems that the user can open, close, and select. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the Tree documentation here.
TreeItem Deprecated.
TreeItem Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. An item that can be contained within a Tree. Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TreeItem documentation here.
UiApp Deprecated.
UiApp Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Create user interfaces for use inside Google Apps or as standalone services.
UiInstance Deprecated.
UiInstance Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A representation of a user interface. You can use this to create a new user interface or manipulate an existing one.
VerticalAlignment Deprecated.
VerticalAlignment Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Vertical alignment constants to use with setVerticalAlignment methods in UiApp.
VerticalPanel Deprecated.
VerticalPanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. A panel that lays all of its widgets out in a single vertical column. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var panel = app.createVerticalPanel(); panel.add(app.createButton("button 1")); panel.add(app.createButton("button 2")); app.add(panel); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the VerticalPanel documentation here.
Widget Deprecated.
Widget Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. Base interface for UiApp widgets. Implementing classes Name Brief description AbsolutePanel An absolute panel positions all of its children absolutely, allowing them to overlap. Anchor A widget that represents a simple element. Button A standard push-button widget. CaptionPanel A panel that wraps its contents in a border with a caption that appears in the upper left corner of the border. Chart A Chart object, which can be embedded into documents, UI elements, or used as a static image. CheckBox A standard check box widget. Control A user interface control object, that drives the data displayed by a DashboardPanel. DashboardPanel A dashboard is a visual structure that enables the organization and management of multiple charts that share the same underlying data. DateBox A text box that shows a DatePicker when the user focuses on it. DatePicker A date picker widget. DecoratedStackPanel A StackPanel that wraps each item in a 2x3 grid (six box), which allows users to add rounded corners. DecoratedTabBar A TabBar that wraps each tab in a 2x3 grid (six box), which allows users to add rounded corners. DecoratedTabPanel A TabPanel that uses a DecoratedTabBar with rounded corners. DecoratorPanel A SimplePanel that wraps its contents in stylized boxes, which can be used to add rounded corners to a Widget. DialogBox A form of popup that has a caption area at the top and can be dragged by the user. EmbeddedChart Represents a chart that has been embedded into a Spreadsheet. FileUpload A widget that wraps the HTML element. FlexTable A flexible table that creates cells on demand. FlowPanel A panel that formats its child widgets using the default HTML layout behavior. FocusPanel A simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events. FormPanel A panel that wraps its contents in an HTML
AbsolutePanel Deprecated. The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead. An absolute panel positions all of its children absolutely, allowing them to overlap. Here is an example of how to use this widget:
function doGet() { var app = UiApp.createApplication(); var button = app.createButton("a button"); var panel = app.createAbsolutePanel(); // add a widget at position (10, 20) panel.add(button, 10, 20); app.add(panel); return app; }
Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the AbsolutePanel documentation here.