# Implement the User Experience for your AppSheet App - GSP1029 ## Overview In this lab, you implement the user experience for your app using various UX components available in AppSheet. ### What you'll do In this lab, you learn to: * Modify a default table view to include additional data to display images in the app. * Update a view to use a different view type to display maps for address columns. * Create a map view and use it to map addresses in the app. * Create and use a form view to accept user input and save it to a sheet on Google drive. * Customize the look and feel of 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 are 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 does so by giving you new, temporary credentials that you use 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. **Note:** Use an Incognito or private browser window to run this lab. This avoids conflicts between your personal account and the student account. ### How to start your lab and sign in to Appsheet 1. When ready, click **Start Lab**. The Lab Details pane appears with the temporary credentials that you must use to sign in to Appsheet for this lab. If you need to pay for the lab, a dialog opens for you to select your payment method. **Note:** If you use other credentials, you will get **errors** or **incur charges**. 2. Click **Open AppSheet**. The lab spins up resources, and then opens another tab that shows the Sign in page. ***Tip:*** Arrange the tabs in separate windows, side-by-side. 3. Sign in with Google. 4. If necessary, copy the **Username** below and paste it into the **Sign in** dialog. ```apache student-01-5626a8f650ef@qwiklabs.net ``` Copied! 5. Click **Next**. 6. Copy the **Password** below and paste it into the **Welcome** dialog. ```apache nOtbXtiPoUFs ``` Copied! 7. Click **Next**. 8. Click **I Understand** to accept the terms. 9. Click **Continue** to accept Google AppSheet's policy and terms. 10. On the AppSheet consent page, click **Allow**. This allows AppSheet access to the Google Drive folders associated with your Google Cloud Skills Boost account. 11. You are now signed in to AppSheet. If necessary, close the **Tell us about you so we can make better recommendations** dialog to view the AppSheet MyApps page. The MyApps page is empty since you do not yet have any apps. ## 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 **Prototype Apps** section on the **My Apps** page until they are deployed and published. In this task, 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 its possible that the app built in a previous lab is still listed in the **Prototype Apps** 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 continuing with this lab. 1. If the *Customer Contacts* app is listed, click the 3-dots menu and select **Delete** to delete the app. 2. Click **Ok** to confirm the deletion. ### Copy a template app to your AppSheet account To continue building the *Customer Contacts* app in this lab, you must first recreate the app from a template. 1. Click the link to copy the *Customer Contacts* app to your AppSheet account: [Customer Contacts](https://www.appsheet.com/Template/AppDef?appName=Lab2-CustomerContacts-3856613) 2. In the left menu, click the **Copy app** icon. 3. On the **Copy App** form, for **App name**, type `Customer Contacts` and leave the remaining settings as their defaults. ![The Clone your App page, with a highlighted app name and Copy app button.](https://cdn.qwiklabs.com/n%2F%2BmZas4xCbUzeWZ5QwdNdi7ZRyvAC8%2FD6QcvAfUer0%3D align="left") 4. Click **Copy app**. 5. Click **Customize your app** to go to the AppSheet editor. Your app is set up with the original contacts and companies data sources, 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. Customize the contacts primary view In this task, customize the *contacts* view in the app by changing its layout, and some of its display options. ### View the list layout It would be nice to display a photo of a person in the contacts view of the app, for any contact that has a photo stored on file. 1. Click on **Switch to the legacy editor** icon in the top bar. 2. Navigate to the **UX > Views** tab in the AppSheet editor. 3. Under **Primary Views**, click on the `contacts` view to expand its configuration. The view type is set to **card**. 4. Expand **View Options** if not already expanded. 5. The sort order is by the *First Name* column in the contacts table. Scroll to the **Layout** section. The **list** option is selected by default. The layout controls how the different items on the card are laid out in the view. 6. Click **Title goes here**. The **Column to show** indicates the name of the column whose value is displayed as the *title* of the card. 7. In this case, verify that it is the *First Name* column from the *contacts* table. 8. Similarly, click **Subtitle goes here**. 9. Verify that the **Column to show** indicates the *Phone* column whose value is displayed as the *subtitle* on the card. ![Contacts view list layout, with the highlighted title and subtitle.](https://cdn.qwiklabs.com/qT5YeZU4TgDIFv4zWiZwLsGTn8R%2BHEgIlUbp3ueuQG0%3D align="left") 10. Click the airplane icon to set the photo column. ![The selected list option and highlighted photo field.](https://cdn.qwiklabs.com/OZzSR4prbETZphXRme8ZP2Rj7rpjWbsTKzwqjfgJQKs%3D align="left") Notice that AppSheet could not identify a column in the *contacts* table that contains image data. This is because the Google sheet used by the table does not contain such a column. ### Use a photo column in the list layout 1. Add a column to the *contacts* Google sheet to store the photo of a contact. To do this, navigate to the **Data > Tables** tab in the AppSheet editor. 2. Click `contacts` to expand the table configuration. 3. Click **View Source**. ![The Tables tabbed page, with the Data category selected and the contacts field and View Source button.](https://cdn.qwiklabs.com/zF2RxqeG2i9OZ5Ie7FLquPEV53oZlnqr12d7IZ9HQ0Y%3D align="left") AppSheet opens the data source, the *contacts* Google sheet in a separate window or tab in the browser. 4. Add the new column header: **Photo** in column H of the *contacts* sheet. ![The Contacts sheet, with the highlighted Photo column title.](https://cdn.qwiklabs.com/u%2FJchtkOMd5Gp0JSnZk7WxlqHgyjKl%2F2G1083DbG6uw%3D align="left") This column will contain a publicly accessible URL to the photo image of the contact person. **Note:** This column can also contain a folder path and name of a file on Google drive that contains the image. The file must be located in the same or relative path location as the spreadsheet and must be publicly accessible. 5. Switch to the AppSheet editor in the other browser tab and navigate to the **Data > Columns** tab. 6. Expand the *contacts* table column configuration. 7. Since the *photo* column was added to the Google sheet, you need to let AppSheet know of the new column structure of the *contacts* table. 8. Click **Regenerate Structure**. 9. Click **Regenerate** to confirm. AppSheet automatically infers the correct column type of *Image* for the new *photo* column. ### Store the image data You now have a place to store image URLs or image filenames in the table that is used by your app. In this step, provide the app with access to the image files using publicly hosted URLs. 1. Open this link in a separate browser tab: [Photos](https://docs.google.com/spreadsheets/d/1eBLeNWgMgBGhmtYBQXOUD68tzGWRfX7tDiCVWgQCzrs/edit?usp=sharing) . 2. Copy the image URLs from the *Photo* column in the *Photos* sheet opened in the previous step and paste them in the corresponding rows with the matching **ID** values in the *contacts* sheet. ![The contacts spreadsheet with six rows of data.](https://cdn.qwiklabs.com/vR71cQm48OiuLpj%2BnoeouclH9YAtjBULvSiAbeYSuaQ%3D align="left") **Note:** In the lab environment not all the contacts will have photo image urls and some images may be duplicated. 3. Update the **Photo** column with the URLs to the images. ### Update the *contacts* list layout to use the photo column 1. Navigate back to the **UX > Views** tab and scroll to the **Layout** section of the *contacts* view configuration. 2. With the **list** layout selected, click the airplane icon. 3. For **Column to show**, select **Photo** from the drop-down list. 4. For **Image shape**, select the circle icon. 5. Click **Save** to save your changes to the app configuration. AppSheet updates the app in the live preview to show the photos of the contacts whose images were updated in the Google sheet. ![List layout using photo column, with a highlighted Sync icon.](https://cdn.qwiklabs.com/HUzZSdi9BptjszmQBPHeoGrs0O8NEnAzmsTsaDAC0bY%3D align="left") 6. If the live app preview does not update automatically, you may need to sync the app by clicking on the sync icon. Click *Check my progress* to verify the objective. Customize the contacts primary view ## Task 3. Customize the companies primary view In this task, customize the *companies* view to use a different view type and layout. ### Change the *companies* view type and layout 1. In the AppSheet editor, navigate to **UX > Views** and select the `companies` primary view to expand its configuration. 2. Change the **View type** to **card** by selecting it. 3. Scroll to the **Layout** section under **View Options**, and select **photo**. 4. Select the small airplane icon. For **Column to show**, select **Business Address**. 5. Select the large airplane icon. For **Column to show**, select **Business Address**. 6. Click **Save**. The app now displays a map of the business address location for each company. ### Change the *companies* view icon 1. In the same form, scroll down and expand the **Display** options. 2. In the **Icon** search box, type `company`, and select any of the icons from the icons search results list. ![Three icons populated as the search result.](https://cdn.qwiklabs.com/Enem%2BakEbZYefuykFXskWFetQlvv35jpajV9awkqg4A%3D align="left") 3. Click **Save**. 4. The *companies* view icon in the app's bottom navigation bar now displays the new icon. ![The selected companies icon.](https://cdn.qwiklabs.com/1o5Hv8g7Ple2xZHDMHzAlzljMXKxGMYrvS3C1OhD3gk%3D align="left") ## Task 4. Using the Map view The map view is a great way to display locations within your app. Depending on your needs you can display location data, drop pins, or provide directions with your app. Location data points can come from addresses, XY (coordinates of a point) or LatLong (GPS) information. You can also use either Google maps to display your mapped locations using addresses and LatLong information, or a custom image to map XY points. In this task, use a Map view to display the business address location of companies on a map in the app. ### Create a Map view 1. Navigate to **UX > Views** in the AppSheet editor. 2. To add a new view in the *Customer contacts* app, click **New View** > **Create a new view**. ![The Views tabbed page, with the highlighted New View button.](https://cdn.qwiklabs.com/0UgWx6TKPeuac113pqrFJ2ktaubarip3v92DbsgY4Ew%3D align="left") 3. In the **New View** form, specify the following, and leave the remaining settings as their defaults:

