Defining the

User Experience
of Your App

Hansel Miranda
Technical Curriculum Developer
Google Cloud

Creating a great user experience for your app users is a vital element of your app
creation process.

Users must be able to interact with your data easily and get what they need from your
app.

Welcome to the module on defining the user experience of your app.

 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

In this module, you will learn about AppSheet views and how to use the AppSheet
editor to construct the UI for your app.

We also discuss how to customize the user experience of your app using AppSheet’s
branding, data formatting, and localization options.

We will demo some of the features of AppSheet views, and you will complete a lab to
implement the user experience of your app.

Let’s get started!

 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

When making design decisions for your app, you can choose several different ways of
displaying your data. Different “views” enable you to do this.

Views are created by using data from entire tables or from a subset of table rows and
columns. You can also use form views to capture information in the app.
You can use the AppSheet Editor “View” function to control how your data is
presented to the users of your app.

You create and manage views from the Views tab under the UX section of the
navigation menu in the AppSheet editor.
The Views tab displays the app’s current list of views.

To create a new view for the app, click ‘New View’.

The new view form enables you to define the view.

Here, you give the view a unique name, select the table whose data will be used by
the view, the type of view, its position from where the user accesses it in the app, and
other view options.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

There are currently 11 different types of views in AppSheet.

Each view type has its own characteristics and view options.

Let’s review the various types of AppSheet views.

 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

Let’s start by exploring the Calendar view.

The calendar view enables you to display data associated with dates and times in
day, week, or month formats. You can display the calendar as a singular view or as
part of a dashboard view.

AppSheet currently supports integration with Google Calendar, which you can use as
a data source for this view.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

The Deck and Table views summarize the data as a scrollable list of rows.
The Deck view displays information about each row in a "deck-of-cards" format that
includes an image.

The Deck view also has an option to select a layer of data to display as a secondary
view. This 'nested view' provides a way to visualize lists of related data created by
building references between tables.
To display tabular data from a spreadsheet or other data source, use the Table view.
This type of view displays information in a very compact manner and enables the user
to scroll through the data easily to find a given row.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

Gallery is the default view of data that has an image or thumbnail image column.
For tables with an image or thumbnail image column, the Gallery view displays
content in a summary format as an image gallery in the app.
In the summary format, you can control the size of the images displayed in the app:

● Small and tiny: are appropriate for thumbnail images.

● Medium: fits two images side by side on a phone screen.
● Large: shows large images full-width with a vertical scroll.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

To display details about a specific row in a table, use the Detail view.
This view is used to show details about a table row (a single record at a time), and is
automatically used when an item is selected in the Table, Deck, and Gallery views.

The details view enables the user to page left and right through multiple rows.

From the details view in the app preview, you can click the left or right arrows to
move to adjacent rows in the table.

On their device, users can also swipe left or right for similar behavior.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

You use the Map view to display an address, XY position, or latitude/longitude data on
a map in your app.
Address and LatLong data can be displayed on a Google Map in your app.

Addresses are automatically geocoded, and if the Google Maps API is used with the
app, the geocoding precision is enhanced.

LatLong data is represented as comma-separated decimal values, for example:

44.2456, -122.3348.

The XY column type represents a position as point coordinates within an image that
you provide. When a map view is configured with an XY-type map column, it will
display the image in place of the usual map.

For address data, always specify the complete address, including the city, state (if
any), and country. This makes it easier for Google Maps to locate the address.

Each location is displayed as a map pin in the view in the app. For performance
reasons, only a limited number of pins can be displayed at the same time.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

The Chart view enables you to present the app’s data by plotting it on lines, bars,
histograms, and other chart shapes.
When designing a Chart view, you have to decide:
 What values are on the X and Y axes of the chart?

How many individual series are required to be drawn?

● What values should be included on the X and Y axes of the chart?

● How many individual series are required to be drawn on the chart?

 What values are on the X and Y axes of the chart?

How many individual series are required to be drawn?

What type of plot to use?

Row series

Column series

