US National Parks
An app to show locations, images, and contact information
Function: Customer Engagement
This is a handy app to track a wide selection of locations and details about each location. In this case, it's the list of all National Parks in the US. The app has three views: a Map of all locations (shows up to 20 in a mobile device but is refreshed when you move around in the map), a list of each location, and a gallery with an image from each park. As a filtering option, we tagged every park in Colorado, California, and Florida to display a tree icon and change the title color to green. The user can mark each location as visited, add a photo, and edit the description to include personalized notes. The App also includes contact information for each park and a link to its Wikipedia and National Park Service web pages.
Also see: tablet mode & fullscreen mode
How we built this app
This sample app shows you the following AppSheet features: 1) Gallery view: When you have links to images or image files in your cloud system, AppSheet can automatically provide an image gallery to use in your app. I added links to images from all national parks in the US. https://appsheethelp.zendesk.com/hc/en-us/articles/205111158-Images-and-documents 2) Slices: Slices are filtered views of your data. Go to Advanced Editor > Data > Slices to create your slices. In this app we have a slice for a column we created in the spreadsheet, where the value of the cell is 1 when the name of the State matches "California", "Colorado", or "Florida", allowing us to apply multiple conditions to make a filter in the app. 3) Conditional Formatting: In Advanced Editor > Data > Column Structure, we hid the last column of the spreadsheet as we only want it for the slice. We then went to UX > Formatting and created a formatting rule with the following: (a) Selected the Slice we just created as the data source, then we entered a color and an icon in the formatting menu. After saving, every row in the app that matched the slice would show the conditions. In this case, we added a green icon (fa-tree). 4) Driving Directions: The map loads automatically and has different functionalities, you can view any record in the app and, if you added icons using formatting, then you'll see the icon instead of a pin! Finally, when you select any record, click on the car that appears and the app will load driving directions using the default mapping app in your device. 5) Branding: We added a nice logo, color theme, and launch image to personalize the app experience. The image files must be stored with the cloud provider of the app. Copy this free app and tweak its data to learn more about making mobile apps with AppSheet.
This is a preview of the data sets used in the app.
This is a high-level model of both the data entities and the UI elements in the app.