読み込んでいます...
一致する結果は見つかりませんでした。

Google Cloud Skills Boost

Google Cloud コンソールでスキルを試す

02

Building No-Code Apps with AppSheet: Implementation

700 以上のラボとコースにアクセス

Adding Actions to an App in AppSheet

ラボ 1時間 universal_currency_alt 無料 show_chart 入門
info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。
700 以上のラボとコースにアクセス

Overview

AppSheet actions are used to control app behavior and to manage user interaction with your app. Actions are operations that change the state of your app, and are frequently represented as buttons throughout the app.

AppSheet supports the following categories of actions:

  • App navigation actions
  • Data change actions
  • External communication actions
  • Composition actions

Objectives

In this lab, you learn how to perform the following tasks:

  • Create and use various types of actions in your app.
  • Test the action and verify the end result in the worksheets used by the 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.

    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. Add navigation actions to your app

In this task, you create and use some types of actions that enable user navigation in your app. Note that AppSheet automatically creates system actions for your app.

Create an action to copy and edit a row of data

This action type enables the app user to create a copy of the current data row in the table that is being used in the app and opens the copy in a form view.

  1. In the AppSheet UI, in the left navigation bar, click Actions ().

  2. To create a new action, click Add Action (+).

  3. Click Create a new action.

  4. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    Copy Shipment

    For a record of this table

    Shipping

    Do this

    App: copy this row and edit the copy

  5. For Position, select Display as primary.

  6. Expand the Display section.

  7. For Action icon, type inventory in the search field, and then select an appropriate action icon.

    This setting displays the action icon in a stack along with other action icons in the bottom right corner of the app's view.

  8. Expand the Behavior section.

  9. To set this condition in the Expression Assistant, click into the Only if this condition is true field.
    This action should only be available if the product's current inventory is greater than zero.

  10. In the expression field of the assistant, delete the default true value and type:

    [Product ID].[Current Inventory] > 0 Note: This is known as a dereference expression where a column (Product ID) of type Ref in the current table (Shipping) is used to refer to a specific row in the referenced table (Products), and a column's value (Current Inventory) from that table is retrieved.
  11. In the Expression Assistant, click Save.

  12. To prompt the app user for confirmation before the action is applied, enable Needs confirmation.

  13. For Confirmation Message, type: Copy shipment?

  14. Click Save.

Test the Copy Shipment action

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

  2. To view shipping transactions in the app, click the Shipping tab.

  3. Click on one of the shipping transactions to view its details.

  4. Click the Copy Shipment action, and then click Copy Shipment to confirm. The action executes and opens the Shipping_Detail form view with a copy of the shipping transaction data.

  5. Update the Date Sold and the Quantity column values, and then click Save.

    Note: For Date Sold, type today's date in the dd/mm/yyyy format.
  6. After the data update is synced to the backend, to return to the shipping transactions list view, click Back () in the app preview twice.

  7. Verify that the entry with today's date is listed in the view.

  8. Navigate to the Shipping worksheet on the other browser tab and verify that the new shipping transaction has been created.

Note: To view the Shipping worksheet, open your drive and then open the Product Google sheet. Here you can select the Shiiping tab from the bottom section.

Create an action for view navigation

This action type enables the app user to navigate from one view to another in the app.

In this task, you create an action to enable the app user to navigate directly from the detail Product Category view to the Products list view for a given category.

  1. To create a new action, in the Actions tab of the AppSheet UI, click Add Action (+).

  2. Click Create a new action.

  3. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    List Category Products

    For a record of this table

    Product Categories

    Do this

    App: go to another view within this app

  4. To open the Expression Assistant, click into the Target field.

  5. In the expression field, type:

    LINKTOFILTEREDVIEW("Products", ([Product Category] = [_THISROW].[Category])) Note: The LINKTOFILTEREDVIEW is an AppSheet function that generates a deep link to a view. This expression generates a link to the Products view that includes only those rows with a Product Category column value that matches the Category column value of the current row in the Product Categories table.
  6. In the Expression Assistant, click Save.

  7. For Position, select Prominent.

  8. Expand the Display section.

  9. For Display name, type Category Products

  10. For Action icon, type box in the search field, and then select an appropriate action icon.

    This setting displays the action icon just below the data image and above the data values in the app's detail view.

  11. Expand the Behavior section in the form and verify that the Only if this condition is true field contains true, which is the default.

  12. If the condition is not set, click into the field and enter true in the Expression Assistant's expression field. This is done to make sure that this action is always available.

  13. Click Save.

Test the List Category Products action

  1. In the bottom navigation bar of the app preview, click Categories.

  2. Click on any of the product categories in the app.

  3. Click on the Category Products action.

  4. In the Products view, verify that the view contains only those products that belong to the selected category.

