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

Page Editor Basics

App Maker's page editor is an easy, visual way to build an interface for your apps. Drag widgets onto the canvas, bind them to data, and you've got a UI.

The page editor has three main parts—the canvas where you construct your UI, a Widgets palette with all the UI elements you need, and a right sidebar that lets you control the details.

Canvas

The canvas lets you position and adjust components called widgets that make up your app's UI. The canvas is largely WYSIWYG, or "what you see is what you get", with the slight exception that databound widget properties render with placeholders until you publish or preview an app.

Widgets palette

Drag widgets from the Widgets palette onto the canvas. Some widgets have wizards that help you to bind them to data. Some data binding is automatic, if the default datasource is set for a page.

The right sidebar has three different tools that you need to build your UI:

ToolDescription
Property EditorA list of properties that determine how a selected widget interacts with data, responds to events, loads on the page, and more.
Style EditorA panel that controls the appearance of widgets on the canvas. Select a built-in theme and create your own styles with CSS.
OutlineA list that displays relationships between the page's widgets and allows you to hide widgets and lock them in position.

Data binding with the Property Editor

The Property Editor lets you edit properties that control most aspects of a widget—where it's placed, what it displays, and even how it behaves. For example, label widgets have a text property that determines the text they display.

There are three ways to set a property. When you can set a property in more than one way, click the drop-down list icon arrow_drop_down to select how to set the property.

  • Static value (Equals)—Static values are convenient, because you can enter them directly, but they can't change as a user interacts with your app.

  • Binding expression(Binding)—Bindings expressions are powerful, as they let you connect your UI to your data models, allowing them to dynamically respond as data is entered or edited.

  • Choice (more_horiz)—Choose among preset options or define (and choose) one or more options. For example, select a datasource for a page or add a list of class names to a styles property.

Canvas quick tips

Here are some tips and tricks when working with the canvas:

  • Hold shift and drag the mouse to select multiple widgets.

  • With multiple widgets selected, you can move them as a group, edit shared properties, and more.

  • Right-click the widgets or the canvas to bring up a context-sensitive menu.

  • Hold control while rearranging widgets to temporarily disable the canvas snap-to alignment guidelines.

  • Use arrow keys to move a widget one pixel at a time.

Further reading

  • Learn more about App Maker's many Widgets.

  • Find out how to customize the look and feel of your app with Styles .

  • Get guidance on building your pages in Advanced Layout.