App Maker is a low code application development tool that lets your organization build and deploy custom apps easily and securely, on the same platform that powers G Suite.

What is App Maker?

App Maker offers:

This codelab will walk you through creating your own web App using App Maker, including the UI, as well as the data model. You will create an app starting from a blank template.

What you will build

In this codelab, you're going to build a simple Project Tracker App using App Maker. Your app will:

  • Be built from a blank template.
  • Rely on a simple data model.
  • Have a simple UI that you will enrich along the way.

What you'll learn

What you'll need

Create an app

Open a web browser and navigate to appmaker.google.com

The first time you launch the app, a dialog box appears.

On the left side, you can select an existing application configuration or

create a new app. On the right side, you can access a selection of link to tutorials, Codelabs, Docs and Samples.

Here, select CREATE NEW APP in the lower left side.

When creating a new application in App Maker, you can start from a template or from a blank application. App Maker offers a selection of interesting templates that can help you reduce the time to create you application. Each template is focus on a business case and therefore comes with a data model and a UI. You can then create you application by using a template as is or by modifying it to your needs.

In this codelab we won't use a template, instead we will start from a scratch.

Select Blank Application.

Name your application. Changing the text in the upper left corner of the application from ‘Untitled App' to something more appropriate such as ‘Project Management'.

What is a Model?

The app relies on a model to organize and store data. A Model can be seen as a table in a database or a sheet in a spreadsheet. A Model organize data into named fields, and store it in collections called records.

There are five types of models:

How to edit a Model?

App Maker offer a Model Editor. This is a UI to define your own model:

Ask yourself:

Here we will use the Google Cloud SQL model.

It is a powerful database option. Your app can use an existing custom database, or you can create a new one. In this codelab we will create a new database.

When setting up a new Google Cloud SQL instance, you have the choice between First Generation and Second Generation Cloud SQL instances. App Maker supports both, but App Maker supports only MySQL databases (not PostgreSQL).

First you need an acces to a Google Cloud SQL database for the app.

In App Maker you have two options (tow type of Google Cloud SQM databases):

If your G Suite administrator has already enabled Google Cloud SQL, all new models are created with databases in the default SQL instance.

Here we will assume the following:

The Google Cloud SQL instance is already enabled for your G Suite domain, so you don't have specific steps to go through.

(if not please contact your G Suite administrator for details. Setup of Google Cloud SQL is not part of this codelab).

Creation of your model

  1. From the DATA node above PAGES (on the Left hand side of the UI).
  2. Hover over DATA and click the + that appears. This will launch the model creation wizard
  3. Select Google Cloud SQL from the list of options, and click NEXT.
  1. Name your model ‘Project', and click CREATE. (You will now be placed into the FIELDS tab of the model editor).
  2. To add a field, click ADD NEW FIELD.
  3. Select String as the datatype from the list.
  4. Name this field: ‘ProjectName'.
  1. Click ADD NEW FIELD and create the following fields:

Now you need to define a user interface (UI) and bind the DAta Model to it.

App Maker UI consists of:

Create your first page

  1. Create a new page, by clicking on the + that appears on the right side of the PAGES node when hovering over it.
  2. Select the Page option in the page creation wizard and click CREATE.
  3. Name the new page CreateProject. (Notice the name property is pre-selected in the Property Editor)
  4. Now we'll define a default data source for this new page:

  1. Open the Widget Palette by clicking on the following button on the left hand sde of App Maker UI:
  2. Drag and drop a Form widget onto the page.

  1. A dialog box appears to let you select the appropriate Datasource for the widget. The widget can inherit from the page datasource (project). Click Next.
  2. On the following Dialog, notice that the Form Widget can be set up to allow editing of records or inserting new record only. Select the Insert option and click Next.
  3. The next step allow you to select which fields you want to display on the Form. Select Owner, Project Name, Priority, Budget, Due Date.

You should have the following :

Create another Page

  1. Create a new Page named ViewProjects
  2. Add a Table Widget to this new page. Accept the default settings by clicking Next until the widget is added to the page.
  3. Add a Bar Chart Widget to the Page.
  4. Select the ‘project' datasource and click Next.
  5. In the next step, select the Budget field as the Bar Chart Data.
  6. Adjust the position of the widget above the Table widget and resize it appropriately.

