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

Display Widgets

Link Widget Link

Use the link widget to display clickable links. Links can be bound to a datasource so that, for example, a user can click a link that was created by another user.

Usage

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

Common workflows

  • Provide a clickable link to your app's users.
  • Bind the link to a datasource so users can easily open links added by others.
  • Set the onclick action to perform pre-configured actions like navigating to another page in your app or reloading a datasource.

Styling

Use the theme picker in the Action Bar to control how links are displayed.

Additional information

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

Examples

Many samples and templates use links.

Image Widget Image

Use the image widget to display images that are hosted outside of your app.

Usage

Drag the image widget onto the page and use the Property Editor to configure its function.

Common workflows

  • Add the URL where the image is hosted to the url property.
  • Use the href property to let users click the image and navigate away from your app.
  • Use an onClick event to let users click the image and navigate elsewhere in your app.

Styling

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

Additional information

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

Examples

Many samples and templates use images.

Google Map Widget Google Map

Use the Google Map widget to display a map within your app.

Usage

Drag a Google Map widget onto the page and use the Property Editor to configure its function.

Common workflows

  • Use the address property to customize where the map is centered when a user loads the page.
  • Bind the map to a datasource so users can input addresses and display them on the map.

Styling

The Google Map widget has no pre-configured styling options.

Additional information

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

Help Icon Widget Help Icon

Use the help icon widget to display popup tooltips within your app.

Usage

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

Common workflows

  • Add your tooltip text to the html property.

Styling

The help icon widget has no pre-configured styling options.

Additional information

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

Spinner Widget Spinner

Use the spinner widget to indicate to users that your app is loading data.

Usage

Drag a spinner widget onto the page and use the Property Editor to configure its appearance and function.

Common workflows

  • Bind the spinner to a datasource, and App Maker will display it whenever that datasource is loading new data.

Styling

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

Additional information

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

Examples

Many samples and templates use spinners.

Html Widget Html

Use the HTML widget to display arbitrary HTML. In the editor, the HTML widget doesn't execute scripts or inherit global styles, so the widget might look slightly different when you preview or publish your app.

Usage

Drag an HTML widget onto the page and use the Property Editor to configure its text, appearance, and function.

Common workflows

  • Use the HTML property to display text.

Styling

Additional information

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

Examples

Many samples and templates use the HTML widget.

Pager Widget Pager

Use the pager widget to let users navigate through your app's pages.

Usage

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

Common workflows

  • Provide an easy way for users to navigate your app.
  • Use the nextEnabled and previousEnabled properties to control what happens when users click the Pager.

Styling

The pager widget has no pre-configured styling options.

Additional information

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

Examples

Many samples and templates use the pager widget.