Histogram

● What type of plot to use: line, bar, pie, etc. To choose the type of plot, you
typically pick from:

Row series
This type of plot is appropriate for spreadsheet data where most data is
numeric. You choose a subset of the table columns that will be charted on the
X axis. The Y axis is based on the numeric values in the row’s cells.

The example shows a row series chart using the current inventory column of a
table that contains information on products. The X-axis displays the name of
the column (Current Inventory), and the Y-axis displays numeri values based
on the cell values in this column for the rows in the table.
 What values are on the X and Y axes of the chart?

How many individual series are required to be drawn?

What type of plot to use?

Row series

Column series

Histogram

Column series
This type of plot is appropriate for spreadsheet data with rows corresponding
to items to compare. Every chart column forms a series that is identified by the
column name. Each row (using its key column) forms one entry on the X axis.
The Y axis value is based on the numeric values in the row’s cells.

The example shows a column series chart that plots the same current
inventory data shown earlier. In this case, the X-axis displays the Product
Name value from the rows in the table, and the Y-axis displays values based
on the value in the Current Inventory column.
 What values are on the X and Y axes of the chart?

How many individual series are required to be drawn?

What type of plot to use?

Row series

Column series

Histogram

Histogram
This is a special kind of bar chart to show aggregate distributions. The X axis
gets one entry for each unique value in a column, and the Y axis shows the
count or an aggregate function of row values in that column.

The example shows a histogram plot of the count of products (or rows) that
belong in certain product categories which are the unique values of the
Product Category column in a table.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

A form allows you to capture information from users of your app.

AppSheet automatically generates forms for the tables that have been added to your
app. Using these forms, the end user can add and edit rows in the corresponding
tables via the app.

New forms can also be created, and the order of each form field can be customized.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

The Dashboard view allows you to show multiple views in one place in the app.
 Details

contacts Inline

On a tablet or desktop, a dashboard is shown in an automatically sized grid that can

be customized by the app user.

When the screen size of the device is narrow, like on a phone or small tablet, you can
enable dashboard tabs in the view options when configuring the view.

If the view content is related to or from the same table as data in other views,
enabling 'Interactive Mode' allows content to be dynamically updated as different
entries are selected.
 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

An Onboarding view is a special view that is dedicated to onboarding new users of

your app.
It works like any other type of AppSheet view. You can use the Onboarding view to
present multiple pages of information that the app user can swipe through.
The Onboarding view is backed by a table that has columns for the image, title, and
two short descriptions.

The values from those columns are displayed in the view as shown in the live app
preview.

Each row in the table represents a page in the view.

 Calendar Chart

Deck Form

Table Dashboard

Gallery Onboarding

Detail Card

Map

The Card view is a new way to visualize data more easily via ‘cards’ that dynamically
fill the device screen and enable users to quickly view details and initiate related
actions.
The Card view also includes an intuitive layout method to customize each field that is
displayed on the card.
 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

Now that we’ve discussed the various types of views that are available in AppSheet,
let’s see how they are used when creating the user interface for your app.
When an app is generated, AppSheet automatically creates appropriate views based
on the data tables configured for your app.

To create or modify views for your app, navigate to the Views tab under the UX
section of the navigation menu in the AppSheet editor.

The main panel in the Views tab shows the app’s existing views and includes buttons
to create additional views for your app.

The views listed on this tab are Primary views and System views.
There are many properties that you set when you create or update a view. Some
properties are required and others are optional.

Each view needs a unique view name. To set this, use the view name property.

A view is attached to a single table or slice in the app. Only data from the attached
table or slice can be displayed in the view.

To set the data for the view, use the For this data property to select one of the tables
configured in your app.
The view’s position determines where the view can be accessed from in the app.

Positions include:

● Spots in the navigation bar at the bottom of the screen (left, center, and right)

● In the app’s main menu

● Implicit references while the user navigates through data in the app