In a next step we will add a button to the Page in order to be able to add new record to the Project dataset. This button will open the CreateProject page.

You can now test the app for the first time.

On the upper right corner of the App Maker UI, click on the Preview button.

This will publish a deployment of the app's latest version in a preview special instance. So in case you have already published a deployment of your app, this preview will not affect the published version your users are seeing.

Note that at the top of the app UI, you have drop down list to switch between the different pages of the app (between the ProjectView page to the project creation page).

Create some contents by adding new project.

You will also notice that the user experience could be enhanced regarding the CreateProject page. We prefer to define the Project's owner based on a user Directory instead of typing text.

We will improve this user experience in the next steps.

In order to offer a better user experience, we are going to add a new button on the ViewProjects page. Clicking this button will open the CreateProject Page.

  1. Add a button to the ViewProjects page above the Table widget.
  2. With the widget still selected, click on the drop down list in the upper left corner of the App Maker UI (above the Widgets Selection Panel). This is the element style dropdown and select Icon instead of Regular.

The Button will now be rendered as an icon.

  1. We need to specify its appearance. To do that, in the Property Editor panel, set the text property to ‘add_circle'. Here you can use any of the icon available in the material design resources (https://material.io/icons/#ic_add_circle).
  2. Set the Name property to ‘CreateProjectBtn'
  3. Switch to the Style Editor panel by clicking the button.

  1. Here you can define style applied to the UI through CSS syntax. Click in the Editor and press (Ctrl + Space). This displays the code completion popup where you can select the proposed CSS class to define. Here it should be .app-ViewProjects-CreateProjectBtn.

If the (Ctrl+Space) doesn't display the code completion check that you're in the Page Style section of the Style Editor Panel and not in the Global Style section.

  1. You're going to define the color, size and other style parameters of the button by setting the following CSS properties:
color: royalblue;
Font-size: 40px;
padding: 10px;
min-height: 50px;
min-width: 50px; 
padding: 5px;

Now you should have the following in the Page Style section:

Now the button should look like the following:

  1. In the Property Editor, find the Event section and click on the onClick event property.

Select ‘Open Dialog' and choose the ‘CreateProject' dialog.

Here you can either choose ‘Open Dialog' (which opens a specific page as a dialog box in a modal mode) or ‘Navigate to' (which navigates to a specific page).

  1. On the CreateProject page, select the Submit button, select the onClick Event. As there is already an action defined, select ‘Custom Action' and add the following line to the script:

app.closeDialog();

Your script should look like the following:

If you don't specify that the CreateProject page won't close after clicking the Submit button. As it is a modal dialog, you won't be able to switch to the ViewProjects.

  1. Select the Clear Button and on the select the onClick Event > Close dialog.
  2. Test your application.

You can continue to enhance the UI by adding a nice header to each page.

In order to do that you should consider using page fragment. Page fragment allow you to define re usable UI section such as header, footer, or menu.

  1. Create a new page of type ‘Page fragment' instead of ‘Page‘.
  2. Name the page fragment ‘Header'.
  3. Use the grab points to resize the page fragment so it is wider and shorter.
  4. Select the style variant of the fragment from the dropdown on the action bar to be Primary.
  5. Now let's add some content to the header. Open the Widgets palette by clicking the widgets button in the top action bar.
  6. Add a Label widget onto the fragment. Double-click it and change its text. Click on the text property to select Binding. In the dialog set the binding to : currentPage>displayName

  1. Then change its style to Title using again the element style dropdown on the action bar.
  2. Return to the ViewProjects page.
  3. On the Widgets panel scroll down to locate the Header page fragment, then add it onto your Main page.
  4. To ensure that the header will take the full width of the page and stick to the top, you need to update properties in the Layout section of the inspector:
  1. Left: 0
  2. Top: 0
  3. Change the width to auto, then set Right to 0;
  1. Now you can add your new header fragment to any page. The label will be dynamically updated.
  1. Select the ViewProjects Page
  2. Open the Widgets Panel.
  3. At the bottom of the widget list, you will find your new fragment.
  4. Drag and drop your fragment to the page and place it at the top.
  1. Use the Style Editor and add the following code:
.app-ViewProjects-CreateProjectBtn {
  color: royalblue;
  font-size: 40px;
  padding: 10px;
  min-height: 50px;
  min-width: 50px; 
  padding: 5px;
}
  1. Test your app and notice when resetting the width of the browser window, the Header stays pinned to the right.
  2. Now you can reproduce the steps to add the header to the CreateProject page.

During this lab you have been able to rapidly build your first app with App Maker. This app is based on a simple data model but allows users to create new records and view existing records.

You have also experienced different ways to enhance the UI (material design icon, CSS styling, events).

In the next lab you will see how to go further with the UI by adding interesting widgets like User Picker (to select project owner according to the users Directory).

Also we will see how to add scripts (Client script as well as Server script).

We want to be able to notify the project owner each time a new project record is created.

For that we need to know the project owner email address and request the Server backend to send an email to this address from the current user email account.

First we will add new widget to the CreateProject page within the existing form. This widget is the UserPicker. It is mapped to the users Directory, and allow the current user to select an existing user from the Directory. This widget offers an auto complete functionality, as well as a nice looking UI including the user thumbnail and his name. Then when a user is selected, a specific Directory item is selected. The Directory data model contains a lot of information such as user email address.

Adding a User Picker

First we are going to modify the CreateProject page UI to embed the UserPicker widget.

  1. Select the CreateProject page from the PAGES node (on the left hand side of the UI).
  2. Open the Widgets Selector and drag'n drop the User Picker widget onto the existing form just above the Owner field.
  3. A dialog box appears and notifies you that a Directory Model is required. Adding the User Picker widget automatically create the requested model by clicking the Create button.

  1. Click CREATE. You can notice that a new model is automatically created within the DATA node. Behind the scene this model is automatically mapped to the Google Cloud Directory of the current organization. Take the time to explore this new model. The FIELDS tab lists all available fields (such as user's email address). You can change how fields are displayed and drag them to change their sort order.
  2. Switch back to the CreateProject page and select the User Picker you've just dropped onto it.
  3. In the Property Editor, select the value property and specify a binding: More options and datasource>item>Owner
  4. Then update the label to : ‘Owner'.
  5. Now you can delete the former Owner Field from the form to only keep the User Picker widget.
  6. Test your app.

You should get the following UI:

Now we are able to get the Project Owner email address and since we will specify that the app account execution is the user account (during publishing deployment), the app will use the user account to send an email.

So we will now focus on the scripts to send this email.

  1. Select the ProjectName field from the CreateProject page.
  2. Update the field name to ‘ProjectName'. We're going to use this field later in the script.
  3. Select the Submit button from the CreateProject page.
  4. Click the onClick event property in the Property Editor, and select ‘Custom Action'. Add the following lines at the beginning of the script:
var form = widget.parent.parent.descendants;
var to = form.UserPicker1.value;
var projectname = form.ProjectName.value;
sendEmail(to, 'New project','Hello, a new project has been assigned to you. Project name ' + projectname);

Here we call the sendMsg function. It doesn't exist yet.

So we need to define this function in a ClientScript. In order for the app to send an email we need to call a function only available on server side. For that we also need to call a Server Script and to write it.

The process will look like this:

Create a Client Script

  1. On the SCRIPTS node on the left, click on the + button to invoke the script creation wizard.
  2. Accept the default "Client" option, and with the "Generate sample code" option unchecked, and click FINISH.

  1. Rename the newly generated script to ‘ClientScript'.
  2. In the Script Editor, add the following code:
function sendEmail(to, subject, msg){
  google.script.run
  .withFailureHandler(function(error){
    console.log(error);
  })
  .withSuccessHandler(function(result){
    console.log(result);
  }).sendMsg(to, subject, msg);

}

Create a Server Script

  1. On the SCRIPTS node on the left, click on the + button to invoke the script creation wizard.
  2. Accept the default "Server" option, and with the "Generate sample code" option unchecked, and click FINISH.
  3. Rename the newly generated script to ‘ServerScript'.
  4. Add the following code to the new script:
function sendMsg(to, subject, msg) {
  console.log("LOG from ServerScript - sending email to : " + to );
  MailApp.sendEmail(to, subject, msg);
}

Test your app

Anytime you create a new project, the owner should receive an email.

You may have noticed that the ServerScript uses the console object. It is displayed at the bottom of the page

This object is available to log information on server side. The resulting log are stored in Google Cloud Platform Stackdriver and can be viewed or analysed at anytime.

To check the server log, in the Preview app, click at the bottom of the page on the Server Logs link:

This will open up a new web browser tab to access Stackdriver.

We already saw that using App Maker, you leverage Google Cloud Platform capabilities such as Google Cloud SQL. Here you can see another of these capabilities: Stackdriver.

We would like to add related notes to each project record.

Instead of adding a new field, we will add a new data model and link it to our Project data model. This will use the concept of ‘relation'.

Relations express potential connections between records. Think of a relation as the ability for one record to be associated with another. For example, a Person model in social app could have a Friends relation that represents friendship between two people.

Add a new data model

  1. Add a new data model (Google Cloud SQL) and name it Note.
  2. Add two fields: Content (String) and CreatedDate (Date)
  3. For the CreatedDate field, select the Event tab and setup the onBeforeCreate event as follow:

record.CreatedDate = new Date();

Now you need to define the relationship between Project and Note models.

Create a relation between data models

  1. Select the RELATIONS tab and click ADD RELATION button.
  2. On the left you have the Note model and on the right the Project model. One project could be related to many notes. So on the left set the Count property to ‘Many' and on the right set it to ‘One'.

At this point the relation is defined. However you still need to define the ownership. Ownership allow you to specify Owner for a model on one end of a relation. Doing so creates an owner-owned relationship for associated records in the two models:

For instance here if a project is deleted, we want all related notes to be deleted automatically. Define the Project as Owner of the relation.

You should have the relation defined as follow:

Click the CREATE button.

In order to support this new data model we need to update the UI.

  1. Create a new Page and call it EditProject.
  2. Update the Page datasource to Project.
  3. Add a Form to this new page. When specifying the data model select Inherited: Project, but note that a new data model is available : Project: Note (relation).
  4. Select the Edit type and click Next.
  5. Select all fields to be edited and click Finish to add the widget.
  6. On the right side of this Form add a Table widget. When specifying the datasource select Project:Note (relation). This will use the relation between Projects and Notes.
  7. Only select the Content field to be displayed and click Next.
  8. Uncheck the Deletable rows and click Finish.
  9. On the new created table, select the first row (not the header)

  1. Set the vertical size to fixed and the height to 150 in the Layout section of the Property Editor.

  1. Drag and drop a new Text Area widget in the row next to the Content field.
  2. Set his value property to data binding : @datasource.item.Content.

  1. Then delete the former Content field in the row.

You should have something like the following:

  1. Add a button above the row on right hand side next to the spinner icon.
  2. Set his style variant to FabMini, and his text to ‘add'. The button now looks like a plus sign icon.
  3. Rename the button as ‘OKbtn'.
  4. Set the onClick event to ‘Create New Item'
  5. Add the header fragment to the page.
  6. Add a new button below the table widget.
  7. Modify the text property to ‘OK'.
  8. Set up his onClick event to ‘Close Dialog'.
  9. Update the Style of these new widgets using the Style Editor with the following code:
.app-EditProject-OKbtn {
  color: AppWorkspace;
  background-color: royalblue;
}

.app-EditProject-Button1 {
  color:royalblue;
}

The page should look like the following:

  1. Test your app.

During this lab you have created an app from scratch using the blank template, you have used Google Cloud SQL as well as Directory data model and added more complexity to the data model using relation between models.

You have also updated the UI accordingly to leverage this new data model and enhanced it to offer a nice user experience.

Mixing all the previously seen concepts, you are able to create compelling application.

You can also explore templates available out of the box within App Maker. You can leverage these templates to rapidly start creating application with App Maker.