Input widgets

Use input widgets to handle user input like clicks and text entry.

Button

Users click buttons to perform actions, such as submitting a form or sending an email.

Usage

Drag a button onto the page and use the Property Editor to configure its text, appearance, and function.

Common workflows

In the Property editor, set actions to take in response to events, such as an app user clicks a button (the onClick event).
Bind the label's text to a datasource or script.

Styling

Use the theme picker in the Action Bar to control how the button looks.

Additional information

The Widgets API has more information about styles, properties, methods, and events.

Examples

Many samples and templates use buttons.

Label

Use label widgets to add text labels to objects on a page.

Usage

Drag a label onto the page and use the Property Editor to configure its text and appearance.

Common workflows

Provide a caption for an image.
Bind the label's text property to a datasource.

Styling

Use the theme picker in the Action Bar to control how the label looks. You can further customize the typeface and font size.

Additional information

The Widgets API has more information about this widget's styles, properties, methods, and events.

Examples

Many samples and templates use labels.

Text Box

Use a text box widget to provide a place for users to enter and edit text.

Usage

Drag a text box onto the page and use the Property Editor to configure its label, appearance, and initial value.

Common workflows

Provide a place for the user to enter text.
Display a default but editable text value to the user.
Bind the initial value to a datasource.

Styling

Use the theme picker in the Action Bar to choose from several different appearances, including some with a search icon.

Examples

The Material Gallery template has several text boxes.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Text Area

Use the text area widget to provide a large, scrolling field for the user to enter text.

Usage

Drag a text area onto the page and use the Property Editor to configure its text and appearance.

Common workflows

Enable the user to enter a long, scrolling text value.
Bind the label’s text property to a datasource.

Styling

Use the theme picker in the Action Bar to control how the text area looks.

Examples

The Material Gallery template has several text areas.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Checkbox

Use a checkbox widget to provide users with a binary on or off choice.

Usage

Drag a checkbox onto the page and use the Property Editor to configure its label and initial value.

Common workflows

Enable the user to enable or disable a setting.
Bind a value to display the status of particular on/off feature.

Styling

Use the theme picker in the Action Bar to display the widget as a checkbox or slider.

Examples

The Material Gallery template has several checkboxes.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Use the dropdown widget to enable users to choose from a list of options. They're helpful in assigning a value from a set of possible values or for setting a one relation end.

Usage

Drag a dropdown widget onto the page and use the Property Editor to configure its options.

Common workflows

Let the user choose one of several options.
Populate a dropdown list with items from a data model

These are important properties for Dropdown widgets:

Property	Description
`value`	The value assigned to the databound property, based on the user's dropdown selection
`options`	An array of string representations of options that makes up the content of the dropdown
`names`	An array of strings to be displayed in place of `options`' default strings. The array must be the same length as `options`.
`allowNull`	A checkbox that, if checked, sets the dropdown's initial `value` to `null`
`nullItemName`	A string displayed for the dropdown's null value, often used as a prompt for user selections

Here are some examples of dropdown bindings:

This straightforward example allows users to pick a FavoriteColor from a list of Colors represented by a projection of the lists's ColorNames property.

value: @datasource.item.FavoriteColor
options: @datasources.Color.items
names: @datasources.Color.items..ColorNames

This example allows users to assign the Currency field to one of the currencies listed in its possibleValues property.

value: @datasource.item.Currency
options: @datasource.model.fields.Currency.possibleValues

This example lets users bind InternetSpeed to a JavaScript expression consisting of an array literal.

value: @datasource.item.InternetSpeed
options: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

Styling

Use the theme picker in the Action Bar to control how the dropdown looks.

Examples

The Material Gallery template uses dropdown widgets.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Date Box

Use the date box widget to enable users to enter dates. Users can manually type a date or click the calendar icon to display a date picker.

Usage

Drag a date box widget onto the page and use the Property Editor to configure its options, including the date format and time zone.

Common workflows

Enable the user to enter dates in tables, forms, and text areas.

Styling

Use the theme picker in the Action Bar to control how the date box looks.

Examples

The Travel Approval template includes several date boxes.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Radio Group

Add a multi select widget to the page and use the Property Editor to configure its options.

To set the options that an app user can select, set the options property. Click options and, in the binding code editor, enter one of the following:

an array of options, such as ["east", "north", "south", "west"]
a binding to items in a datasource field, with the following syntax:
```
@datasource.items..field-name
```
The .. is the projections operator that lets you access a compiled list of the values for a field. For example, if a model has a field named Region, then you can set the multi select options to all the values for Region of all the records with the binding @datasource.items..Region. If Region is "east" for one record, and "north, south" for another record, then in the app the user can select "east", "north", and "south" as options.

To store the values that the user selects, set the values property with a data binding. If the user selects multiple strings, you must transform them into an array. One way to create an array is to use the strToArray binding transformer:

@datasource.item.field-name#strToArray()

The type of items in options should match the type of items in values.

Common workflow

Use to assign values to repeated fields or set a many relation end.

Styling

To control how the multi select widget looks, use the theme picker in the Action Bar.

Examples

The Select options tutorial teaches you how to set up a multi select widget. The Vendor Ratings template uses the multi select widget.

Additional information

The Widget API has more information about styles, properties, methods, and events.

Drive Picker

Use the Drive Picker widget to lets users find files in their Drives and upload them to your app.

Usage

Configure your app to run as user
Drag a Drive Picker widget onto the page and use the Property Editor to configure its options.

Common workflows

This widget returns the:

File name
File URL, which you can use to link to the file
File ID, which you can use to get a file object. This enables you to call operations, such as:
- File.setOwner(user)
- File.setStarred(starred)
- File.setTrashed(trashed)
- File.makeCopy()
- File.getDownloadUrl()

You must configure your app to run as user to use this widget.

By default, the Drive Picker widget lets users select a file on their Google Drive, or a file on their computer to upload to Google Drive. Drive Picker includes a views property in the Drive Picker property group that adds additional tabs to the view. For example, add FOLDERS to the views property to include a tab on the Drive Picker that shows the user's Google Drive folders; add IMAGE_SEARCH to add a Google Image Search tab; add SPREADSHEETS to display a tab that shows only spreadsheets from the user's Google Drive. For more information on views in the Drive Picker widget, see the Picker Class Reference.

You can use the features property in the Drive Picker property group to modify the behavior of the views. For example, add MULTISELECT_ENABLED to let the user select more than one item at a time. For more information on features in the Drive Picker widget, see the Picker Class Reference.

If you add the Folders view, the Drive Picker remembers the last folder the user viewed and displays it when the user clicks the Drive Picker button again. Users can navigate directly to a folder by clicking any folder name that appears in the navigation path at the top of the widget.

Styling

Use the theme picker in the Action Bar to control how the Drive Picker looks.

Examples

The Vendor Ratings template uses the Drive Picker widget.

Additional information

The Widget API has more information about styles, properties, methods, and events.

User Picker

The User Picker widget lets users find other people in your organization. As a user types, the widget provides autocomplete suggestions, complete with photo, name, and email address.

Usage

Add a Directory model to your app.
Drag a User Picker widget onto the page and use the Property Editor to configure its options.

Common workflows

Bind the selected person's email address to a field in a model.

Styling

Use the theme picker in the Action Bar to control how the User Picker looks.

Examples

The Document Approval template uses the User Picker widget.

Additional information

The Widget API has more information about styles, properties, methods, and events.