To set the position of the view in the app, use the Position property.
Each type of view has type-specific view options that allow you to tailor the
appearance of the view.
All view types have configurable display options. Display options affect how the view
is presented in the app's main menu and in the navigation bar along the bottom of the
app display.

Display options include the following properties:

● A display name that allows you to set the text used to refer to the view. If not
set, the view name is used. You can also set an expression that evaluates to
text to set the view’s display name.

● An icon that is displayed along with the view's Display name. You can choose
an icon from the list available in the app editor; custom icons are not currently
possible. Every view must have an icon. If none is selected, a type-specific
default will be used.

● Show if: is a Yes/No expression that, if provided, determines whether the view
is included as a navigation element in its designated Position. If the
expression evaluates to TRUE, the view will be included.

Each view type also has type-specific behavior options that allow you to tailor the
behavior of the view when the user interacts with it.
Primary views

Primary views are accessed via the bottom bar of the app and are used most often.
You use these views to create and lay out the user interface of your app.

They are frequently used views that are accessed from the bottom navigation bar in
the app.

AppSheet automatically generates primary views based on the tables that are
connected to your app.

The UI that AppSheet creates for your app using these views is essentially
CRUD-based. That is, the UI supports navigation for create, read, update, and delete
operations on data used by the app.

By clicking on the view in the AppSheet editor, you can set the view’s name, the data
table that backs the view, the view type, position, view options, and other
configuration options.
System views

System views are automatically generated views for your app.

You can configure these views by expanding the system views section of the editor
and clicking on each view.
System views include:

● Menu views: These views are accessed from the top left menu in the app,
and generally include views that are only used occasionally by the app user.
 ● Ref (reference) views: A reference view is a view that is only used when
drilling down into your data.
When an app user selects or edits a row from a table view, they are not taken
to any of the top-level views that appear in either the menu or the buttons at
the bottom of your app. Instead, the user is taken to a Ref view. A Ref view is a
view that is only used when drilling down into data, editing or adding data, or
displaying a row via a Ref column.

The system automatically generates reference views for each of the tables in
the app. In the example shown, the Customer details table has a Customer
details_Detail view of type Detail.
Because the table allows additions and updates, there is also a Customer
details_Form view of type Form.
You can modify the system-generated views to easily change the look and feel
of the app.

Note: You can also explicitly define Ref views by creating a new view and setting its
position to "Ref". Any user-defined Ref view takes precedence over a corresponding
system-defined Ref view.
 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

The AppSheet editor has tools that you can use to create a great user experience.
You can use the AppSheet editor’s UX tabs to customize the look and feel of your
app.

You can customize the branding of your app, set localization options based on the
locale of your app’s user, and set different format rules and options for the data used
by the app.

All of these elements help create a professional look and feel for your app.

In this lesson, we discuss how you can configure the appearance of your app, control
how data is displayed in your app, tailor the app user’s experience and customize the
app’s system text including the about page.
Configuring
the appearance
of your app

Let’s explore how to configure the appearance of your app.

You configure the appearance of your app from the Brand tab under the UX section in
the AppSheet editor.

You can set your app’s color theme and primary color. The color theme represents the
color palette used in the app.

Themes control the appearance of the header, footer, text, and icons in your app. You
can choose from Light and Dark themes.

To change the colors used for the visual elements in the app, select one of the
primary colors in the palette or click on "Custom" to select a custom color.
The app logo is the icon that your users will click to launch your app from the device's
home screen.

Consider using an icon that reflects your business or brand. You can select a logo
from the app repository or add your own using ‘custom’.

You can also choose to include or exclude items like the logo and search button in the
app’s header and footer.
The launch image is shown when the application is initially launched and when Sync
is in progress. The background image forms a backdrop for all pages in the app.

To change the launch or background images for your app, select one from the list
provided. You can also use a custom image by providing a publicly accessible URL or
file location that is publicly accessible.

Try different background images to find one that is aesthetically pleasing.

Note that If your application data contains images, a background image can be
distracting. It's also a good idea to keep your images in the same folder as your app's
spreadsheet.
You can also change the color style of the header and footer to use the default black
and white colors, or use the primary color setting in a fully colored or accented fashion
for the footer.
Controlling how
data is displayed
in your app

