Loading...
No results found.

    Building No-Code Apps with AppSheet: Implementation

    Get access to 700+ labs and courses

    Adding Actions to an App in AppSheet

    Lab 1 hour universal_currency_alt No cost show_chart Introductory
    info This lab may incorporate AI tools to support your learning.
    Get access to 700+ labs and courses

    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.

    Previous Next

    Before you begin

    1. Labs create a Google Cloud project and resources for a fixed time
    2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
    3. On the top left of your screen, click Start lab to begin

    This content is not currently available

    We will notify you via email when it becomes available

    Great!

    We will contact you via email if it becomes available

    One lab at a time

    Confirm to end all existing labs and start this one

    Use private browsing to run the lab

    Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.
    Preview