G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

Input widgets

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

Button widget 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

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 widget 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 widget 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 widget 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 widget 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.

Dropdown widget Dropdown

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 widget 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 widget Radio Group

Use the radio group widget to let users choose one of several pre-configured options.

Usage

Drag a radio group widget onto the page and use the Property Editor to configure its values and options.

Common workflows

Radio groups allow users to select one value from an array of options.

Styling

Use the theme picker in the Action Bar to control whether the widget displays horizontally or vertically.

Additional information

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

Start Rating widget Star Rating

Use the star rating widget to enable users to apply a rating to another object on the page.

Usage

Drag a star rating widget onto the page and use the Property Editor to configure its options, including total number of stars and how many are selected when the widget loads.

Common workflows

  • Set the number of stars and bind the value to a datasource.

Styling

Use the theme picker in the Action Bar to choose whether the widget uses stars or hearts.

Examples

The Vendor Ratings template uses star ratings.

Additional information

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

Slider widget Slider

Use the slider widget to let users select from a range of values.

Usage

Drag a slider widget onto the page and use the Property Editor to configure its options, including its range of values.

Common workflows

  • Set the range of values and bind them to datasources.

Styling

There are no styling options for this widget.

Examples

The Material Gallery template has a slider widget

Additional information

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

Suggest Box widget Suggest Box

Use the suggest box widget to help users complete a text field with values you have pre-configured.

Usage

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

Common workflows

  • Use the value property to specify the value, and options to provide suggested values. The type of items in options should match the type of items in value.
  • You can configure the Suggest Box to pull its suggestions from a field with possible values, a relation, or to a record from an existing model. This can currently only be done using the UI provided in the suggest text field.

Styling

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

Examples

The Vendor Ratings template uses the suggest box widget.

Additional information

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

Text Editor widget Text Editor

Use the text editor widget to provide a text editor where users can write and format longer text entries.

Usage

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

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 editor looks.

Examples

The Vendor Ratings template uses the text editor widget.

Additional information

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

Multi Select widget Multi Select

Use the multi select widget to let users select multiple items from an array of options.

Usage

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

Common workflows

  • Use options to provide a list of possible options to users. Use values to store the selected values. The type of items in options should match the type of items in values. You can specify a custom string to display for each option by setting the names property.
  • Multi Select widgets are useful in assigning values to repeated fields or setting a many relation end.

Styling

Use the theme picker in the Action Bar to control how the multi select widget looks.

Examples

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 widget Drive Picker

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

Usage

  1. Configure your app to run as user
  2. 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 widget User Picker

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

Usage

  1. Add a Directory model to your app.
  2. 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.