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

Layout Widgets

Use layout widgets to arrange other widgets.

Fixed Panel Widget Fixed Panel

Use the fixed panel widget to control the layout of other widgets. Widgets in fixed panels have layout properties that set their size and position relative to the edges of the panel.

Learn more about page layout with fixed panels.

Usage

Drag one of the panel widgets onto the page and use the Property Editor to configure its text, appearance, and function.

Common Workflows

  • Bind the panel to a datasource.
  • Click the layout property to change the type of panel.

Styling

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

Additional information

The API has more information about the styles, properties, methods, and events used by panels.

Examples

Many samples and templates use Panels.

Horizontal Panel Widget Horizontal and Vertical Panel Widget Vertical Panels

Use panel widgets to control the layout of other widgets. Widgets in vertical and horizontal panels have layout properties that control their size and position, though the options for controlling position are much more limited than in fixed panels. Flow panel properties are arranged in two columns: horizontal and vertical. Each column controls its respective axis.

Learn more about page layout with flow panels.

Usage

Drag one of the panel widgets onto the page and use the Property Editor to configure its text, appearance, and function.

Common Workflows

  • Bind the panel to a datasource.
  • Click the layout property to change the type of panel.

Styling

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

Additional information

The API has more information about the styles, properties, methods, and events used by panels.

Examples

Many samples and templates use Panels.

List Widget List

Use the list widget to display data from each item in a datasource as a separate row in a list. In the editor, a list has an outer panel that defines its size and an inner prototype row that determines the layout of the rows in the list.

Usage

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

When an app runs, App Maker creates a special datasource for each item in the datasource's items list. It then references the prototype row to create a row for each new datasource.

Because list rows use special datasources, some model datasource methods don't work on them. For example, deleteItem(), createItem(), prevItem(), and nextItem() all throw an error for list's datasources. If you'd like to delete a record from a list row, create a delete button in the prototype, and set its onClick event to widget.datasource.item._delete().

Common Workflows

Lists display data from each item in a datasource as a separate row in a list. In the editor, a list has an outer panel that defines its size and an inner prototype row that determines the layout of the rows in the list.

When an app runs, App Maker creates a special datasource for each item in the datasource's items list. It then references the prototype row to create a row for each new datasource.

Because list rows use special datasources, some model datasource methods don't work on them. For example, deleteItem(), createItem(), prevItem(), and nextItem() all throw an error for list's datasources. If you'd like to delete a record from a list row, create a delete button in the prototype, and set its onClick event to widget.datasource.item._delete().

Styling

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

Additional information

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

Examples

The Project List sample uses the list widget.

Grid Widget Grid

Use the grid widget to display data from each item in a datasource as a cell in a grid. In the editor, a grid has an outer panel that defines its size and an inner prototype row that determines the layout of the cells in the grid.

Usage

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

Common Workflows

Grid widgets are identical to list widgets, except their prototype is a cell in a grid rather than a row. They're helpful for displaying a small amount of detail for a large number of items, like photo album thumbnails or an online shopping inventory.

Styling

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

Additional information

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

Examples

The Corporate Store template uses the grid widget.

Accordion Widget Accordion

Accordions are like lists, but they have a second detail prototype that expands when a user selects a row. They're useful for including more information than can be practically displayed in a list or for including an additional edit panel for a selected item.

Usage

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

Common Workflows

The accordion is a ListPanel with a detailed view that expands below the selected row. This detailed view is edited as a prototype, like the main row view.

During runtime, one row is shown per item in the accordion's datasource. The datasource for that row is a special single item datasource pointing to the corresponding item in the Accordion's datasource. The detail row is also given this special datasource. This allows the prototype row to access the current row's item with the '@datasource.item' syntax.

Styling

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

Additional information

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

Examples

The Material Gallery template uses an accordion widget.

Tabs Widget Tabs

Use the tabs widget to enable high-level organization of content.

Usage

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

Common Workflows

Tabs control the display of content in a consistent location. Use Tab Properties in the Property Editor to add, edit, and delete tabs.

Styling

Use the theme picker in the Action Bar to control how the tabs look.

Additional information

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

Examples

The Material Gallery template uses a tabs widget.

Horizontal Split Widget Horizontal and Vertical Split Widget Vertical Splits

Use vertical and horizontal split widgets to control the layout of other widgets. They are similar to other panels, except they have a movable divider.

Split panels can be nested to create responsive layouts, fill parent dimensions and flow based on content size.

Usage

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

Common Workflows

  • Bind the split to a datasource.
  • Use the splitPosition property to control where the split divides the panel.

Styling

The split widgets have no pre-configured styling options.

Additional information

The API has more information about horizontal and vertical split widgets.

Examples

Many samples and templates use splits.