Task 3. Add data change actions to your app

In this task, you create and use some types of actions that change the data used by your app.

Create an action to add a new row to another table

With this action and the values from the current row of a table, you can quickly add a row of data to another table in your app.

  1. To add a new Supplier Orders table to your app, in the left navigation bar, click Data ().

  2. Click Add new data (+).

  3. Select Google Sheet.

  4. Under My Drive, navigate to appsheet > data > Inventory Manager.

  5. Select the Products sheet.

  6. Check the box for Supplier Orders.

  7. Click Add 1 Table.

  8. In the AppSheet UI, in the left navigation bar, click Actions ().

  9. To create a new action, click Add Action (+).

  10. Click Create a new action.

  11. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    New Supplier Order

    For a record of this table

    Products

    Do this

    Data: add a new row to another table using values from this row

    Table to add to

    Supplier Orders

    Set these columns

    Product

    [Product ID]

    Order Date

    TODAY()

    Quantity

    [Min Shipment Qty]*10

    Supplier

    [Supplier ID]

    Status

    Pending

    Note: The Set these columns field uses column expressions with square brackets [] to set their values in the new row in the Supplier Orders table.
  12. For Position, select Prominent.

  13. In the Display section, for Action icon, browse the icon list and select an appropriate action icon.

  14. If required, set the condition in the Behavior section to true as described in the previous task. This should already be set by default.

  15. To prompt the app user for confirmation before the action is applied, enable Needs confirmation.

  16. For Confirmation Message, type Create supplier order?

  17. Click Save.

Test the New Supplier Order action

  1. In the bottom navigation bar of the app preview, click Products.

  2. Click on any of the products in the app.

  3. Click on the New Supplier Order action.

  4. Click New Supplier Order to confirm.

  5. After the app syncs the data to the backend, to verify that the new order was created, navigate to the Supplier Orders worksheet on the other browser tab.

Create a new supplier order

Execute another action on a set of table rows

In AppSheet, you can create an action for a row of a table that executes another action on a set of related rows in another table.

In this task, you create an action that will delete supplier orders with a status of Pending from the Supplier Orders table for a product in the Products table.

  1. In the AppSheet UI, in the left navigation bar, click Actions ().

  2. To create a new action, click Add Action (+).

  3. Click Create a new action.

  4. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    Remove Pending Supplier Orders

    For a record of this table

    Products

    Do this

    Data: execute an action on a set of rows

    Referenced Table

    Supplier Orders

    Referenced Rows

    FILTER(Supplier Orders, AND(([Product] = [_THISROW].[Product ID]), ([Status]="Pending")))

    Referenced Action

    Delete

    Note: For Referenced Rows, use the Expression Assistant to type the expression.This expression uses the AppSheet FILTER function to fetch rows from the Supplier Orders table with a status of Pending and whose Product column value matches the Product ID of the current row in the Products table. Note: For Referenced Action, select the system Delete action. You can also use your own delete action with the Data: delete this row action type.
  5. For Position, select Prominent.

  6. In the Display section, for Action icon, type remove in the search field, and then select an appropriate action icon.

  7. In the Behavior section, set the condition to true as described in the previous task. This should already be set by default.

  8. To prompt the app user for confirmation before the action is applied, enable Needs confirmation.

  9. For Confirmation Message, type Remove pending supplier orders?

  10. Click Save.

Test the Remove Pending Supplier Orders action

  1. In the bottom navigation bar of the app preview, click Products.

  2. Click on the Drawer Organizers product in the app. This product has two pending supplier orders in the Supplier Orders worksheet. You can also choose any other product with pending supplier orders.

  3. Click on the Remove Pending Supplier Orders action.

  4. To confirm, click Remove pending supplier orders.

  5. To confirm the system Delete action, click Delete.

  6. After the app syncs the data to the backend, to verify that the pending supplier orders for the selected product have been deleted, navigate to the Supplier Orders worksheet on the other browser tab.

Remove pending supplier orders

Update the columns of a table in a given row

You can use an action to update the value of one or more columns in the current row of a table.

In this task, you create an action to set the value of the Supplier ID column in the Products table to an empty string.

  1. In the AppSheet UI, in the left navigation bar, click Actions ().

  2. To create a new action, click Add Action (+).

  3. Click Create a new action.

  4. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    Remove Supplier ID

    For a record of this table

    Products

    Do this

    Data: set the values of some columns in this row

    Set these columns

    Supplier ID

    ""

    Note: The Set these columns field sets the Supplier column in the Products table for the current product to an empty string to discontinue supplies of this product from the current supplier.
  5. For Position, select Hide.

    Note: This action will not be directly invoked by the app user so you do not need to display the action in the app.

    In a later task in this lab you will create another action that invokes this action.
  6. In the Behavior section, set the condition to true as described in the previous task. This should already be set by default.

  7. Click Save.

