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

Tutorial 2: Work with Data

Button Widget Intermediate App Maker skills

access_time 15-20 minutes

What you’ll build

You’ll build a simple employee database app. A user of the app can:

  • Create new employee records and enter data in them
  • Edit employee records
  • Navigate between records
  • Sort records
  • Delete records

What you’ll learn

This tutorial teaches you how to:

  • Create a data model and add fields to it. You learn data-related concepts—data models, fields, records, datasources, and data bindings.
  • Add form and table widgets to a page. You learn how to modify these widgets and how they work. You also learn the difference between insert forms and edit forms.

Create your app

  1. Sign in to the G Suite account provided by your employer or school.
  2. Open App Maker.
  3. Create a blank app:
    • If App Maker displays the welcome dialog, click Create New App.
    • Otherwise, click Menu menu chevron_right New chevron_right Blank Application.
  4. Rename the app. Delete the default name, Untitled App, and enter Employee Database.

Create a data model

Create a data model and define the fields that the data model will contain. A data model organizes data by fields (for example, Name, Email, and HireDate) and stores data in records. For this tutorial, you’ll use a Google Drive Tables data model.

  1. Hover over Data and click add to add a model.

    The Create Model dialog box appears with Google Drive Table selected.

  2. Click Next.

  3. Name the data model EmployeeData.
  4. Click Create. App Maker creates the data model and opens the Model editor.

Add fields to the data model

Add fields to EmployeeData:

  1. On the tab toolbar, click the Fields tab.
  2. For each field:

    1. Click Add New Field, and select the field type.
    2. In the Name field, enter the field name. You can leave the description and other settings unchanged.

    Add these fields:

    Field nameField type
    NameString
    EmailString
    HireDateDate
    ActiveBoolean

Rename the page for the UI and select a datasource

  1. Rename the page:

    1. In the left sidebar, hover over NewPage and click More more_vert chevron_right Rename

    2. Enter EmployeePage and click OK.

    3. When you create a page, it has no predefined datasource. It’s helpful to select a datasource, so widgets on the page automatically inherit the datasource.
    4. EmployeePage is already selected. Otherwise, you would click the page in the left sidebar.
    5. In the Property Editor (visible when Editor edit is selected), click the datasource property.
    6. Click EmployeeData as the datasource.

Add an edit form

An edit form lets a user:

  • Create new records in the database
  • Enter data in the fields in records
  • Select values for fields that have choices (boolean and date fields, and fields with possible values defined)
  • Edit data in the fields in records
  • Delete records from the database

To add an edit form:

  1. EmployeePage is already selected. Otherwise, you would click the page in the left sidebar.
  2. Click Widgets and drag a Form Form Widget onto the page.

By default, the Inherited (EmployeeData) datasource is selected.

  1. Click Next.
  2. Select Edit and click Next.
  3. Specify options for the form:
    • Field—Specify the fields in the datasource that will appear on the form.
    • Editable—Specify whether each field is editable.

For this tutorial, keep the defaults. All fields should appear on the form and are editable. Click Finish.

Add a table

A table presents data as rows and columns. Rows are records. Columns are fields in the data model. An app user can use a table to:

  • View multiple records at the same time, with controls for navigating between pages of data
  • Edit data in fields in records that were defined to be editable
  • Sort records based on the values of fields
  • Delete records

To add a table:

  1. From Widgets , drag a Table Form Widget onto the page below the edit form. Horizontally align the left edges of the edit form and table. By default, the Inherited (EmployeeData) datasource is selected.

  2. Click Next.

  3. Specify options for the table:

    • Field—Specify the fields in the datasource that will appear as columns in the table.
    • Editable—Specify whether each field is editable.

    For this tutorial, keep the defaults. All fields should appear in the table and none are editable.

  4. Click Next.

  5. Keep the additional options—paginated, sortable, and deletable rows.
  6. Click Finish.

Preview and test your app

  1. In the top-right corner, click Preview to run your app in a new browser tab.
  2. Click Allow to allow your app to use specific information.
  3. Enlarge the browser window so you can see the entire edit form and the top of the table.
  4. On the Edit Employee form, try to enter a name in the Name field. You can’t, because there isn’t a record yet.
  5. Click Create to create a new record. In the table, you can see the app add the record. This is a real record in the database. Now you can enter data.
  6. Enter all of the data on the form and select possible values. As you enter data, the data appears in the table. The data is live immediately for each field, as soon as you press Enter, click outside a field, or make a selection.
  7. Click Create to create an additional record, and enter data for that record.
  8. With one of the records selected in the table, click Delete delete on the edit form to delete the record. There’s no automatic undo, though that could be done with scripts.
  9. Note the controls App Maker adds to the bottom of the form. Use them to navigate between pages of data.

