This codelab introduces the power of App Maker by stepping through how to create a complete database web app in a few minutes. At the completion of this codelab you will understand the basics of data modeling, as well as UI development in App Maker.

What you'll learn

Important Note:

This codelab requires access to Google App Maker, which is provided to G Suite Business and Enterprise customers, as well as G Suite for Education customers.

  1. Open the starter app template in App Maker.
  2. Hover over DATA and click + to add a new data model.
  3. Accept the default Google Cloud SQL option and click NEXT.
  4. Name your model ProjectDB, and click CREATE.
  5. Click ADD FIELD and select String as the datatype
  6. Name the field: ProjectName.
  7. Create additional fields with names and <types> as: Priority <Number>, Done <Boolean>, Due <Date>.

Once complete, your data model should have these fields:

  1. Click on the field named Priority, then click Advanced. Locate the Possible Values property . Click to edit its values.
  2. Add values 1 2 3 4 in the List Editor then click DONE.

Congrats! You now have a working data model to track your projects.

  1. Click on the page named Page, then click in the center of the page and delete the existing text labels.
  2. Increase the height of the panel to 800 using the property editor on the right under Layout.
  3. Open the Widget Palette by clicking the Widgets icon in the upper left corner.
  4. Drag a Form widget onto the center panel.
  5. Click NEXT to accept the default datasource.
  6. Accept the Insert option and click NEXT.
  7. Uncheck the Id and Done fields, then click FINISH.

Drag a Table widget onto the same panel and place it below the form.

Accept the default datasource, ProjectDB, click NEXT.

Uncheck the Id field and check the ‘editable' checkbox on the top right. Click NEXT.

Accept the final default table options and click FINISH.

In your page, an empty table will render just below the form.

Insert some vertical spacing between the table and the form by setting the Margin top property to 24px, located in the Spacing section of the property editor.

The table will now appear 24 pixels below the form.

Congrats! Your app is now ready to test! Click PREVIEW on the upper right corner.

Accept the default account and click through the remaining authorization steps to proceed.

The app will render in App Maker's Preview Console.

Enter some example project records.

Project Name: "Marketing Campaign"

Due: 2018-03-30

Priority: 2

Project Name: "ACME Engineering Project"

Due: 2018-04-04

Priority: 1

Congrats, you've just built a fully functional database web application to track your projects!

Now we'll improve the app by placing the insert form into a popup dialog.

Switching back to App Maker, in the visual editor, click on the form to select it, then press delete (on your keyboard) to remove it.

Create a new Popup by clicking the ‘+' button to the right of the PAGES node.

Select Popup as the option and click NEXT.

Accept the default Empty Popup option and click CREATE.

Name the new popup ‘InsertForm' in the property editor on the right.

Now click on the content panel in the center of the popup to select it.

Set the width and height properties in the Property Editor:

Width: 462

Height: 416

Open the Widget Palette and drag and drop a Form widget onto the panel.

As before accept the same options:

Click NEXT to accept the default datasource.

Accept the Insert option and click NEXT.

Uncheck the Id and Done fields, then click FINISH.

Now we'll add a button to launch the popup.

Click on the page named Page in the Navigator.

Open the Widget Palette again, drag and drop a Button widget and place it above the table.

With the button still selected, set the Align property (in the Layout section) to the right.

The button will shift over to the right side of the page.

Now we'll change the button to a FAB icon.

With the button still selected, in the top left, locate the Style Selector dropdown. It will show the default style ‘Regular'.

Click the drop down selector and select the style ‘FabMini'.

The button will change to a blue circle.

Now change the text property of the button to ‘Add'. A plus ‘+' will appear inside the button.

Now we need to add code to launch the popup when the button is clicked.

In the onClick property of the button, select Show Popup... -> InsertForm.

For a final step, we'll add some code to close the popup when a new record is insert.

Return to the popup InsertForm in App Maker's visual editor.

Click on the SUBMIT button to select it.

Update the button's onClick property and select Custom Action.

Update the code as:

widget.datasource.createItem(function(){
  app.popups.InsertForm.visible = false;
});

Perform a similar operation for the CLEAR button by updating its onClick as:

widget.datasource.clearChanges(function(){
  app.popups.InsertForm.visible = false;
});

Congrats! You've completed the app!

Click PREVIEW and add a few new records to see your new popup in action!

For further reading on the topics shown in this codelab, see:

Bonus: Connecting to different data sources

To learn how to connect to other data sources including REST and JDBC, check out these sample applications:
(Click below to copy them to your App Maker editor)