Let’s review how you can control the display of data in your app.
You can customize how data is displayed in your app using icons and text from the
Format Rules tab under the UX section of the navigation menu.

To implement this, you create format rules for the data tables used by your app.
To create a format rule, you specify:

● The name of the format rule.

● The data table to which this rule applies.

● An optional condition that must be satisfied for the format rule to take effect.
For example, you can apply the rule to any row in the table that has a
matching value in a certain column of the table.

● A list of table columns to which the rule is applied.

● A set of visual and textual format settings that include:

○ An icon to show alongside the rows of data that matched the rule
condition.

○ Text and highlight color.

○ Font size and text attributes like bold, italic, etc.

Tailoring the app’s
user experience

You can also tailor the experience that your users will have when using your app.
The Options tab under the UX section of the navigation menu provides additional
options to tailor the app’s user experience. The options on this tab apply to the entire
app.

The Starting view option identifies the view that the user sees when the app is
launched after installation.

If the Start with About option is enabled, the app’s About page is displayed when the
app is launched.

The Show name and email in the side menu option allows you to display the app
user’s name and email address in the main menu in the app. (if the app requires
sign-in).

You can select various other options in this tab, like disabling app sharing, setting
form styles that control how user input forms are displayed, and image upload sizes,
to name a few.

You can also set default settings for some of the view types used in your app.
Changing
system buttons
and notifications

In this section we review how to change system buttons and notifications when
viewed in the app.
The Localize tab under the UX section of the navigation menu enables you to change
the text shown in system buttons and notifications.

Note that, because most apps target users with specific language and localization
preferences, this simple implementation is usually sufficient to address many of the
app’s localization requirements.

If, however, an app needs to work with different languages simultaneously, this
solution may not be adequate.
 help.appsheet.com/en/articles/961395-locale-support-in-appsheet

You can configure locale support including locale currency using the AppSheet
supported cloud provider’s locale settings.

You can learn more about this topic at the link provided:
https://help.appsheet.com/en/articles/961395-locale-support-in-appsheet
Customizing your
app’s About page

Let’s now see how you can customize the app’s ‘About’ Page.
Every app should have a page that describes the application. This is usually called
the ‘About’ page.

To customize the About page, navigate to the Properties tab under Info in the
navigation menu in the AppSheet UI.
Under the ‘App Properties’ section, you can specify various properties of the app that
include:

● A unique short name or handle for the app.

● The version of the app.

● A short one-line description of the app.

Under the Information for App Users section, you can specify:

● User guidance: A how-to information for users of the app.

● An about url to a website that provides more information about the app.

● The app’s privacy policy and the terms and conditions for users of the app.
The About page is accessed from the main menu in the app.

As discussed in the previous section, you can configure the app to launch this page
as the initial page when the user first launches the app on their device.
 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

Let’s now do a lab to implement the user experience for our customer contacts app.
Lab
Implementing the User Experience for Your App
Using AppSheet

In this lab, you implement the user experience for your app using various UX
components that are available in AppSheet.

You learn how to use views to display images in your app.

You will also learn how to use a map view to plot addresses on a map and use a form
view to collect user input and save that information to a sheet on Google Drive.

Finally, you will customize the look and feel of your app.
 01 Introduction to AppSheet Views

02 Using Views in AppSheet

03 Customizing the UX of your app

Agenda
04 Demo

05 Lab

06 Review

Thank you for completing this module on defining the user experience of your app.
In this module, you learned to:

01 Use Views to design the user experience.

Use AppSheet branding, data formatting, and

02 localization options.

03 Implement the user experience of your app.

In this module, you learned about AppSheet views and how the AppSheet editor is
used to implement the user experience of your app.

We also discussed how to use AppSheet’s branding, data formatting, and localization
options to create a customized view of the app and its data as seen by the end user.

You also completed a lab to implement the user experience of your app using
AppSheet.