Overview

View events enable you to configure actions that run when certain events occur in the app, such as selecting a row in a table view or saving a form. These actions can replace the default app navigation behavior, which allows you to create custom navigation within your app.

You can also customize the input forms that enable users to input data via the app.

This lab teaches you how to use custom form layouts and view events to customize your app's behavior.

Objectives

In this lab, you learn how to:

• Connect actions to view events in the AppSheet editor.

• Test the behavior of your app when a view event is triggered.

• Customize the layout of input forms in your app.

• Implement conditional branching for form pages in your app.

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long lab resources will be made available to you.

This hands-on lab lets you do the lab activities in a real cloud environment, not in a simulation or demo environment. It gives you new, temporary credentials to sign in and access AppSheet for the duration of the lab.

What you need

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

• Time to complete the lab.

1. Make sure you sign in to the lab using an incognito window.

2. When ready, click .

   A new panel will appear with the temporary credentials that you must use for this lab.

   If you need to pay for the lab, a pop-up will open for you to select your payment method.

3. Note your lab credentials. You will use them to sign in to AppSheet for this lab.

   If you use other credentials, you will get errors or incur charges.

4. Click Open AppSheet to open the AppSheet UI in a separate browser tab or incognito window.

   Note: If you are not already using an incognito browser window, use the right mouse click in Chrome to open AppSheet and select Open link in incognito window.

5. Click to sign in with Google.

   

6. In the Sign in with Google dialog, enter the provided Username, and click Next.

   Note: If you see other accounts listed, click Use another account and then enter the provided Username and click Next.If you use other credentials, you'll get errors or incur charges.

7. Enter the provided Password and click Next.

8. Click Accept to accept the terms.

9. To enable AppSheet to access the Google Drive folders associated with your lab account, on the AppSheet consent page, click Allow.

   

10. You're now signed in to AppSheet.

    To view the AppSheet MyApps page, click X in the top-right corner of the Tell us about you so we can make better recommendations dialog.

    The MyApps page might be empty since you do not have any apps yet.

Task 1. Create the app

When working on your own or your company's app, you normally would incrementally build the app over a continuous project timeline.

Apps that you build are saved and accessible in the Recent section on the Apps page until they are deployed and published.

In this task, you create the app that was built in a previous lab, using a template.

Delete prototype app (if listed)

In the lab environment on some occasions it's possible that the app built in a previous lab is still listed in the Recent section. You cannot use this app to continue working on this lab since the underlying data is not available for use by the app.

The app must first be deleted before you continue with this lab.

1. If the Inventory Manager app is listed, on the 3-dots menu, click Delete.

2. To confirm the deletion, click Delete.

   

Copy a template app to your AppSheet account

To continue building the Inventory Manager app in this lab, you must first recreate the app from a template.

1. To copy the Inventory Manager app to your AppSheet account, click the link: Inventory Manager.

2. In the app preview, click Accept.

3. In the left navigation menu, click Copy app ().

4. In the Copy app form, for App name, type Inventory Manager, and leave the remaining settings as their defaults.

5. Click Copy app.

   AppSheet creates the app and copies the Google sheet that is used by the app to the /appsheet/data/InventoryManager-nnnnnnn folder under the My Drive folder on Google Drive.

6. To go to the AppSheet editor, click Customize your app.

   You can also access the app from the Apps page in the AppSheet UI under Owned by me.

Your app is set up with the original Google sheet, and you can now continue to build out the app's functionality.

Click Check my progress to verify the objective. Create the app

Task 2. Configure view events in your app

View events are connected to actions within the view configuration of supported view types.

In this task, you configure view events for some of the app's views with actions that are available in your app.

Configure the Row Selected view event

The Row Selected view event is triggered when a user selects an individual row in a Table, Deck or Gallery view in the app. An action configured for this event replaces the default app behavior of displaying the row details in a detail view.

1. In the AppSheet editor, in the left navigation bar, click App () > Views ().

2. Under Reference Views, click Receiving, this expands the Receiving view configuration.

3. In the view configuration, scroll down and expand the Behavior section.

4. Under Event Actions for Row Selected, select Edit.

   This connects the Edit system action to the Row Selected event for this view.

5. To save your changes to the app, click Save.

Test the Row Selected view event

1. To test the event, in the bottom navigation bar of the app preview, click Ship/Recv.

2. To view receiving transactions in the app, click the Receiving tab.

3. Click on any of the receiving transactions.

   The Row Selected event is triggered, which then invokes the Edit action, and the form view of this table is displayed in the app.

   The app user can now directly edit the row data without first viewing the row's details.

Configure the Form Saved view event

The Form Saved view event is triggered when a user saves a form while adding a new row or editing an existing row of a table in the app. An action for this event replaces the default navigation behavior.

Note: Unlike the Row Selected event action, if a Form Saved action is configured that doesn't cause navigation, the default app navigation behavior will still occur.

1. In the AppSheet editor, in the left navigation bar, click App () > Views ().

2. Scroll the list of views, and at the bottom, click System Generated.

3. Under System Generated, in the group of views of the Receiving table, click Receiving_Form. This form view is used to edit row data of the Receiving table.

4. In the form configuration, expand the Behavior section.

5. Under Event Actions for Form Saved, select View Ref (Product ID).

   This connects the View Ref system action to the Form Saved event for this view, so after a row is edited or added in the Receiving table, the referenced product detail view is displayed in the app.

6. Click Save.

Test the Form Saved view event

1. In the bottom navigation bar of the app preview, click Ship/Recv.

2. Click the Receiving tab.

3. Click on the receiving transaction for Cabinet Organizers.
   The Receiving Form view opens in the app.

