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

Tutorial 1: Hello App Maker!

Button Widget Basic App Maker skills

access_time 10–15 minutes

What you’ll build

You’ll build a simple Hello World app. This app takes a name as input and responds to a button click by displaying a custom hello message.

What you’ll learn

This tutorial teaches you how to:

  • Create and rename an app
  • Add UI elements, such as text boxes and buttons, using the Widgets palette and the Page Editor
  • Set the properties of widgets, using the Property Editor
  • Add JavaScript code to respond to a mouse click on a button. Two approaches are described: using a JavaScript alert box and using a property assignment.
  • Preview and test an app

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 Hello App Maker.

Rename a page

Pages in App Maker become pages in an app—similar to traditional webpages. Pages serve as parent containers for UI elements, such as forms, tables, buttons, and charts.

Every new blank app contains an empty page named NewPage. For this app, you only need one page.

Rename the page:

  1. In the left sidebar, next to NewPage, click More more_vert, then click Rename.
  2. Enter HelloPage and click OK.

Add widgets and set their properties

Widgets are the UI pieces that you assemble into an app. For example, label things, accept and present data, set page navigation, and so on.

In this step, use Widgets to add two widgets to HelloPage. As you add the widgets, you set properties in the Property Editor (visible when Editor edit is selected).

You’ll build a page that looks like this:

Hello App Maker

  1. Add a text box for user input:
    1. Click Widgets and drag a Text Box Text Box Widget near the top-left corner of the canvas (the area in the center of the Page Editor). In the Property Editor, the exact placement is visible under Layout.
    2. Drag the right text box handle to the right to increase the width of the text box.
    3. In the Property Editor, change the name property to YourName.
    4. To tell the app user what to do, enter Type your name in the label property.
  2. Add a button for the user to click:
    1. From Widgets , drag a button Button Widget to the right of your newly created text box.
    2. Vertically align the bottom edges of the button and the text box. As you drag the widget, you’ll see a blue line to show the alignment.
    3. Double-click the button and change its text to Say Hello.
  3. Define an action to take when a user clicks the button:
    1. Click the Say Hello button.
    2. In the Property Editor chevron_right Button section, click the onClick property and select Custom Action.
    3. Use JavaScript to define an action, in this case what happens when a user clicks the button. Copy and paste this script into the Client Script dialog:
      alert("Hello " + app.pages.HelloPage.descendants.YourName.value + "!");
      A JavaScript alert box references the value property of the YourName text box.
  4. Press Esc to close the dialog.

Your app is now complete and ready to be tested.

Preview and test your app

You’re now ready to preview your app. A preview is a fully functional app that only you can access.

  1. In the top-right corner, click Preview. Your app opens in a new browser tab.
  2. Click Allow to allow your app to use your information.

    The first time you preview an app, and later if you change your app’s features, you’re asked to allow your app to use specific information.

    Above the app (at the top of the screen), you see the Page menu where you can navigate between the app’s pages. By default, the Page menu is not present in a published app.

    Below the app, you see a console where you can view runtime messages and click a link to view server logs.

  3. In the Type your name text box, enter your name and click Say Hello.

  4. When the alert box appears, click OK to close it.

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

Use a property assignment for output (optional)

In this step, you modify your app by putting the output in the app UI instead of using a JavaScript alert box. Use a Label widget for output and a property assignment in JavaScript to reference the input:

  1. Add a label for the Hello App Maker output.
    1. From Widgets , drag a Label Button Widget below the text box. Horizontally align the left edges of the label and the text box.
    2. In the Property Editor, change the name property to Output.
    3. From the text property, delete Label.
  2. Revise the onClick action of the Say Hello button to take the user’s input and to output it through the label.
    1. Click Say Hello.
    2. Click the onClick property. When the Client Script dialog box appears, delete the current action, and replace it with one of these code snippets:
      • Simplest—Use a single JavaScript assignment statement to assign the value property of the input widget to the text property of the output widget:
        widget.root.descendants.Output.text = "Hello, " +
        widget.root.descendants.YourName.value + "!";

      • A bit more complex, to handle the null case—Reference the input and output widgets in variables, and test for the null case before assigning the text property of the output widget:
        // Define variables for the input and output widgets
        var nameWidget = app.pages.HelloPage.descendants.YourName;
        var outputWidget = app.pages.HelloPage.descendants.Output;
        // If a name is supplied, say hello to it.
        // Otherwise, just say 'Hello!'
        if (nameWidget.value) {
          outputWidget.text = 'Hello, ' + nameWidget.value + '!';
        } else {
          outputWidget.text = 'Hello!';
        } 
    3. Press Esc to close the dialog.
  3. Preview and test your revised app.
    1. In the top-right corner of App Maker, click Preview.
    2. In the text box, enter your name and click Say Hello. The Label widget displays the hello message.
  4. Close the tab in which the Hello App Maker app is running. Keep the tab with App Maker open.

Next steps

  1. Take Tutorial 2—Build a simple employee database app and learn about data models, forms, and tables.
  2. Study the sample app—The Hello App Maker! sample replicates your work here, with one difference—a card was placed on the canvas before placing the other widgets. This card lets you style the UI.