Property

Value (type or select)

View name

Business Addresses

For this data

companies

View type

map

Position

menu

View options > Map column

Business Address

This view will map data from the *Business Addresses* column in the *companies* table. The user will be able to access this view from the app's main menu. 4. In the same form, expand the **Display** options. 5. In the **Icon** search box, type `map`, and select any of the *map* icons from the list. 6. For **Display name**, type `Map Business Addresses`. This will be the name displayed for this item in the main menu. ![A highlighted map icon in the search result, and Map Business Address in the Display name field.](https://cdn.qwiklabs.com/xYsGbjmlM%2FYQvTzb%2FITiFh0iqcLtgkpoBaJXvukKsig%3D align="left") 7. Click **Save** to save the new view. ### Preview the map view 1. To test and preview the new map view, in the live app preview click the app's main menu icon to display the menu. 2. Verify that the **Map Business Addresses** menu item is included on the main menu. 3. Select the **Map Business Addresses** menu item from the main menu to map all the business addresses from the *companies* table. 4. Select any of the pinned locations in the map. AppSheet automatically displays details about the *company* at that location. ## Task 5. Using forms in your app Apps usually need input from the user at some point as the user interacts with the app. To collect user input, AppSheet supports the **Form** view type. In this task, use a form view in the app to enable the user to enter product information in order to ship products to a company. ### Add the shipTo data source to your app The form view must have a place to store the user entered data from the app. Before you create the view, you must create or use a table to store this information. 1. To add a table to your app, navigate to **Data > Tables** in the AppSheet editor, and click **New Table**. 2. In **Add data** form, select **Google sheets**. 3. In the file picker, select the `shipTo` Google sheet from your drive folder and click **Select**. This sheet was automatically provisioned for the lab. 4. In the **ShipTo** dialog, click **Add 1 table**. AppSheet adds the table to your app. You can now create and use views for this table in the app. ### View and update the shipTo table column structure 1. In the AppSheet editor, navigate to **Data > Tables** and expand the **shipTo** table configuration. 2. Click **View Columns**. AppSheet has automatically inferred the types of the columns from the sheet.

