Building a Gmail Add-on with Trello
Desmond Morris
Technical Staff, Trello
Wesley Chun
Developer Advocate
Contact Google Workspace Sales Team
Learn more about how Google Workspace can give your teams a better way to connect, create, and collaborate.
CONTACT USLast October, we launched the Gmail Add-ons framework so that developers can build apps that appear inside Gmail. As a part of the launch, we invited a few partners to try out the new platform, including Trello. Trello’s team built an add-on that allows its users to create Trello cards right from their inbox. On Trello, “cards” represent individual tasks that are part of a larger workflow.
To learn more, we sat down with Desmond Morris, Trello’s lead developer for the add-on, to get his thoughts on the experience.
What is the Trello Add-on for Gmail? Why did you decide to build it?
The Gmail Add-on we built for Trello makes it easy for folks to take incoming email messages and immediately send them to a Trello board. Trello’s board and list format gives the user more context as to where a task is in the process.Basically, when you open up an email in Gmail, there is a Trello icon in the top right corner. When you first click the icon, the add-on will ask you to log in to your Trello account. Once authenticated, you are presented with the card creation form. The form is pre-populated with the subject and body of the email, and allows you to select both the board and list to which the card should be added.
Trello already integrates with other G Suite applications—Trello users can attach Google Drive files and folders to Trello cards and send alerts to Hangouts Chat right from Trello. Given the already tight integrations between our two products, building the Gmail Add-on felt like a natural fit.
What was your experience like building the Gmail Add-on?
This was my first look ever at Apps Script. I had never used it before at all. I have experience writing Javascript, so picking up Apps Script was pretty easy.Before I started building, I took a look through the docs and the samples that Google provided. There was a sample add-on which incorporated nearly all of the features provided by the framework. It was great because it basically gave us a set scope for exactly what we wanted to do. So my immediate first step was to dig around and start matching up the ideas I had in mind for the add-on and how the example demonstrated those features.
Did anything surprise you?
At first when I was developing the add-on, I didn’t even touch mobile. When I finally got to the mobile portion, I was surprised to see that the code I’d been working with for the web client also worked on mobile, with no extra code on my part. It was easy, really.I was initially surprised that the Add-ons framework didn't allow for "free rein" control—the ability to add a myriad of HTML/CSS/JS. But then I started using the tools and found that I had enough flexibility to be effective. Limiting what you can do actually helps make these add-ons device agnostic, which in turn relieves much of the burden from the developer.
Do you have any tips for developers who are considering building on the platform?
The tip I would suggest to developers, especially if they are new to the platform, is to make good use of the guides and sample code provided. It was helpful in allowing me to understand what was and was not possible within the platform.The composable nature of the provided widgets made it easy to build simple abstractions around UI patterns. In the add-on, I made use of the Selection Input field widget to provide selectors for users to pick the board and list they want to create cards on. Rendering a selection input widget requires only a few lines of code, but I figured it would be helpful to get down to a single function call:
It's great that we were able to add further integrations with G Suite for our users using add-ons.
To get started, visit the Gmail Add-ons documentation or check out this video library for inspiration to learn how to use Apps Script to build add-ons.
