Use layout widgets to arrange other widgets.
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
layoutproperty 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 and 
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
layoutproperty 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
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
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
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
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 and 
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
splitPositionproperty 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.