Column

Type

Description

ID

Text

Unique ID of the table

Product Name

Name

Name of the product being shipped

Quantity

Number

Number of units of the product being shipped

Date

Date

Current date of the request

Status

Text

Status of the request

Company

Number

ID of the company to which the product is being shipped

3. In the column structure for the **ID** column scroll the properties and deselect the **Show?** and **Search?** properties. The **ID** column was selected as the **key** for the table and is automatically populated with system generated unique values using the `UNIQUEID()` expression in the **INITIAL VALUE** property. As this column contains random system generated values, it can be hidden and made unsearchable for the app user. Learn more about using keys in [AppSheet](https://help.appsheet.com/en/articles/1023086-what-is-a-key). 4. Click the pencil icon to the left of the **Company** column to open the column property edit form. 5. The **Company** column refers to the company to which items are being shipped, so its type should be set to **Ref**. 6. In this form specify the following, and leave the remaining settings as their defaults:

Property

Value
(type or select)

Type

Ref

Source table

companies

7. Click **Done** to close the column property edit form. 8. The **Status** column should be populated from a fixed set of values and not contain free text entered by the user. To change the type of the **Status** column, click the pencil icon to the left of the column. 9. In the column edit dialog, change the type to **Enum**. 10. Under **Type Details**, for **Values**, click **Add** and type **New**. 11. Repeat the previous step to add additional *Status* values: **Cancel**, **Hold**. ![The aforementioned status values listed in the Values category.](https://cdn.qwiklabs.com/EfC5whgGIWY%2Ba7zId0cP9rHc8FQRl0Cn60%2F40ExALUs%3D align="left") 12. Click **Done**. 13. Click **Save** to save your changes. ### Add a virtual column to the shipTo table It would be nice to also include a company's shipping information whenever the **shipTo** form is displayed in the app. Note that the **Shipping Information** column in the `companies` table already stores this information. You can use a virtual column in the **shipTo** table to implement this capability. A virtual column is not an actual column in the underlying sheet. Instead, it is automatically computed via an app formula expression. 1. In the **shipTo** table's columns configuration, click **Add Virtual Column**. ![The Add virtual column button highlighted in the UI.](https://cdn.qwiklabs.com/EmDOO1mXBTmAiCx2uB1kJpou%2B%2B%2F2weccBnG3hvt89hA%3D align="left") 2. In the **New Virtual Column** dialog, for **Column name**, type `Shipping Info`. 3. Click in the **App formula** box to open the **Expression Assistant**. 4. In the **Expression Assistant** dialog, for **App Formula for column Shipping Info**, type `[Company].[Shipping Information]`. ![The Expression Assistant page with [Company].[Shipping Information] as the app formula.](https://cdn.qwiklabs.com/9q6st1D7X7uKGdTC20Bijfz7NUZrncxVJjMGGn5JB0k%3D align="left") **Note:** Enter the expression as shown above, including the period (.) between the two column names. The expression evaluates to the value of the **Shipping Information** column of the row in the *companies* table that is referenced by the company ID value in the **Company** column in the *shipTo* table. 5. Click **Save** in the **Expression Assistant**. 6. Click **Done** in the **New Virtual Column** dialog. 7. Click **Save** to save the configuration changes. The virtual **Shipping Info** column will now automatically be used in the form view that you will create in the next task. ### Create the shipTo form view 1. To create the **shipTo** form view, navigate to **UX > Views** in the AppSheet editor, and click **Add Histogram View for shipTo**. ![The Views tabbed page with the highlighted Add Histogram View button.](https://cdn.qwiklabs.com/tS0UJGpp2S4p%2BHAgiZTVZJr8%2FEsV3Tp4fxeKnXfWkMc%3D align="left") **Note:** If this form view button is not available, click **New View** to add the form view and click **Add histogram for shipTo data**. 2. In the **New View** form specify the following, and leave the remaining settings as their defaults:

Property

Value (type or select)

View name

ShipTo

For this data

shipTo

View type

form

Position

next

3. Under **View Options**, for **Form style**, select **Side-by-side**. This style lays out the input fields with their labels alongside the field's UI component. 4. Under **View Options**, for **Finish view**, select **shipTo\_Detail**. This sets the view that the app will display after the user submits this form. 5. Scroll the form and expand the **Display** section. 6. For **Icon**, type `ship` in the search box. 7. Select any one of the appropriate icons. This icon will be displayed in the center position of the app's bottom navigation bar. ![A highlighted icon within the search results for "ship".](https://cdn.qwiklabs.com/jTHti%2Bbz2BaSFdJYkvjXpFAEmO1qcmdy6%2B6Q7Hd5v9Y%3D align="left") 8. Click **Save** to save your changes in the AppSheet editor. ### Test the ShipTo form Follow the steps below to preview and test the new form. 1. If the live app preview is currently displaying the **ShipTo** form, click **Cancel** in the app's bottom navigation bar. You will test the user experience starting from the initial view in the app. Make a note of the new **ShipTo** view icon on the app's bottom navigation bar. 1. Click **companies** in the app's bottom navigation bar. 2. Click the **ShipTo** icon to open the form. 3. In the form specify the following, and leave the remaining settings as their defaults:

Property

Value
(type or select)

Product Name

Widget 1

Quantity

2

Status

New

Company

Any company from the list

Notice that the app automatically displays the *Shipping Info* based on the selected *company*. 4. Click **Save** to submit the form and save the new shipping entry to the *shipTo* table. ### Verify the entry in the Google sheet 1. As a final verification step, switch to your browser tab to view the *shipTo* Google sheet on drive. 2. Verify that the new shipping entry has been added to the sheet. Click *Check my progress* to verify the objective. Using forms in your app ## Task 6. Customize the look and feel of your app In the final task of this lab, you customize your app's look and feel by implementing a few branding changes. ### Change theme and color 1. To change the app's theme and color, navigate to the **UX > Brand** in the AppSheet editor. 2. For theme, switch between the **light** and **dark** themes by clicking on each theme. 3. Select one of the themes that best suits your preference. 4. You can change the primary colors used for text, buttons and icons in the app by selecting one of the colors from the list of colors available, or create a custom color of your choice. Select any one of the colors to customize the look of your app. ### Change logo and images 1. To change the app's logo, select one from the list. 2. To change the launch image of the app, select one from the list. 3. To change the background image of the app, select one from the list. **Note:** For the app's logo and images, you can also provide custom logos and images by hosting them on your cloud providers file storage service and providing the path to the files. ### Customize header and footer You can choose to display the app's logo and view names in the app's header, hide the app's menu and search buttons, and change the color style of the header and footer. 1. Click **Show view name in header** to enable this feature. 2. Click **Show logo in header** to enable this feature. 3. For style, select the full color style option. ![The selected branding options](https://cdn.qwiklabs.com/wTQ9hFsyXz7XKWdJsoZyKVShjoKkOSjZztY3hMdo4U4%3D align="left") 4. Click **Save** to save your changes. 5. Preview your branding changes in the live app preview. --- ## Solution of Lab %[https://youtu.be/T41FcRpuqKc] **Steps to Copy and Set Up the App** 1. **Copy the App to Your Account** * Click the following link to copy the **Customer Contacts** app to your AppSheet account: * [**Customer Contacts**](https://www.appsheet.com/Template/AppDef?appName=Lab2-CustomerContacts-3856613) * In the left menu, click the **Copy app** icon. 2. **Copy the App Form** * In the **Copy App** form: * For **App name**, type: `Customer Contacts`. * Leave the remaining settings as their defaults. * Click **Copy app**. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1756016420074/2a089b8c-fa38-4489-97fa-86c856dd615c.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1756016425461/3fa4bf59-0d7d-42d0-a95b-9646cb56f2e1.png align="center")
💡
Important: Now, Check the Score For Task 1
**Steps for the remaining task** **Copy the App to Your Account** * Click the following link to copy the **Customer Contacts** app to your AppSheet account: * [**Customer Contacts**](https://www.appsheet.com/Template/AppDef?appName=CustomerContacts-939262569&utm_source=share_app_link) * In the left menu, click the **Copy app** icon. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1756016626564/2d034ba1-3e83-4152-9f8d-e6b09543e0f9.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1756016735648/479f19cf-6d7e-44c3-a716-7f15c3da2b0d.png align="center")
💡
Important: Now Check The Score.