Create a Mobile Web App from your Google Sheet with AppSheet

 At the office, you may have a colleague who sells packed lunches. He lists the menu in a Google Sheet, and uses the same spreadsheet for collecting/tracking orders from co-workers. He could improve on this by creating a food order form via Google Forms and directing form submissions to the spreadsheet. 

Nowadays he has an additional option to improve on this by way of AppSheet. He could quickly and effortlessly create a mobile web app based on his spreadsheet. Order submissions are done in the app, and the orders are immediately added into the spreadsheet. 

Previously, I showed you how to create a mobile web app using Glide. Today, let's look at a pure Google solution to low-code/no-code, spreadsheet-backed, mobile web app creation. In this example, we will create a sort of DIY "link tree" via AppSheet.

Step 1: Create a spreadsheet

Create a spreadsheet with 3 columns: Title, Link, Icon. Give the sheet an appropriate name -- replace the default "Sheet1" with "Links". Put any title under Title (e.g. GitHub, LinkedIn, website, etc), put the corresponding profile link under Link, and put an image URL under the Icon column.

Step 2: Import into AppSheet

A shortcut to AppSheet can be found in the Tools menu. Select Tools -> AppSheet -> Create an app.

Step 3: Customize the UI

On the left panel, select UX. Then in the middle area, under Primary Views, open "Links". Scroll down to the Layout section, where you will see the different parts of an item widget. When you click on an element inside the component, you will be able to map that element to a specific column in the spreadsheet. Let's map the title element to Title, and the subtitle element to Link.

You will immediately see the result in the preview panel on the right. From there, it should be apparent that there's a problem with the icons -- our app isn't recognizing the image URLs in the Icon column. We'll fix this next.

Step 4: Customize the data

Data customization in AppSheet is more complicated than in Glide, but it is also more powerful and flexible.

To fix our icon display, go to the Data view (from the left panel). Under Tables tab, open Links, then open "View Columns". The columns should be listed here. 

First make sure that Title is selected as the KEY. Then for the Icon column, change the Type to Image. 

Go back to the UX section, then go back to the card Layout section, select the image element, and map it to the Icon column. Save the changes by clicking the Save button at the upper right, and the changes should reflect right away. From here you can make further customizations to the icon, like changing the shape to circular.

Further overall theme customizations can be done by going to the Brand tab and making changes to theme, colors, logo, etc.

Step 5: Some customizations for public, read-only "link tree"

Typical applications can make use of built-in functionality that allow creating, updating & deleting data. Since we're creating a link tree type of application, we want our users to only view the data and not be able to make modifications. Here are a few things we need to do:

First, disable Add/Update/Delete. On the left panel, go to Data again. Under Tables tab, select Links, then under "Are updates allowed?", select Read-Only.

Second, you need to disable user access control, since our app should be viewable by the public. On the left panel, go to Security.

Under Require Sign-In tab, turn off "Require user signin?". Then you will also need to turn on the next two options, namely:

- "Yes, the data in this app is public"

- "Yes, I am authorized to set up an insecure app"

Just a reminder that we're only doing this because our app is read-only, and is intended for public viewing. For other use cases, it's a good idea to limit access to a set of users.

Finally, we need to disable the app usage consent confirmation dialog. Still under Security view, go to the Options tab. Scroll down until you find "Require user consent", then turn it off.

Step 6: Publish and share

Save all changes. Then open the app in a new tab. You can copy the URL in the address bar, and share it with your colleagues.

Other things you can do: You can use a URL shortener to make the app URL more user-friendly when you share it. You can also embed your app to your website via an iframe. My Interact page is actually an AppSheet app that is embedded in an iframe. This iframe embedding is unique to AppSheet -- this won't work with Glide apps.

Next steps

Be creative. What kind of app will you create with this tool?