Task 4. Add external communication actions to your app

External communication actions enable the user of your app to access external services like website URLs and cloud system files and to initiate a phone call, text message, or email from your app.

In this task, you create an action to access a website URL from the app.

Create an action to go to a website

  1. In the AppSheet UI, in the left navigation bar, click Actions ().

  2. To create a new action, click Add Action (+).

  3. Click Create a new action.

  4. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    Web Search

    For a record of this table

    Products

    Do this

    External: go to a website

    Target

    CONCATENATE("http://google.com?q=", [Product Name])

    Note: For Target, use the Expression Assistant to type the expression.

    This expression constructs a dynamic URL using the value from the Product Name column of the current row in the Products table.

  5. To open the website in a separate browser window or tab, enable Launch External.

  6. For Position, select Prominent.

  7. Expand the Display section in the form.

  8. For Action icon, type world in the search field, and then select an appropriate action icon.

  9. Click Save.

Test the Web Search action

  1. To test the action, in the bottom navigation bar of the app preview, click Products.

  2. Click on any product to view its details.

  3. In the product details view, click the Web Search action.
    The action executes and opens the Google search page with the product name in the search bar on the page.

Task 5. Add grouped actions to your app

You can use grouped or composite actions in your app to group together existing actions that are then executed in sequence.

Create an action to discontinue a product's supplier

  1. In the AppSheet UI, in the left navigation bar, click Actions ().

  2. To create a new action, click Add Action (+).

  3. Click Create a new action.

  4. In the New Action form, specify the following:

    Property

    Value

    (type or select)

    Action name

    Discontinue Supplier

    For a record of this table

    Products

    Do this

    Grouped: execute a sequence of actions

  5. For Actions, click Add, and then select the Remove Pending Supplier Orders action.

  6. Click Add again, and then select the Remove Supplier ID action.

  7. For Position, select Prominent.

  8. Expand the Display section in the form.

  9. For Action icon, type remove in the search field, and then select an appropriate action icon.

  10. In the Behavior section, set the condition to true as described in the previous task. This should already be set by default.

  11. To prompt the app user for confirmation before the action is applied, enable Needs confirmation.

  12. For Confirmation Message, type Discontinue supplier?

  13. Click Save.

Test the Discontinue Suppliers action

  1. In the bottom navigation bar of the app preview, click Products, and then click the Spice Rack product to view its details.

  2. In the product details view, click the New Supplier Order action.

  3. To create a new Pending supplier order, click New Supplier Order.

  4. Repeat the previous step to create another Pending supplier order for the same product.

  5. After the app syncs the data to the backend, to verify that the pending supplier orders for the selected product have been created, navigate to the Supplier Orders worksheet on the other browser tab.

  6. For the same product, click the Discontinue Supplier action.

  7. To confirm, click Discontinue Supplier.

  8. To confirm, click Remove Pending Supplier Orders.

  9. To confirm the Delete action, click Delete again.

  10. After the app syncs the data to the backend, to verify that the pending supplier orders for the Spice Rack product have been deleted, navigate to the Supplier Orders worksheet on the other browser tab. Also, verify that the Supplier ID in the Products worksheet has been removed for the same product.

For more information about AppSheet actions, see the Actions: The Essentials documentation.

Discontinue supplier

Congratulations!

To add functionality to your app, you have successfully used some of the different types of actions that are supported in AppSheet.

In this lab you learned how to:

  • Create and use app navigation actions in your app.
  • Create and use data change actions in your app.
  • Create and use an action for external communication.
  • Create and use a composite action to group other existing actions in your app.
  • Test the actions and verify the end result in the underlying worksheets used by the 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.

前へ 次へ

Sorry, access denied to this resource.

close

始める前に

  1. ラボでは、Google Cloud プロジェクトとリソースを一定の時間利用します
  2. ラボには時間制限があり、一時停止機能はありません。ラボを終了した場合は、最初からやり直す必要があります。
  3. 画面左上の [ラボを開始] をクリックして開始します

このコンテンツは現在ご利用いただけません

利用可能になりましたら、メールでお知らせいたします

ありがとうございます。

利用可能になりましたら、メールでご連絡いたします

1 回に 1 つのラボ

既存のラボをすべて終了して、このラボを開始することを確認してください

シークレット ブラウジングを使用してラボを実行する

このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウントの競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。
プレビュー