Google Apps Script

Class FormPanel

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.

Methods

MethodReturn typeBrief description
add(widget)FormPanelAdd a widget to the FormPanel.
addStyleDependentName(styleName)FormPanelSets the dependent style name of this FormPanel.
addStyleName(styleName)FormPanelAdds a style name to this FormPanel.
addSubmitCompleteHandler(handler)FormPanelAdd a handler for when the form is submitted and the server has finished processing the results.
addSubmitHandler(handler)FormPanelAdd a handler for when the form is submitted.
clear()FormPanelRemove all widgets from the FormPanel.
getId()StringReturns the id that has been assigned to this object.
getTag()StringGets the text tag of this FormPanel.
getType()StringGets the type of this object.
setAction(action)FormPanelSets the URL to submit this form to.
setEncoding(encoding)FormPanelSets the encoding used for submitting this form.
setHeight(height)FormPanelSets the height of this FormPanel.
setId(id)FormPanelSets the id of this FormPanel.
setMethod(method)FormPanelSets the HTTP method used for submitting this form.
setPixelSize(width, height)FormPanelSets the size of this FormPanel in pixels.
setSize(width, height)FormPanelSets the size of this FormPanel.
setStyleAttribute(attribute, value)FormPanelSets one of this FormPanel's style attributes to a new value.
setStyleAttributes(attributes)FormPanelSets this FormPanel's style attributes.
setStyleName(styleName)FormPanelSets the style name of this FormPanel.
setStylePrimaryName(styleName)FormPanelSets the primary style name of this FormPanel.
setTag(tag)FormPanelSets the text tag of this FormPanel.
setTitle(title)FormPanelSets the hover title of this FormPanel.
setVisible(visible)FormPanelSets whether this FormPanel is visible.
setWidget(widget)FormPanelSets the widget inside this FormPanel, removing anything previously there.
setWidth(width)FormPanelSets the width of this FormPanel.

Detailed documentation

add(widget)

Add a widget to the FormPanel.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.

Return

FormPanel — the FormPanel itself, useful for chaining.


addStyleDependentName(styleName)

Sets the dependent style name of this FormPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

FormPanel — the FormPanel itself, useful for chaining.


addStyleName(styleName)

Adds a style name to this FormPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

FormPanel — the FormPanel itself, useful for chaining.


addSubmitCompleteHandler(handler)

Add a handler for when the form is submitted and the server has finished processing the results.

This handler is in addition to the "doGet" or "doPost" that will automatically be called when the form is submitted, and is called after they have completed and returned their result.

The handler passes back some information to the server about what happened. This information can be accessed as follows:

 
function doGet() {
   var app = UiApp.createApplication();
   var textBox = app.createTextBox();
   var submitButton = app.createSubmitButton();
   var form = app.createFormPanel();
   var handler = app.createServerHandler("handlerFunction");
   form.addSubmitCompleteHandler(handler);
   form.add(textBox);
   form.add(submitButton);
   app.add(form);
   return app;
 }

 function handlerFunction(eventInfo) {
   var parameter = eventInfo.parameter;
   // the type of event, in this case "submitcomplete".
   var eventType = parameter.eventType;
   // the id of the widget that fired this event.
   var source = parameter.source;
 }
 
The values of any child widgets which have a setName function and whose names have been set will be passed up as well. In addition, the values of certain widgets can be sent up with the event, as "callback elements." See the documentation of ServerHandler for more information.

Parameters

NameTypeDescription
handlerHandlerthe handler to execute when the event occurs. This can be a ClientHandler or a ServerHandler.

Return

FormPanel — the FormPanel itself, useful for chaining.


addSubmitHandler(handler)

Add a handler for when the form is submitted.

This handler is in addition to the "doGet" or "doPost" that will automatically be called when the form is submitted, and is called before them.

The handler passes back some information to the server about what happened. This information can be accessed as follows:

 
function doGet() {
   var app = UiApp.createApplication();
   var textBox = app.createTextBox();
   var submitButton = app.createSubmitButton();
   var form = app.createFormPanel();
   var handler = app.createServerHandler("handlerFunction");
   form.addSubmitHandler(handler);
   form.add(textBox);
   form.add(submitButton);
   app.add(form);
   return app;
 }

 function handlerFunction(eventInfo) {
   var parameter = eventInfo.parameter;
   // the type of event, in this case "submit".
   var eventType = parameter.eventType;
   // the id of the widget that fired this event.
   var source = parameter.source;
 }
 
