Hello, and welcome to the Google I/O session: Developing Integrated AppSheet apps
with Workspace's AMP for Email and Apps Script.
My name is Christian Schalk, I’m a Google developer advocate,
and I’m joined today by Sarmad Hashmi, who’s a Google software engineer.
In this video, we'll be introducing two powerful
new AppSheet Workspace integrations with AMP for Email and Apps Script.
We’ll start with Sarmad explaining the AMP for email integration with AppSheet.
Hi, my name is Sarmad Hashmi, I’m a software engineer on AppSheet.
AppSheet today enables you to build no-code applications
and automations backed by common data sources,
such as Google Sheets, Excel, MySQL and many more.
Today, I’m excited about a brand new capability we’re adding to AppSheet
that extends your AppSheet applications into Gmail.
Let's begin with a demo of how users can interact
with AppSheet applications right from within their email.
For this demo, I built a no-code AppSheet application
that lets an employee, let's say, Santosh, request office equipment.
And have their manager, let's say, Maria, approve these types of requests.
And finally, have our fulfillment team deliver the equipment to Santosh.
All application data is in Google Sheet,
and could just as easily be in a Salesforce or MySQL Database.
In this demo, I'll show you how Maria, the manager,
can approve these types of requests right from her email,
leveraging the dynamic AMP email feature in Gmail.
And then I'll show you how you can build
a wide variety of app in Gmail AMP experiences in minutes,
entirely in a no-code manner.
Let’s step into the shoes of an AppSheet application user and request an item.
I’ll select an item, add some justification, and hit Submit Request.
As application editor, I switch to the Google Sheet now,
which my application uses as the data source.
You'll see here that the request I just submitted
was successfully added to the sheet in a separate row.
But note that some columns like approved status and approval notes,
they remain empty because they’ll be filled out later by the approver.
My app already includes an automation
that sends the manager, Maria, an approval request.
So whenever a new request comes in,
Maria gets a dynamic email asking for her approval
for any items that were requested.
Automations in AppSheet allow you to trigger certain steps based on events.
Later, I'll actually show you how I set these up.
For now, though, let's head over to Gmail.
In Maria’s inbox, you’ll see here that she’s received an email from AppSheet.
This is an AMP or dynamic email.
The beauty of this integration is that Maria is interacting
with a fragment of my AppSheet application right here inside Gmail.
She never has to switch away to a browser or the actual application.
The email you'll see here contains the details
I entered earlier as a user, but in addition to that,
it contains some editable fields.
I’ll go ahead and add some approval notes,
and then hit Approve.
And now, again, switching back to app editor perspective,
if I go back to the Google Sheet, I can see now that the status is updated
and my notes were added to the same row as earlier.
The fulfillment team can now take this forward.
All Maria had to do was open up her email and approve the request.
So what's involved in this?
There are only three main components in this approval workflow,
which you can adapt to your own application.
There's the application view where Santosh makes the request,
the automation that sends an email to Maria
and the AMP application view where Maria approves the request.
With just a few steps, your AppSheet app experience is extended into Gmail.
So, what’s so different from what’s in AppSheet today?
Some of you may not be familiar with AppSheet so let me give you a very brief introduction.
AppSheet is Google's no-code platform.
You can build entire applications without ever having to code.
The application you just saw, with all its interactions,
was built entirely with AppSheet, and I’ll show you how in a bit.
Now with AppSheet, you could already build apps
and automations to do most of this.
For example, you could create a mobile app
for equipment requests and create an automation to inform managers via email.
But today, those emails would just contain a link to open the app.
Managers would have to log in and perform the approval in the app itself.
And that's what we've now enhanced with dynamic emails.
Dynamic emails render application views directly inside Gmail by leveraging AMP.
This is simple but powerful.
Now, let me show you how it all comes together in AppSheet.
I’ll go back to AppSheet to see how it’s all configured in the application editor.
Here’s the request view that Santosh used to request an item.
And here’s the approver view, which is similar to the one Maria saw in her email,
The only difference is, that right now,
this view doesn't contain any editable fields,
but we want the approval status and approval notes fields
to be editable, just like we had in the email.
So, here in the application editor, I'm going to add some quick edit fields
which enable managers to edit those fields from within this view.
You’ll see now that in the application, the fields are editable.
And I did this all in just a few clicks.
So now, let's head over to the automation tab
and see how we can configure this view in a dynamic email.
Here's an automation I already have that sends a simple email to approvers
whenever a request is created.
All the email does now is send the approver a link to open the request in the app.
Here is that step.
I’m going to update it so that it now sends the approver view in a dynamic email instead.
Here, also like the AMP email task, select the approver view,
enter Maria’s email, and hit Save.
This automation will now take the selected view,
convert it into a dynamic email, and send it off to Maria for approval.
In a couple of steps, and without writing any code,
I created an automated approval workflow that takes minimal human effort.
With AppSheet applications and dynamic emails
the possibilities for rich email interactions are endless.
In just a few seconds and without any code,
you can construct a logical application view
and render it through dynamic email
so that users can respond to it within their Gmail inbox.
I hope that you can see from this simple example.
the value that AMP brings to your existing AppSheet
no-code applications and process automations.
Thank you.
Thank you, Sarmad, and hello again from Christian.
I’ll now introduce the new AppSheet and Apps Script integration feature.
I should point out that this feature is currently
in limited preview and is expected to change over time.
We want to give you at least a general idea
of how this new feature currently works today.
Some basic assumptions before continuing, though.
You'll need to be familiar with Apps Script's development
and, more importantly, Apps Script project configuration and deployment.
You'll also need to be familiar with GCP project configuration,
as well as how to set up OAuth clients.
On the AppSheet side, you’ll need to be familiar with basic AppSheet development,
including setting up webhooks, as well as general account configuration.
So at a high level, the integration works
by having an AppSheet webhook call and Apps Script function
that belongs to an Apps Script project that has been deployed as an API executable.
If you don’t know what some of those terms mean,
no worries, we'll walk through them in more detail.
Once you’ve set up this integration,
it enables some very sophisticated hybrid Apps Script and AppSheet applications.
For example, in our demo, we'll show how you can connect
an AppSheet front-end application to capture photos,
and then pass these photos to an Apps Script function,
which places them into a Google Slides presentation.
Before showing the demo,
let’s briefly walk through the necessary configuration steps for GCP,
Apps Script and AppSheet.
Starting off with GCP, you'll first have to enable
the Apps Script API in your GCP project.
You'll also need to take note of the project number.
Finally, you’ll need to set up an OAuth web app client ID and secret,
as you'll need these when configuring AppSheet.
On the Apps Script side, you’ll want to create or identify an Apps Script function
that you wish to call from AppSheet.
You'll then need to associate
your Apps Script function's project with your GCP project
by setting it up with the GCP project number that you saved in the prior step.
Finally, you’ll need to deploy the Apps Script project as an API executable.
As you deploy, save the deployment ID,
as well as any OAuth scopes associated with the project,
as AppSheet will need these as well.
Switching over to the AppSheet configuration.
In your AppSheet accounts page, you’ll add a new outbound channel integration
of type Appscript beta.
In addition to naming your channel, you’ll set the channel options
with your GCP OAuth client ID and secret, as well as any Apps Script project scopes.
You're almost done.
You can now build applications that can call Apps Script functions.
You’ll still need to configure a webhook, though, to call your Apps Script function.
Let’s walk through that now.
So for our final steps, you'll first need any basic app
that can save data that can be used as an Apps Script function parameter.
For example, image URL.
To trigger the call to Apps Script,
you'll need to create a workflow or automation task
to trigger a webhook when a row is added.
You’ll then need to configure the webhook with the following:
Set Apps Script as the preset option as well as the deployment ID that you saved
from your Apps Script project deployment; not the script ID, that is.
The Apps Script function name to be called by the webhook,
as well as any function parameters that are needed,
such as the image URL example.
And that's it.
Once the setup is complete, you can run the app
and trigger the webhook by adding a new row.
Let's now switch to the demo to see an example
of a hybrid AppSheet Apps Script app in action.
What I've done is I've created a simple demo app here
in AppSheet where, essentially, I'm able to save any images
in an image URL and a title.
And so, I built up a couple of images here.
And the way it works is that whenever I save this record
in my app here, it will call an Apps Script function,
and then the Apps Script function will then add
the image URL as well as the title.
So, if every time I inserted a new record,
I get a new slide appended to my slide deck here.
So let's dig a little bit deeper on the application itself.
So, first off, in order for me to act on when the new record is created,
I’ve created a simple workflow rule that we’ll go through
and it’ll call the Apps Script function, and it will run this task.
It’s a webhook task.
So the webhook task is set up to call the Apps Script function
that takes in the two arguments for image URL and title.
And so, what I can do now is just switch back to the Apps Script function.
So if I show you here, here’s my Apps Script code.
This essentially takes the two arguments and appends that in the slide deck, right?
So, pretty straightforward.
In order for this to work, I had to deploy this project as an API executable.
So I have this API executable and I have this deployment ID.
That’s basically the deployment ID that I specified in the webhook settings.
And also, you may have noticed the other thing is that for the project itself,
I had to set it up so that it’s using...
This Apps Script project is now bound to a GCP project.
And the GCP project has its own OAuth credential,
so client ID and client secret.
And I use those to set up the outbound Apps Script channel,
which is the new feature that AppSheet provides
so that you can actually call the function that's deployed as an executable, right?
So that's basically how it works.
Obviously, that went fairly quickly,
but let’s just go ahead and insert a new record here,
and you’ll see it in action.
So go ahead and grab an image.
All right. And then I’ll say...
So now I have that.
And so now, all I have to do is go over to the slide deck,
and I will see that my new image is also in my presentation.
All right. We’ll switch back over to these slides.
There we go, we have our new slide that got inserted
thanks to calling the Apps Script function.
As you’ve seen in this video,
AppSheet is further enhanced by both the AMP for email integration,
where you can send AppSheet apps over email, and take actions within your application
without leaving Gmail.
And the Apps Script and AppSheet integration
where you can preserve existing Apps Script business logic,
and even extend it with an AppSheet front-end app.
Thank you much for your attention.
And for further info on AMP, Apps Script and AppSheet,
please see these provided links.
Cheers.