Congratulations! You’ve just built an App Maker app that works with data.

Explore the power behind the UI

Before finishing this tutorial, take a look at two powerful features that provide the power behind the UI:

  • Bindings—Bindings connect two properties, usually a widget property with a property of the widget’s datasource.
  • Events and actions—Events define when specific things occur. Actions are responses to events.

Learn about bindings

A binding is a two-way link between a widget property and a different property, usually a property of the widget’s datasource. A binding to a property of a datasource is called a data binding.

Because bindings are two-way, changing one bound property changes the other.

Click the browser tab in which the App Maker editor is running. On the Edit Employee form, click the Name text box. In the Property Editor, notice that:

  • The value property has this data binding:

    @datasource.item.Name

    The interpretation of the binding path is:

    • datasource—The datasource for the widget.
    • item—A pointer to the currently selected item (record) in a list of results that the query datasource returns.
    • Name—The value in the Name field of the record.
  • The label property has this data binding:

    @models.EmployeeData.fields.Name.displayName

    To view the data binding, click the labelproperty.

    The interpretation of the binding path is:

    • models.EmployeeData—The EmployeeData model.
    • fields.Name.displayName—The displayName property of the Name field.

Learn about events and actions

You can connect things that occur (events) with responses (actions).

  • Event examples include:
    • An app starts
    • A datasource loads
    • An app checks permissions
    • A user clicks a button
    • An app accesses or changes data
    • An app validates data
  • Action examples include:
    • Creating a new item
    • Deleting the current item
    • Reloading a datasource
    • Running a client script

To view associations of events and actions:

  1. In the Edit Employee form, click Create. In the Property Editor, notice that:
    • You can click onClick to reveal the generated code that creates an item.
    • The event is listed in the Button and Events sections (the same item is shown in two places, for convenience).
  2. In the table, click the Name link (the blue word). In the Property Editor, notice that the onClick event contains generated code that sorts the table by the Name field.

Compare an insert form to the edit form (optional)

Before leaving the topic of forms, you can add an insert form to the Employee Database app, and then compare how the edit form and insert work, and how they’re constructed.

An insert form uses a single draft record that’s in the datasource, not in the database. While the user types, the contents of the draft record aren’t saved to the database immediately. A user must explicitly save the contents of the draft record to the database.

An insert form lets a user:

  • Enter data and select values in fields in a draft record
  • Save the contents of the draft record in a new record in the database. After the data is copied, the draft record is emptied.

Add an insert form

To add an insert form:

  1. From Widgets , drag a Form Form Widget onto the page to the right of the edit form.

The Inherited (EmployeeData) datasource is selected by default.

  1. Click Next.
  2. Select Insert form and click Next. All fields will be present on the form and editable.
  3. Click Finish.

Explore how the insert form works

Earlier, you explored the behavior of the edit form. Here, you can explore the behavior of the insert form:

  1. In the top-right corner, click Preview to run your app in a new browser tab.
  2. If the table contains records, click Delete delete repeatedly until no records are present.
  3. On the Insert Employee form, enter all of the data. You can enter data (unlike on the Edit Employee form), because you’re entering data in the draft record, in the datasource. The data you enter isn’t saved immediately in the database. As you enter data, you’ll see that it doesn’t appear in the table (which contains data from the database).
  4. Click Submit to create a real record in the database, and to copy data from the draft record to the real record.

    After the data is copied, the draft record is emptied. Now the data appears in the table, because the data has been saved in the database. The data also appears in the edit form, which displays data from the current record in the database.

    When you enter data in the edit form, data does not appear in the insert form, because the insert form uses a draft record.

Explore how the insert form is built

  1. Click the browser tab in which the App Maker editor is running.
  2. On the Insert Employee form, click the Name text box. Note the binding in the value property:

    @datasource.item.Name

    This binding is between the Name text box and the value in the Name field of a draft record in the datasource.

  3. Click Submit.

Next steps

  • Take Tutorial 3—Learn about styling an app.
  • Learn more about data—Read the documentation on data models
  • Study the sample app—The Hello Data app replicates your work here, although several changes are made to the edit form.