The values of any child widgets which have a setName function and whose names have been set will be passed up as well. In addition, the values of certain widgets can be sent up with the event, as "callback elements." See the documentation of ServerHandler for more information.

Parameters

NameTypeDescription
handlerHandlerthe handler to execute when the event occurs. This can be a ClientHandler or a ServerHandler.

Return

FormPanel — the FormPanel itself, useful for chaining.


clear()

Remove all widgets from the FormPanel.

Return

FormPanel — the FormPanel itself, useful for chaining.


getId()

Returns the id that has been assigned to this object.

This can be used in conjunction with app.getElementById() to retrieve a reference to this object.

Return

String — the id that has been assigned to this object


getTag()

Gets the text tag of this FormPanel.

Return

String — the text tag.


getType()

Gets the type of this object.

Return

String — the object type


setAction(action)

Sets the URL to submit this form to.

By default the form is submitted back to the original script, which can handle it in a "doPost" method.

Parameters

NameTypeDescription
actionStringthe URL to submit the form to. May either be a relative URL or an absolute URL with an HTTP or HTTPS scheme.

Return

FormPanel — the FormPanel itself, useful for chaining.


setEncoding(encoding)

Sets the encoding used for submitting this form.

Valid values are "multipart/form-data‎" and "application/x-www-form-urlencoded", which is the default. There is rarely a reason to change this setting.

Parameters

NameTypeDescription
encodingStringthe encoding to use.

Return

FormPanel — the FormPanel itself, useful for chaining.


setHeight(height)

Sets the height of this FormPanel.

Parameters

NameTypeDescription
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

FormPanel — the FormPanel itself, useful for chaining.


setId(id)

Sets the id of this FormPanel.

Parameters

NameTypeDescription
idStringthe new id, which can be used to retrieve the FormPanel from app.getElementById(id).

Return

FormPanel — the FormPanel itself, useful for chaining.


setMethod(method)

Sets the HTTP method used for submitting this form.

Valid values are "get" and "post". The default is "post".

Parameters

NameTypeDescription
methodStringthe HTTP method to use.

Return

FormPanel — the FormPanel itself, useful for chaining.


setPixelSize(width, height)

Sets the size of this FormPanel in pixels.

Parameters

NameTypeDescription
widthIntegerthe new width in pixels.
heightIntegerthe new height in pixels.

Return

FormPanel — the FormPanel itself, useful for chaining.


setSize(width, height)

Sets the size of this FormPanel.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

FormPanel — the FormPanel itself, useful for chaining.


setStyleAttribute(attribute, value)

Sets one of this FormPanel's style attributes to a new value. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttribute("background", "black")
     .setStyleAttribute("color", "green");
 

Parameters

NameTypeDescription
attributeStringthe CSS attribute, in camel-case ("fontSize", not "font-size"), as listed here
valueStringthe CSS value

Return

FormPanel — the FormPanel itself, useful for chaining.


setStyleAttributes(attributes)

Sets this FormPanel's style attributes. This is a convenience method that is equivalent to calling setStyleAttribute with every key/value pair in the attributes object. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttributes({background: "black", color: "green"});
 

Parameters

NameTypeDescription
attributesObjectan object of key/value pairs for the CSS attributes and values to set; valid attributes are listed here

Return

FormPanel — the FormPanel itself, useful for chaining.


setStyleName(styleName)

Sets the style name of this FormPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

FormPanel — the FormPanel itself, useful for chaining.


setStylePrimaryName(styleName)

Sets the primary style name of this FormPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

FormPanel — the FormPanel itself, useful for chaining.


setTag(tag)

Sets the text tag of this FormPanel.

Parameters

NameTypeDescription
tagStringthe new text tag, which can be anything you wish to store with the widget.

Return

FormPanel — the FormPanel itself, useful for chaining.


setTitle(title)

Sets the hover title of this FormPanel.

Not all browsers will show this.

Parameters

NameTypeDescription
titleStringthe hover title.

Return

FormPanel — the FormPanel itself, useful for chaining.


setVisible(visible)

Sets whether this FormPanel is visible.

Parameters

NameTypeDescription
visibleBooleanwhether this FormPanel should be visible or not.

Return

FormPanel — the FormPanel itself, useful for chaining.


setWidget(widget)

Sets the widget inside this FormPanel, removing anything previously there.

Parameters

NameTypeDescription
widgetWidgetthe widget to put in this FormPanel.

Return

FormPanel — the FormPanel itself, useful for chaining.


setWidth(width)

Sets the width of this FormPanel.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".

Return

FormPanel — the FormPanel itself, useful for chaining.

Deprecated methods

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.