AppSheet Training Guide | Define the User Experience
Review
Last week we learned best practices for connecting data to AppSheet using three simple steps:
- From Google Sheets: Navigate to Tools → AppSheet → Create an App
- From AppSheet: Add all data tables by navigating to the Data Tab → Tables → Add New Table
- From AppSheet: Navigate to the Data Tab → Columns → configure the column types for each column.
Guide
Build out Views
In last week’s blog post we introduced the App Development process. To continue to build upon the Content Planning App, we will be creating an app with the following views: Form, Calendar, and Card.
Let’s dive deeper into what these views are and why they are chosen for the Content Planning App.
Form Views are great for having users input specific data into your app so that they are inputting the correct information each time they are interacting with the app. If you have built out elaborate Google Sheets with macros and other complicated formulas, Form Views in AppSheet will be a great fit for your use case. You will be surprised about how well these form views can help with data validity and data entry for your app users.
For my use case in our Content Planning App, I created a form view for creating a new calendar event.
Check it out below:
With this Form view Users know exactly what they need to input for each field. This is the first step to a guided user experience for your app builds. We will look at polishing up this Form view in our next section.
Another view type I use in this Content Planning App is the Calendar view type. The Calendar view is great for displaying information in a calendar format. We will even add a Google Calendar integration feature next week when we look at refining the app's behavior.
Check out the example below:
The final view type I use in this App is a Card view. This view is great for displaying data with pictures and other contact information. Continue reading to learn about how to set up the Card view with profile pictures and contact information.
Check out the example below:
Polish Views
The next step is to check out the UX tab and see the different options we can use to control for our different view types.
AppSheet groups our views in categories such as, Primary views, Menu views, and Ref views. I make my decision for these view types based on the features that I would like to add for my App.
Let's take a look at the Calendar view options:
To get to this window, navigate to UX → Views → Add New View. Once you have added a new view you can begin polishing up the design of the view. For this example, let’s start by naming our view type Content Calendar. Our next step is to select which table this data is coming from. For this view we are pulling data from our Content Table. Next, we will select the view type as a Calendar view. The position will be center and now we can move onto the view options sections.
The View Options section in a Calendar view is where you can begin polishing the columns you would like to assign to the Calendar view. For example, I am able to select which column I would like to display for the description. For this view, I chose a topic view so that I could see the main topic for the upcoming and past events.
With these updates added we get the following user experience in AppSheet:
Next, let's look at our options to polish up our Form Views:
For our Form views I like to polish these up by navigating to UX → Views → System Views and then selecting the View Type I would like to adjust.
The only major adjustment I made to this view was changing the form style to Side-by-side instead of default.
Another way to polish up form views is from the data tab and selecting which columns are beneficial to show in the form for a great user experience. One important column to hide in form views is the Key Column. This will confuse most users of your App if there is a UNIQUEID() showing in the form view.
With these updates added we get the following user experience in our form view below:
Adjust App Branding Logo, Color Theme, and Format Rules
The last part of defining the user experience is branding, logo, and format rules.
For this app I chose the following settings for Branding. You can get to this view by navigating to UX → Brand.
Check out the example below:
I like light themes for most of my AppSheet Apps because it works better for inputting and viewing data outdoors. The primary color I chose for this app was medium blue. Then, for my app logo I chose the clipboard to inform users of the purpose of the app which is to plan content. For this App I left the launch image and background image blank. For the Header & Footer setting I enabled Show View Name in header, Show Logo in header, and chose the third option for style.
Lastly, we have format rules to adjust for our status column.
Check out the example below:
For this status column I wanted to change the highlight color and text color of the status column based on which status is selected. In our example above we are in the context of the content table and setting the format rule to the following condition: [Status] = “Not Started”
We get the following result once we apply these settings in AppSheet for our Status Column:
Awesome! This is exactly what I had in mind when setting up a guided user experience for my Content Planning App. Next week we will look at Refining the App’s Behavior!
Closing
Defining the User Experience in AppSheet is an essential step to help create a guided user experience for your AppSheet Apps. Make sure you sign up for an AppSheet Training Profile to Download our AppSheet Development Process. The AppSheet Development Process PDF is a great resource to help you develop your AppSheet Apps from idea to deployment!
If you enjoyed this content, we would love to connect with you. Sign up for a Free Tech Talk with me to discuss your project scope and to unlock the full potential of AppSheet!
Happy Developing!
Austin Skidmore
Solution Architect, QREW Technologies
Google Data Analytics Professional Certificate