1. Before you begin
Chat apps are web applications or services that run in Google Chat. AppSheet can now enable any AppSheet app to run as a Chat app. Once enabled and published, they provide an additional form factor to the data presented in AppSheet apps
What you'll learn
- How to take an existing template example app and enable Chat apps for it.
- How to customize the behavior of the Chat app.
- How to add your chat app to an existing Workspace Chat space.
- How to build chat automation that sends messages to a Chat space.
What you'll build
This codelab walks you through how to take an existing template app and then enable, configure, and publish it as a chat app. It then shows how to add the Chat app to an existing Chat Space to broadcast chat messages via automation.
What you'll need
- Access to AppSheet development environment ( appsheet.com).
2. Copy the Simple Inventory template app
To get started, copy the Simple Inventory Template app. This app is then chat-enabled in this codelab.
- Navigate to the AppSheet ( appsheet.com) home page, and then click Create > App > Start with a template.
- On the Simple Inventory template app card, click Copy.
- In the Clone your app dialog, name the app Simple Inventory Chat.
A new copy of the template app is created and loaded into the AppSheet editor.
- As the app is loaded, notice a warning about Bots only delivering email to the app owner since it's not deployed. To enable Chat, you need the app to be deployed, so deploy the app by clicking on the Manage page in the editor. Then click Publish, and then click Move app to deployed state.
3. Create and customize a new Chat app
These next steps show how to create a new Chat app in the current AppSheet application.
Create the Chat app
- Navigate to the Chat settings page in the AppSheet's Navigator to see the Chat settings.
- To begin setting up the Chat app, click Create.
- In the Enable dialog, click Next to continue.
Important: A message appears, explaining that it takes a few minutes to create a Chat app. Don't refresh this page.
- As the Chat app is created, the Customize page appears.
At this point the Chat app is created and already published. The following customization steps are all optional.
- Click on First Message and set Message text to customize the first message displayed when the Chat appears. Add any custom message you wish to appear when the Chat app first renders.
- Scroll down to Configure actions and click Action.
- In the Action menu that appears, select the first option, Slash command: Open app view.
- Enter the following:
App View |
|
Name |
|
Description |
|
- Click Next to continue.
Congratulations! Your first Chat app from AppSheet is now deployed!
4. Install your Chat app
Now that your app is deployed, to use it you need to install it in your Chat environment.
To install, follow these next steps:
- Open Google Chat.
- Click the + icon to the right of Chat.
- Search for your app, Simple Inventory Chat.
- Find your app in the results, and then click on it to install it.
After installing, your Chat app sends a direct message with a menu card.
- To test the app, click on Inventory Log (or any of the other links in the Chat card).
The current inventory is displayed in a Chat window.
- Optional: Click on another link, Items. Notice that this opens the app in a new window. This is because the Items view is not supported in the Chat UI.
- Optional: experiment more with the Chat app version of the Simple Inventory Chat app.
5. Add the Chat app to a Chat Space
These next steps adds the Chat app to a Chat Space. This is useful when you want the Chat app to broadcast to a group of people.
Create a new Chat Space
To continue, you must have a Chat Space to work with.
- In the Chat window on the lower left, click on the + icon next to Spaces to add a new Space.
- Click Create a space.
- In the dialog, name the new Space whatever you want. The recommended name is Inventory Chat Space, as this codelab refers to it later.
- Click Create to finish creating the new Space.
Once created, the new chat space appears in the bottom-left corner of the Chat window.
Add your Chat app to your new Chat Space
- To add your Chat app to your Chat Space, click on the Space, and then click on the down arrow to the right of the Chat Space name. This invokes a contextual drop-down menu.
- Click on Apps & integrations.
A dialog appears that allows you to add apps to your Space.
- Click the + Add apps button.
- In the dialog, locate the Simple Inventory Chat app, and then click Add.
When the Chat app is finished being added to your Space, it messages the space.
Now that your new Chat app is installed on your Chat Space, return to the Chat app and add an Automation to send messages to this Chat Space.
6. Build a Chat automation to send messages to the Chat Space
These next steps show how to publish the Chat app:
- Return to the AppSheet application and open the Chat settings page again (if not still open).
- Click Customize to open the Chat app settings.
- Click on the + Action button to invoke the contextual menu for Chat actions.
- Click the Message when data changes option. This generates a complete automation to send messages when any data changes occur.
The new automation appears in the AppSheet editor.
Important: Don't click Save in the upper-right corner yet. You need to configure the automation further.
- Click on the Send a chat message process
This opens the settings window on the right.
- Under Message Content and Space ID(s), click Add.
- Click on the Inventory Chat Space option to configure the automation to send messages to this chat space.
- Update the Message Text as The Items table was updated.
- In the drop-down for the Send an app view (optional) setting, select Items_Detail.
The Message Content should be finalized.
- In the upper-right corner of the AppSheet editor, click Save.
Your Chat app is now configured to send messages to your Chat Space!
7. Test your Chat automation
These next steps allow you to test your automation to see it send messages to your Chat space. In the Preview window of the Appsheet editor, update a record in the Items table. This triggers the automation to send a message to the Chat Space.
- In the Preview window of the AppSheet editor, click on the mobile icon to show the app in a mobile view. Then click on a record—for example, Saw.
- In the record Details view, click on the Edit icon.
- Change the Description to Cordless powered circular saw.
- Click Save in the Preview window, which triggers a message that is sent to your Chat Space.
You should hear a Chat bing notification once the message is received!
- Return to the Chat window, and then click on the Chat Space in the bottom-right corner and view the new message The Items table was updated along with the Items_Detail chat card.
8. Congratulations
You completed the AppSheet Chat Apps codelab!
Further reading
- AppSheet Chat apps official documentation site.