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

Tutorial 5: Establish Relations

Button Widget Intermediate App Maker skills

access_time About 30 minutes

What you’ll build

You’ll build an HR app that lists employees by department. A user of the app can:

  • Create, edit, navigate between, sort, and delete department and employee records
  • View employee records in two ways:

    • By department only
    • By department or view all

What you’ll learn

This tutorial teaches you how to:

  • Create relations between data models. For example, from Departments to Employees. This is a one-to-many relation. One department can have multiple employees.
  • Display records that satisfy the relation; for example, records for all employees in the HR department.

Create your app

  1. Sign in to the G Suite account provided by your employer or school.
  2. Open App Maker.
  3. Create a new app and name it Relations.

Set up the Department data model

  1. Create the Department data model (in Google Drive Tables).
  2. Add these fields:

    Field nameField type
    DepartmentString
    LocationString

  3. Click the Department field and click Set as display field.

App Maker displays the contents of this field as a brief representation of a Department record; for example, for options in a Dropdown widget (using the binding expression @datasource.items)

Set up the Employee data model

  1. Create the data model Employee (in Google Drive Tables).
  2. Add these fields:

    Field nameField type
    FirstNameString
    LastNameString
    EmailString
    StartDateDate

    You don't need a display field for the Employee model in this app.

Add a relation

  1. Select the Department model and click the Relations tab.

  2. Click Add Relation to add a one-to-many relation from the Department model to the Employee model:

    1. For Department model chevron_right Count, select One.
    2. For the second model, select Employee.
    3. For Employee model chevron_right Count, select Many.

      Keep the default names that App Maker chooses for both ends of the relation.

    4. Click Create.

Create the UI for editing departments

  1. Rename the NewPage page to EditDepartments. The top-level panel of the page is selected.
  2. In the Property Editor, click the datasource property and select Department.
  3. Add a Form to the page. Keep default options for the form.
  4. In the left sidebar, click close Close to close Widgets.

Create the UI for editing employees

  1. Add an EditEmployees page. The top-level panel of the page is selected.
  2. In the Property Editor, click the datasource property and select Employee.
  3. Add a Form to the page. Keep default options for the form.
  4. In the left sidebar, click close Close to close Widgets.

Create the UI for listing employees by department

There are two ways to use relations to list employees by department:

  • Specific departments only (shown here)—Use the relation as a datasource. The resulting table doesn't support pagination or column-based sorting.
  • Specific departments; when no department is selected, all employees (shown in the next section)—Use a query filter on the relation. The resulting table supports pagination. It also supports column-based sorting for all fields in the datasource to which the widget is bound directly. If columns are included in the table for fields in a relation, those columns don't support column-based sorting.

This tutorial shows you both approaches. In an app, you would pick one approach (probably the second approach because of the greater functionality).

  1. Add a page and rename the page RelationDatasource. The top-level panel of the page is selected.
  2. In the Property Editor, click the datasource property and select Department.
  3. Add a drop-down list for selecting the department:

    1. From Widgets, drag a Dropdown to the page.
    2. Click the value property and select More options chevron_right datasource chevron_right item. Click OK.
    3. Click the options property and select More options chevron_right datasource chevron_right items. Click OK.
    4. Click the label property and enter Select a department.
  4. Add a table for displaying employee records:

    1. From Widgets, drag a Table Table Widget to the page below the Dropdown widget.
    2. Select the Department: Employee (relation) datasource and click Next.
    3. Keep default options for the table. Click Next and Finish.
    4. Horizontally align the left edges of the dropdown and table.
  5. In the left sidebar, click Close close to close Widgets.

Create the UI for listing employees by department or all employees

  1. Add a page and rename the page QueryFilter.
  2. In the Property Editor, click the datasource property and select Employee.
  3. Add a drop-down list for selecting the department:

    1. From Widgets widgets, drag a Dropdown to the page.
    2. For the value property, select the binding expression More options chevron_right datasource chevron_right query chevron_right filters chevron_right Department chevron_right _equals. Click OK.
    3. For the options property, select a binding expression from the Application panel on the left: datasources chevron_right Department chevron_right items. Click OK.
    4. Click the label property and enter Select a department.
    5. Under Events, click onValueEdit and select Reload datasource to reload the datasource and rerun the query when the value of the drop-down list changes.
  4. Add a table for displaying employee records:

    1. From Widgets, drag a Table Table Widget to the page below the dropdown.
    2. The datasource Inherited: Employee is selected. Keep default options for the table.
    3. Horizontally align the left edges of the dropdown and table.
  5. In the left sidebar, click Close close to close Widgets.

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. Enter department data:
    1. From the page chooser, select EditDepartments.
    2. On the Edit Department form, enter the name and location of several departments. Click Create to create each new record.
  4. Enter employee data:
    1. From the page chooser, select EditEmployees.
    2. On the Edit Employee form, enter information for several employees. Click Create to create each new record. Select different departments for the employees.
  5. View employees by department on the page that uses a relation datasource for the table:

    1. From the page chooser, select RelationDatasource.
    2. Select a department from the drop-down list. The table contains employee records for that department. When no department is selected, the table is empty.
  6. View employees by department on the page that uses a query filter to load data for the table:

    1. From the page chooser, select QueryFilter. When no department is selected, the table contains all employee records.
    2. Select a department from the dropdown. Now the table contains employee records for that department.

Congratulations! You’ve just built an App Maker app that uses relations.

Next steps

  1. Take Tutorial 6—Learn about calling external services.
  2. Learn more about relations.
  3. Study the sample app Relations—The Relations sample app is similar to the sample app that you just created.
  4. Learn about query datasources and filters.