4. Update the Quantity received value to 50, and click Save in the app.

   After the form is saved, the reference view action is triggered and the detail view of the selected product is then displayed in the app.

Click Check my progress to verify the objective. Configure the Form Saved event

Task 3. Customize input forms

You can customize the layout of a form and configure other form characteristics in the Settings > Views tab in the AppSheet editor.

AppSheet supports show column types, which are empty columns in your spreadsheet that serve the sole purpose of improving the presentation of forms in your app.

Create a multi-page form

To create a multi-page form in your app, use the Page_Header show column type.

1. In your browser tab, navigate to the Products sheet on Google Drive.

2. Insert three page break columns in the sheet in the following positions as shown:

   

   Column before	Page Break Column	Column after
   Product ID	Page 1	Product Name
   Tax	Page 2	Lead Time
   Current Inventory	Page 3	Min Shipment Qty

3. In the AppSheet UI, in the left navigation bar, click Data () > Products (), this expands the Products table column definition.

4. Click Regenerate schema ().

5. Click Regenerate to confirm.

6. To edit the Page 1 column definition, click on pencil icon for Page 1 in the column definition form, then specify the following, and leave the remaining settings as their defaults. After filling the form, click Done.

   Property	Value (type or select)
   Type	Show
   Category	Page_Header
   Content	Product Details

   Note: A Page_Header show column type is used to create a new page within a form.
   The Content property provides the name of the form page when the page is displayed in the app.

7. Repeat the steps above to configure the Page 2 and Page 3 columns similarly. If present, remove the Valid If condition for these columns, and then click Done.

   To remove Valid If condition, expand Data validity section and remove the Valid If condition. Then, click Save.

8. Click Save.

9. To verify your changes, in the bottom navigation bar of the app preview, click Products, and then click on any product to view its details.

10. To edit the product, click Edit ().

    The edit form now contains its fields spread over multiple pages in the app based on the location of the Page Header columns in the Products worksheet.

    You can traverse the form's pages with the Next and Prev buttons in the app's bottom navigation bar. To save any product updates, click Save on the last page in the form.

Customize the multi-page form layout

You can customize the layout of multi-page forms in your app.

1. In the AppSheet UI, in the left navigation bar click () Settings > Views.

2. Expand Views tab, and click View type options.

3. Scroll down to Forms, for Form page style, select Page Count.

   This page style is similar to the default Simple page style that you configured in the previous task.

   In this style, a circle is displayed on each page of the form to indicate the user's relative position in the form.

4. Click Save.

5. To edit a product in the app preview, select a product, and then click Edit () and verify the changes.

6. In the AppSheet editor, change the Form page style to Tabs, and then click Save.

7. Edit a product in the app preview. The pages of the product edit form are now displayed in multiple tabs in the app.

8. The display name of each tab in the form can be set individually. In the AppSheet UI, in the left navigation bar, click Data () > Products (), and edit the Page 2 column definition by clicking on pencil icon, and set its Content property to Inventory Details. Click Save and then, click Done.

9. Repeat the previous step to set the Page 3 column's Content property to Other.

10. Click Save.

11. Verify the tab names that are displayed in each page of the form in the app preview.

Use section headers

You can delineate fields in a form page with section headers.

1. In the AppSheet UI, to edit the definition of the Page 3 column, change its category to Section_Header.

2. Optionally, set the Content property to Shipping & Receiving and click Save. Then, click Done.

3. Click Save.

4. In the app preview, edit a product and click Next to open the _Inventory Details tab in the form.

   The form now contains a set of fields that are laid out in a separate section in the page.

AppSheet supports additional show column types: Text, URL, Image and Video. For more information about using these column types in your app, see the Customize input forms documentation.

Task 4. Implement conditional branching with forms

What if you want to display or skip a page of a form in the app, based on a certain condition? AppSheet makes this easy to implement with a Show_If expression.

Skip a form page based on a condition

In this task, you configure your app to disable the Inventory Details form page and its fields when the app user edits or adds a product from the Utility product category.

1. In the AppSheet UI, edit the Page 2 column definition:

   a. For the Show? column, click Filter (), and then click into the Show field to open the Expression Assistant.

   b. In the Expression Assistant, in the Show_If expression field, type:

   NOT([Product Category] = "Utility") Note: For products in the Utility category, this condition will return FALSE, and the form page will be disabled in the app.

   c. Click Save.

2. In the column definition form, click Done.

3. Click Save.

Test the condition

1. To test your changes in the app preview, in the bottom navigation bar, click Categories.

2. Click the Utility product category.

3. To view a list of the products in this category, click Category Products.

4. Click on any of the products in this category, for example, Extension Cords.

5. To update the product details, click Edit.

6. Verify that the Inventory Details tab in the form is disabled.

7. Click Cancel, and select any product from a different category.

8. Edit that product to verify that both the Product Details and Inventory Details tabs are enabled in the form.

Congratulations!

You have successfully used view events and customized input forms in your app.

In this lab you learned how to:

• Connect actions to view events using the AppSheet editor.
• Test the behavior of your app when a view event is triggered.
• Customize the layout of input forms in your app.
• Implement conditional branching for form pages in your app.

End your lab

When you have completed your lab, click End Lab. Qwiklabs removes the resources you’ve used and cleans the account for you.

You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.

The number of stars indicates the following:

• 1 star = Very dissatisfied
• 2 stars = Dissatisfied
• 3 stars = Neutral
• 4 stars = Satisfied
• 5 stars = Very satisfied

You can close the dialog box if you don't want to provide feedback.

For feedback, suggestions, or corrections, please use the Support tab.

Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.