The AppSheet Community recently came together for our first App Jam - a guided session taking you step-by-step through building an app in the AppSheet platform.
In this post, we share the recording and the steps listed out for you to follow along. By following these steps, you will:
- Build an intermediate-level app
- Gain experience with many fundamental skills used in the AppSheet platform
- Gain the knowledge needed to create a wide range of useful apps to enhance your business
If you have any questions, please add a comment below and someone from the Community will get back to you. Okay, letโs get started!
Video demonstration and app template
As you take the steps below, follow along in a live walkthrough demonstration led by the AppSheet team. Each section below includes a link for you to jump to that particular section in the video.
In addition, here is the app template created during the session, which you can copy and customize.
Data
Follow along here in the video demonstration.
Generate a default app and make some small updates to set some initial values, as well as adding a relationship between Requests and Users. A final step is to create a Slice to query filtered data.
- Click on this sheet to make a copy.
Generate an App
2. In the Google Sheet, generate a default app from the sheet by clicking from the menu: โExtensions -> AppSheet -> Create an appโ.
Alternatively, in AppSheet you can click โMake a new app -> Start with your own data -> Choose your data -> google -> <Your spreadsheet from step #1>โ.
Customize the โRequestsโ table
Follow along here in the video demonstration.
3. Click the โDataโ tab on the left and then click the โRequestsโ table.
4. Click โView Columnsโ, and update the following column values:
a. ID - Unclick Show?
b. User - Set 'Initial valueโ -> USEREMAIL().
(Hint: scroll the column properties to the right to access โInitial Valueโ)
c. Status - Click โEditโ (pencil icon) to show the Enum values [Review required, Approved, Rejected].
Note: These were automatically generated from the Sheets data validation in the column. Click โDoneโ to close the dialog.
d. Status - Set โInitial Valueโ -> โReview requiredโ.
e. Approver - Set โInitial Valueโ to -> USEREMAIL().
5. Click SAVE. (Ignore the warnings)
Add a new table, โUsersโ
Follow along here in the video demonstration.
6. Click โTablesโ at the top and then click โAdd Table โUsers"'.
Add a table Reference
7. Edit the โRequestsโ table columns again, change the User columnโs TYPE from Email to Ref and select the โUsersโ table as the source table.
8. Click Done and click SAVE.
9. Click to edit โUsersโ table columns and see that โRelated Requestsโ column has been added.
Create a new Slice
Follow along here in the video demonstration.
10. Click โSlicesโ at the top and click โNew Sliceโ.
11. Name the slice Review required.
a. Set:
i. Source Table: โRequestsโ
ii. Row filter condition: โ= [Status] = "Review required"โ
12. Click SAVE.
UX
Follow along here in the video demonstration.
Update the Requests view and create a new view for โUsersโ. Add some further UI updates to branding, and formatting.
A final step is to add a view that queries from the new Slice created in the Data section.
Update the Requests view
1. Click the โUXโ tab on the left.
2. Click to edit the โRequestsโ view.
a. Change viewtype to -> โCardโ.
3. Click SAVE.
Create a โUsersโ view
4. Create a new View named โUsersโ and set the following:
a. Data -> โUsersโ
b. View type = Leave default (Deck)
c. Display icon: search for โpeopleโ - and select the people icon for the View.
5. Optional: Move the โStatisticsโ view to -> Menu.
6. Click SAVE.
Create a โRequired Reviewsโ view
7. Create a new View named โRequired Reviewsโ
a. Set โFor this Dataโ -> โReview required (Slice)โ
b. Position: Left most
c. Set Display Icon: Search for โAlertโ and select an appropriate icon.
8. Click SAVE.
9. Test by clicking on the new โRequire Reviewsโ action at the bottom of the app and note that only Required Reviews are shown.
Branding and other UI updates
10. Click โBrandโ at the top and change the Theme, Primary color, App logo etc as you wish.
11. Click SAVE.
12. Change the default Font by clicking โOptions->Fontsโ and set Font style from โRobotoโ -> โRubikโ
13. Click SAVE.
14. Click โRequestsโ again to view all the requests.
Setting Format Rules
15. Create a new format rule: Approved Requests. Set the following:
a. โFor this dataโ : Requests
b. โIf this condition is trueโ: [Status] = "Approved"
c. โFormat these columns and actionsโ: Status
d. โIconโ: Search for โcheckโ and select a checkbox icon.
e. โText colorโ: green
16. Click SAVE.
Behavior / Actions
Follow along here in the video demonstration.
Create a new action to add a quick approval button on the form.
1. Click the โBehaviorโ tab on the left and click โNew Actionโ and name it: Approve Request.
a. Select โData: Set value of some columns in this rowโ from the dropdown and set:โ
i. [Status] = โApprovedโ
b. Appearance -> Action Icon
i. Search for โthumbsโ and select a thumbs up icon.
2. Click SAVE.
3. Test the action by selecting a record that needs approval and then clicking on the new Action to approve the request.
Automations
Follow along here in the video demonstration.
Create a new automation to send an email when a Request is created.
1. Click the โAutomationโ tab and click โNew Botโ
2. Select the suggestion: โWhen a Requests record is created or updated, send a notificationโ
3. In the Automation Settings window on the right, change the Event Type to Adds only.
4. Click SAVE.
5. Click on the โTasksโ tab at the top and change to task name to โSend an emailโ
a. Table name: - Requests
b. To: [User]
6. Add or customize the following:
a. Email Subject: New Request!
b. Email Body: A new request: <<[Description]>> was created!
7. Click SAVE.
8. Test the new automation by creating a new request.
9. Now check your email and see the generated response!
10. Return to editing the automation task, and change the Email Type to Embedded App view option.
11. Click SAVE.
12. Add a new request, and check your email again to observe the difference where a form is rendered in the email.
13. Click Approve Request in the embedded Form in the email!
Security filters
Follow along here in the video demonstration.
Add a security filter to only show the ownerโs requests.
1. In AppSheet, click Security -> Security Filters
2. Set Security Filter: [USER] = USEREMAIL()
3. Click SAVE.
4. Click โRequestsโ at bottom of the app and notice that only requests of the owner will show.
Deploying and sharing
Follow along here in the video demonstration.
Deploy the app and then share it with another user to become an editor.
1. Click Manage -> Deploy
2. Click โRun Deployment checkโ
3. Review the deployment check report.
4. Click โMove app to deployed stateโ to deploy the app.
Share the app with another developer.
5. Click +(people) to share the app.
6. Add a userโs email on your same domain.
7. Click the Advanced option.
8. Allow the new user to โEdit definitionโ of the app.
9. Click Done!
Thatโs it! Let us know how it goes for you or if you have any questions in the comments below ๐
LinkedIn
Twitter
