Tutorial: Select options

Intermediate App Maker skills

10–15 minutes

Note: You can't complete this tutorial until a G Suite administrator sets up Cloud SQL for your domain.

What you'll build

You'll build an app to order pizza. A user of the app can:

• order a pizza and select the pizza's size and toppings
• view all orders in a table
• update toppings options

What you'll learn

This tutorial teaches you how to:

• Set up different kinds of input widgets
• Three ways to set options for an input widget

You'll also create data models, add pages, and use bindings to set the options in a widget, which are covered in detail in other tutorials.

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 and name it "Pizza Order."

Set up the app's data model and UI

1. Add a Cloud SQL model and name it "Orders".
2. Add the following fields:

Field name	Type
CustomerEmail	String
Size	String
Toppings	String

1. Click the Size field then click Advanced. Click the Possible values field, enter a size, such as "small", and click Add. Repeat for more sizes, such as "medium" and "large". Click Done.

2. In the left navigation, click NewPage. In the Property editor, set the following properties:

   1. Name—PizzaOrders
   2. DisplayName—Pizza Orders
   3. datasource—Orders

3. Open the Widgets palette and add a Form widget to the page.

   1. Leave the datasource as "Inherited:Orders".
   2. Select an Insert type form.
   3. Clear the Id checkbox on the Choose form fields page.

   The form is automatically populated with text fields that correspond to the fields in the datasource. In the next steps, you'll add widgets to replace some of these text fields. You won't delete the text fields yet, though, because they show you how the widgets connect to the datasource.

4. Add a Table widget next to the form. Keep all the defaults.

Add selection widgets

In this section, you'll set up the widgets that let users select the pizza size and toppings.

1. Create a dropdown list to select pizza size:

   1. Add a Dropdown widget to the Pizza Orders form below the Customer Email text field.
   2. In the Property editor, name the Dropdown widget "SizeSelector".
   3. Set the label to "Select size:".
   4. Click options. To bind the dropdown options to the possible values of the Size field, set options to @datasource.model.fields.Size.possibleValues.
   5. Click values and select Size. This setting binds the value to @datasource.item.Size. If you click the Size text field widget, you see that it has the same value. The value connects the widget to the datasource. When a user creates an order, the app adds a record to the data model with the Size field set to the value selected in the widget.
   6. Delete the Size text field widget.

2. Create a multi-select widget to select pizza toppings:

   1. Add a Multi select widget to the page below the Select size dropdown list.
   2. In the Property editor, name the multi select widget "ToppingsSelector".
   3. Set the label to "Select toppings:".

   4. Click options. In the bindings code editor, delete @datasource.text and enter ["basil", "eggplant", "garlic", "tomatoes"](or your other favorite toppings).

      Notice that you didn't bind options to possible values set for the Toppings field in the datasource. Possible values are used as data validators and matched exactly. For multi select widgets, to use this method you would enter each topping and all combinations of toppings. For example, "basil", "eggplant", "garlic", "tomatoes", "basil,eggplant", "basil,garlic", "basil,eggplant,garlic", and so on.

   5. Click values and set the binding to @datasource.item.Toppings#strToArray(). If you click the Toppings text field widget, you see that it has a similar value. Because the user can choose more than one topping in the multi-select widget, you use #strToArray() to convert the list that is in the widget into an array that is stored in the datasource.

   6. Delete the Toppings text field widget.

3. Close the Widget palette (click Close ).

4. Preview and test your app:

   1. Click Preview and allow the app to access data.
   2. In the Create Orders pane, order a pizza. When you click Submit, the pizza order is added to the table.
   3. Close the preview tab.

Set toppings options with data bindings

What if you have a menu that changes frequently? You don't want to edit the widget options and redeploy the app each time you add a topping option. In this section, you'll add a page to add toppings and a table to view them. You'll set up a data binding to automatically update the topping selector with new options.

1. Add a Cloud SQL model and name it "Toppings".
2. In the Fields tab, add a string-type field and name it "Topping".
3. Add a new page. In the Property Editor, make the following changes:
   1. Name the page "CreateToppings".
   2. Set the datasource to Toppings.
   3. In the Security section, click the Who can see this page menu and select Admins only. With this setting, your customers can't access the page and add more toppings. They'll be allowed to access only the PizzaOrders page.

4. Open Widgets palette and add a Form widget to the page.

   1. Leave the datasource as Inherited: Toppings.
   2. Select Insert form type.
   3. Clear the Id checkbox on the Choose form fields page.
   4. (Optional) Resize the widget to make it narrower.

5. Add a table next to the insert form. Keep the default values.

6. Go to the Create Orders page.

7. In the CreateOrders form, select the SelectToppings multi-select widget.

8. In the Property editor, click options. Delete the JavaScript array from earlier. Under Application, select datasources Toppings items projections Topping. The value is @datasources.Toppings.items..Topping. Now the widget options are the values in the Toppings data model.

9. Preview and test your app:

   1. Click Preview.
   2. Notice that on the PizzaOrders page, in the Create Orders pane, you don't have any toppings options. You must add some toppings to the Toppings database.
   3. Use the page selector to go to the CreateToppings page.
   4. Add toppings. They fill in the table as you add them.
   5. Use the page selector to go to the PizzaOrders page. Now the Create Orders pane shows all the toppings you just added.

Congratulations! You just created an app that uses several common ways to let users select options.

Next steps

1. Try to set up the pizza size options in the Create Order form with data bindings.

2. Try to set up the pizza size selector with the Radio group widget.

   Tip: To make the radio options show the Size field value instead of the Id field, go to your data model, click the Size field, and click Set as display field. Would you want to use the radio group to select toppings?

3. Study the Vendor ratings template app. The CompanyCreate page has a multi-select widget to select regions for the company. The regions are associated with the company record with a relation.