Extending App Capabilities with Third-Party Services

There are quite a few open source services available these days. In this chapter, we’ll explore a few external services that will add some flavor to your apps, such as a dynamic image with text and a colored background or a dynamic image-based static chart. We will also see how to set up integrations with Google Workspace applications such as Google Chat.

Throughout this chapter, we will go through a few examples to introduce use cases where we implement third-party services to enhance the functionality of our apps. AppSheet provides a number of different features overall. But the techniques we will learn about in this chapter provide us with additional functions that extend the capabilities of AppSheet. These techniques include improving the visual appearance of your data and connecting to external services.

There are thousands of external services that can communicate with AppSheet. Once you have completed this chapter...

Technical requirements

To assist your learning activities through this chapter, we have prepared a few sample apps that you can access from the portfolio site of this book. You can find the set of sample apps that are prepared for this chapter by visiting https://www.appsheet.com/portfolio/5689905.

There is a total of eight samples. Each of the sample apps associated with this chapter is named Chapter 10_N for your reference.

Let’s start with learning more about images and placeholders.

Displaying images with dynamic text

Note

Name of the sample app to refer to on the portfolio site: Chapter 10_01

https://www.appsheet.com/templates/sample?appGuidString=530fb5cc-1001-4294-9719-c6e23e8dc865

In order to increase the visibility of data on your app, you can apply the AppSheet native format rules. They change the color and add icons so a particular section of data stands out.

However, you cannot change the background color using the existing format rules. To highlight some text with color, we can use external services, which will help us generate instant images. These images come with text and background color. But since these are pure images, your text will stand out. For example, a list of line items may have a status such as Draft or Approved for documentation. With this technique, you can highlight the status of each document, as you can see in the following screenshot:

Figure 10.1 – Sample screenshot with dynamic text in the...

Using QuickChart to generate a dynamic chart as an image

AppSheet natively provides a chart-type view where different types of charts are available to present data in a stunning style, such as a bar chart, line chart, or scatter plot.

However, other basic styles, such as a progress bar, radar, and combo chart, are not provided. To present data in these ways, you can use the external open source chart library QuickChart.

To find out more about this service, visit the following URL: https://quickchart.io/

An AppSheet chart view is generated from a table or slice, meaning the chart will be drawn based on a set of rows and columns. This is good but does not fit the possible use case where the app creator just wants to create a simple chart out of single row and column values.

If the data table has columns with numeric values, including percentages, then we are able to draw the chart using values from a single row, to present the progress and occupancy ratio as a chart.

The...

Integrating with Google Workspace products

Note

Name of the sample app to refer to in the portfolio site: Chapter 10_05 https://www.appsheet.com/templates/sample?appGuidString=f604304b-69dd-44cc-9ba8-c206a6844d5f

Being a Google Workspace product, AppSheet is naturally integrated with various Workspace applications, such as Chat, Gmail, Drive, Sheets, and Docs. In this section, we will introduce a way to integrate your app with Google Chat so that app users can easily post text and other types of messages in target “spaces” inside Chat. To make this happen, AppSheet Automation provides us with a solution.

Please follow this step-by-step guide for integration with Google Chat:

1. To get the endpoint URL from your Google Chat spaces, please go to the Chat space to which you want to submit messages from AppSheet and click Manage webhooks, as shown in the following screenshot:

Figure 10.12 – The Manage webhooks menu in Google Chat

2. You will...

Google Apps Script and use cases

AppSheet provides a webhook as a task for automation, where the app creator can send the webhook request to the external services, to invoke any action or post data externally. This is a useful function, but there is no version of a GET request available natively inside the AppSheet editor. This is because there is no space to store the response body that we receive as a consequence of such an HTTP request.

Furthermore, the response body (generally in JSON format) varies by API. It is impossible to standardize the method to convert the API response body so that AppSheet can consume it. However, in practical use cases, app creators wish to get the data outside AppSheet and consume it within the app. For this use case, Google Apps Script provides a workaround. These are not purely tips and tricks for AppSheet but are associated more with Google Sheets configuration.

In any case, let’s briefly explain how to get data using Google Apps Script...

Summary

Throughout this chapter, we have introduced several practical techniques you can implement in your apps to improve the style of your app views and also extend the capabilities of your apps.

QuickChart provides better insight into the data you present to app users at a glance and makes your app look more professional with modern styling. Rather than reading the number as text, or the percentage or ratio as a plain number, presenting it in the form of a graphic chart will make it easy to read and visually appealing.

A QR code can be used anywhere, and in any type of app you develop. You may have an inventory management app where you have a collection of products with a PRODUCT_ID column. When a new product comes into stock, the app user needs to keep a record by adding new data through the app. Instead of manually typing or selecting the product from a drop-down list, you can present a scanning function where the user scans the QR code attached to the product to instantly...