WESLEY CHUN: Hey, Alison.
ALISON CARROLL: Hey, Wes.
WESLEY CHUN: How's it going?
ALISON CARROLL: Good.
WESLEY CHUN: Congrats.
I heard you made VP.
ALISON CARROLL: Yeah, thank you.
WESLEY CHUN: Awesome.
Say, what's with all the receipts?
ALISON CARROLL: I've got one hour to file my expense report.
I've got to run to a meeting right now.
It's just so frustrating I have to spend
all this time doing this.
WESLEY CHUN: I'm sorry.
Hey, I've got this cool tool I think you should check out.
ALISON CARROLL: Yeah?
WESLEY CHUN: If you go through all your receipts in Gmail,
there's this little tool you click on at the bottom.
It pulls in all the information off your receipt,
like the date, the amount it was for.
You just plug-in a spreadsheet, and-- boom-- when you're done,
you'll have an entire spreadsheet
full of all your expenses and one place
to do your expense report.
ALISON CARROLL: Really?
That is amazing.
Can you show me how to use that later?
I've got to run.
WESLEY CHUN: OK.
ALISON CARROLL: But let's meet up later.
WESLEY CHUN: All right.
Good seeing you.
ALISON CARROLL: Bye.
[MUSIC PLAYING]
WESLEY CHUN: Sometimes the most powerful of tools
come in small packages.
And today's example is no exception.
Hello, everyone, and welcome to another episode of "The G Suite
Dev Show."
I'm your host, Wesley Chun.
Today, we're solving a common business use case
by building a Gmail add-on.
I'm joined by Sundar Solai, the engineer who built
the tool we'll be discussing.
So, Sundar, what motivated you to write this app?
SUNDAR SOLAI: One problem we all try to tackle in our own way
is managing business expenses.
These days, most businesses send email receipts,
so it's natural to have a tool for users
directly in Gmail, just like when you demoed
the add-on to Alison earlier.
WESLEY CHUN: So what's the add-on again?
Well, it's a mini app that runs within Gmail.
And that cute little interactive UI is called the card.
Cards could be as simple as text dialogs,
but could also include formatted text, images, links, buttons,
and even forms, like ours.
A variety of widgets are available to developers.
The best part is that cards work seamlessly,
whether viewed on the desktop or on mobile.
SUNDAR SOLAI: The add-on features
the code that creates the card.
It also powers the rest of the logic,
including parsing the email and talking to Google Sheets.
So how does one create a Gmail add-on?
The secret is Google Apps Script.
Apps Script is server-side JavaScript
customized to execute in Google's Cloud, giving
your apps access to G Suite data in Drive, Gmail, Sheets,
plus other Google and external services.
This link takes you to videos to learn more Apps Script.
WESLEY CHUN: While add-ons are powered by Apps Script,
they extend the standard functionality
that everyone gets in G Suite apps,
like Docs, Sheets, and now Gmail.
See the blog post for more information.
The Gmail add-on we're covering addresses that exact use case
for processing business expenses.
Sundar, can you give us a bit more on your add-on?
SUNDAR SOLAI: Sure, Wes.
Our sample app is called ExpenseIt.
And like you saw with Alison, it scans the date, amount,
and vendor from email receipts, presenting
a mini form that's automatically filled in with details.
Users can edit, if necessary, then submit those values
to a spreadsheet without ever leaving Gmail.
Let's walk through some of the core parts of the add-on
to give you an idea of how they're built.
Then you'll have enough knowledge
to build your own when an idea inspires you.
The first function is getContextualAddOn.
This is the entry point that's called to launch the add-on.
Gmail add-ons run on a per message basis.
So whatever message you're on, that's
the message ID that's passed to getContextualAddOn.
Here, with the help of some utility functions,
the email message is parsed for the relevant values
from the receipt.
Once we have all the values in the prefills array,
the UI add-on is built and given to Gmail to render.
It calls createExpensesCard to do this.
createExpensesCard creates the primary UI of the add-on
with the form values being optional,
so users can edit if desired, and finally,
a possible submission status.
Because neither parameter is required,
there's a lot more flexibility in terms of the UI
that's rendered.
With the same code, you can have forms
with values but no status, a status-only text dialog
without form fields, or both.
Due to the size of the function, we've
left out the optional status processing code
to focus on the key components here.
The last function we'll preview is submitForm.
Once the user submits the form, we
need to push that data into a Google sheet.
The first part validates the form values,
then it adds a new row into the sheet specified by the URL.
Note we've left out the error checking code
so as to focus on adding the expenses to the sheet.
And that's it.
You've now seen the key pieces of a Gmail add-on.
WESLEY CHUN: Thanks, Sundar.
Want to build ExpenseIt yourself step-by-step?
Then try our Code Lab that will help you do just that.
To see what others have done with Gmail add-ons,
check out the Developers Showcase Talk at Google
Cloud Next.
SUNDAR SOLAI: If you want to do some more research
before tackling the Code Lab, read
the Gmail add-ons overview, or check out the quickstart
for a shorter code sample.
If you're interested in add-ons for Docs, Sheets, or Forms,
check out the third link.
WESLEY CHUN: And this is just the beginning.
Now it's time for you to use your imagination
to think about how else you can extend Gmail to solve a problem
or make users more efficient with Gmail add-ons.
Thanks to Sundar for stopping by today to help us
walk through his cool app.
ALISON CARROLL: Hey, Wes.
WESLEY CHUN: Hey, Alison.
How's it going?
ALISON CARROLL: Oh, I love this Gmail add-on.
Thank you so much for showing it to me.
I did my expense report so fast.
WESLEY CHUN: Sure, no problem, Alison.
We look forward to seeing what you build with Gmail add-ons.
This is Wesley Chun from Google.
Thanks for stopping by "The Dev Show" today.
And we'll see you upstairs in the G Suite.
[MUSIC PLAYING]