Add Chat to your AppSheet apps

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.

  1. Navigate to the AppSheet ( appsheet.com) home page, and then click Create > App > Start with a template.

Create App Start with a template.

  1. On the Simple Inventory template app card, click Copy.

Click Copy on the Simple Inventory template.

  1. In the Clone your app dialog, name the app Simple Inventory Chat.

Clone app dialog.

A new copy of the template app is created and loaded into the AppSheet editor.

Simple Inventory App template copy in Appsheet editor.

  1. 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.

Deploying the app.

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

  1. Navigate to the Chat settings page in the AppSheet's Navigator to see the Chat settings.

Chat settings page in the AppSheet editor.

  1. To begin setting up the Chat app, click Create.
  2. In the Enable dialog, click Next to continue.

Enable dialog image.

Important: A message appears, explaining that it takes a few minutes to create a Chat app. Don't refresh this page.

Message explaining not to delete the page.

  1. 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.

Chat app customize page.

  1. 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.

Customizing message text.

  1. Scroll down to Configure actions and click Action.

Configure actions page.

  1. In the Action menu that appears, select the first option, Slash command: Open app view.

Actions contextual menu

  1. Enter the following:

App View

Inventory_log (select from dropdown)

Name

/log

Description

View the inventory log

Slash command options.

  1. Click Next to continue.

Congratulations! Your first Chat app from AppSheet is now deployed!

Chat app is deployed screen.

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:

  1. Open Google Chat.
  2. Click the + icon to the right of Chat.
  3. Search for your app, Simple Inventory Chat.

Add chat app to Chat

  1. Find your app in the results, and then click on it to install it.

Chat app after installation in Chat window.

After installing, your Chat app sends a direct message with a menu card.

  1. 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.

Simple Inventory Chat app.

  1. 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.

Items View not supported in Chat view.

  1. 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.

  1. In the Chat window on the lower left, click on the + icon next to Spaces to add a new Space.

Chat spaces contextual menu.

  1. Click Create a space.
  2. In the dialog, name the new Space whatever you want. The recommended name is Inventory Chat Space, as this codelab refers to it later.

Create a Space dialog.

  1. Click Create to finish creating the new Space.

Once created, the new chat space appears in the bottom-left corner of the Chat window.

Spaces UI.

Add your Chat app to your new Chat Space

  1. 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.
  2. Click on Apps & integrations.

Apps and Integrations.

A dialog appears that allows you to add apps to your Space.

  1. Click the + Add apps button.

Add apps to Inventory Chat Space.

  1. In the dialog, locate the Simple Inventory Chat app, and then click Add.

Adding app to Chat Space.

When the Chat app is finished being added to your Space, it messages the space.

Chat window with new chat app added.

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:

  1. Return to the AppSheet application and open the Chat settings page again (if not still open).
  2. Click Customize to open the Chat app settings.
  3. Click on the + Action button to invoke the contextual menu for Chat actions.

Action button.

  1. Click the Message when data changes option. This generates a complete automation to send messages when any data changes occur.

Actions Contextual Menu.

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.

  1. Click on the Send a chat message process

Chat automation.

This opens the settings window on the right.

  1. Under Message Content and Space ID(s), click Add.

Adding Chat Space to Chat automation.

  1. Click on the Inventory Chat Space option to configure the automation to send messages to this chat space.
  2. Update the Message Text as The Items table was updated.
  3. In the drop-down for the Send an app view (optional) setting, select Items_Detail.

The Message Content should be finalized.

Final message content settings.

  1. 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.

  1. In the Preview window of the AppSheet editor, click on the mobile icon 63e1499db148fde8.pngto show the app in a mobile view. Then click on a record—for example, Saw.

App in mobile preview window.

  1. In the record Details view, click on the Edit icon.

Record Details View.

  1. Change the Description to Cordless powered circular saw.

Editing the description in the Record.

  1. 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!

  1. 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.

Chat UI with message from Chat app appearing.

8. Congratulations

You completed the AppSheet Chat Apps codelab!

Further reading