Build a Database Web App in App Maker

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

  • App Maker Data Models.
  • App Maker UI development with Forms, Tables and Popups.

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. b5dcea20357d49e5.png
  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. af0486c7725a6578.png
  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:

ff71c56e1db0747d.png

  1. Click on the field named Priority, then click Advanced. Locate the Possible Values property. Click to edit its values. 3adbc4ad19df0e8.png
  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. 1d7f31bc1462f857.png
  2. Increase the height of the panel to 800 using the property editor on the right under Layout. 4af2f8f2569e10ee.png
  3. Open the Widget Palette by clicking the Widgets icon d12b59d57e5e7a9d.png in the upper left corner. 106757e730101275.png
  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. 44f2f45c312dfd2a.png

c05d6bbf49f4f052.png

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.

6253e9851823c54c.png

Accept the final default table options and click FINISH.

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

13bb93fe1dba8712.png

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.

e1e1a34cf72874b6.png

The table will now appear 24 pixels below the form.

780b8270449c5940.png

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.

e0370c9a56b605e6.png

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

2be2aef19a14dae6.png

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.

e1faeaf03a5f57.png

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

Select Popup as the option and click NEXT.

ad8a0b143232771f.png

Accept the default Empty Popup option and click CREATE.

8aa0843047a5db7b.png

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.

974b1251f6caa8c1.png

Set the width and height properties in the Property Editor:

Width: 462

Height: 416

Open the Widget Palette d12b59d57e5e7a9d.png 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.

21413e4968178cd2.png

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.

a9ffab77c2a4df71.png

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

710621b952e8b0ed.png

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 dropdown selector and select the style ‘FabMini'.

f5b8aa419cc98c5b.png

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.

212ddc43e39fd461.png

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 inserted.

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.

548097fa781a9659.png

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!

c1e823b24f64c9d5.png

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)

  • REST
  • JDBC (Note: You'll need your own MySQL database connection)