Category Archives: Google Apps Developer Blog

Information for Google Apps Developers

Getting started with App Maker: a detailed walkthrough



We recently made App Maker generally available. App Maker is a new, low-code development environment for G Suite that lets you build a wide range of apps for your business and customize processes to help you be more efficient.

Building apps in App Maker is easy. You can declaratively define your app’s backend data, visually design a UI, add custom behaviors with Code (optional) and publish your app quickly.

To get familiar, here’s a quick walkthrough of App Maker’s main app development features.

Building your data backend 

With App Maker, backend Data Models are created in a declarative manner so you don’t have to worry about writing a lot of database code. Supported App Maker Data Models include:
  • Cloud SQL - connects to Google Cloud SQL (GCP account required). 
  • Calculated - a computed virtual model via Scripting or SQL. It can also connect to external data (JDBC, REST). 
  • Directory - fetches your organizational data.

To build Data Model Fields you can either build them from scratch, or use an existing CSV or via a Google Sheet.
After defining the structure of your Data Model you can insert validation rules to limit what data can be saved.
Building relations (one-to-many, many-to-many, etc.) between data models is easily doable in the App Maker Relation Editor.
The App Maker Model editor also provides a variety of other features that include setting up custom queries and filters, securing data access based on Roles as well as triggering Data Events based execution. See the Data Models documentation for more info.

Designing your UI 

App Maker helps you streamline UI development by providing a visual design environment where you can drag and drop UI elements (Widgets) onto a canvas and then set the properties of the widgets using a Property Editor. Or if you want, there are also helpful UI generation wizards that can create ready-made UI structures, including Edit or Insert Forms, Tables and a variety of Charts to further speed UI development.
The look and feel of the UI is governed by CSS, where the default is Google's Material design standard. A variety of style variants are available in the editor so that the author can easily toggle how a widget is rendered via a dropdown menu or direct CSS editing.

The UI is connected to backend data via App Maker’s data-binding feature which allows an author to connect widget properties to data model fields.

The combination of visual design, databinding, CSS UI Styling with, Google Material as a default, all contribute to a productive UI creation experience. For full coverage of App Maker UI concepts. see the UI documentation.

Enrich your apps with code 

Although App Maker does all the heavy lifting when it comes to database communications and UI design, sometimes you need to customize application behaviors. This is where App Maker’s scripting feature comes in.

The scripting language used by App Maker is JavaScript, which is used in both the Browser (Client) or Server. The Server’s runtime environment is Apps Script which provides access to a vast library of G Suite services for common operations with Gmail, Docs, Sheets, Calendar and other services.

App Maker streamlines the process of writing code by providing an intuitive Code Editor that’s equipped with helpful Code Completion.
Plus, App Maker provides syntax error highlighting along with an interactive warning/error indication feature. For more information on App Maker coding topics, see these Scripting Docs.

Previewing and publishing your app 

Finally, App Maker provides an easy-to-use Preview feature where you can quickly test your app on your own. When you’re ready to share your app with users, App Maker provides a comprehensive Publish (or Deployment) feature. To learn more about previewing and publishing apps, see the publishing guide.

Try App Maker today 

Now that you have a general idea of App Maker’s features, have a go at the App Maker Codelab. Note: You’ll need to have App Maker enabled on your domain via G Suite Business/Enterprise or G Suite for Education.
To learn more about App Maker, visit developers.google.com/appmaker or stay tuned for more information!

Developing bots for Hangouts Chat


Do you feel like you live in a chat window, and wish it could do more? Google made Hangouts Chat generally available earlier this year to help. This messaging platform helps users easily collaborate from one place, and features archive and search, tighter G Suite integrations and the ability to create separate, threaded chat rooms. More importantly for developers, Chat includes a bot framework and API. Whether you want to automate common tasks, query information or perform other heavy-lifting, bots can help transform the way you work.

Speed up workflows with bots in Hangouts Chat 

In addition to plain text replies, Hangouts Chat can also display bot responses with richer user interfaces (UIs) called cards which can render header information, structured data, images, links, buttons and more. Users can also interact with these components, like updating displayed information. In the latest episode of the G Suite Dev Show, we talk about how to create a bot that features an updating interactive card.


Pointers on building a Hangouts Chat bot The most important thing when bots receive a message is to determine the event type and take the appropriate action. Here are the types and how each work:
  • ADDED_TO_SPACE 
  • REMOVED_FROM_SPACE - A bot will perform any desired "paperwork" when it is added to or removed from a room or direct message (DM), generically referred to as a "space.” When added to a space, a bot will generally send a welcome message like, "Thank you for adding me to this room." No notifications are sent when a bot is removed from a space (because the bot has been removed… duh!). Developers typically just log that the bot has been removed. 
  • MESSAGE - Receiving an ordinary message sent by users is the most likely scenario. Most bots do "their thing" here in serving the request. 
  • CARD_CLICKED - The last event type occurs when a user clicks on an interactive card. Similar to receiving a standard message, a bot performs its requisite work, including possibly updating the card itself.
Below is some pseudocode summarizing these four event types and represents what a bot would likely do depending on the event type:

function processEvent(req, rsp) {
var event = req.body; // event type received
var message; // JSON response message

if (event.type == 'REMOVED_FROM_SPACE') {
// no response as bot removed from room
return;

} else if (event.type == 'ADDED_TO_SPACE') {
// bot added to room; send welcome message
message = {text: 'Thanks for adding me!'};

} else if (event.type == 'MESSAGE') {
// message received during normal operation
message = responseForMsg(event.message.text);

} else if (event.type == 'CARD_CLICKED') {
// user-click on card UI
var action = event.action;
message = responseForClick(
action.actionMethodName, action.parameters);
}

rsp.send(message);
};

The bot pseudocode as well as the bot featured in the video respond synchronously. Bots performing more time-consuming operations, or those issuing out-of-band notifications, can send messages to spaces in an asynchronous way. This includes messages like notifications when a job is completed, alerts if a server goes down or pings to the Sales team when a new lead is added to the CRM (Customer Relationship Management) system.

Build your bot, your way 

While we demonstrate the bot implemented in JavaScript and Python in the video, one key takeaway is the flexibility of the platform: developers can use any language, any stack or any cloud to create and host their bot implementations. Bots only need to be able to accept HTTP POST requests coming from the Hangouts Chat service to function.

We recently delivered an overview of the bot framework at Google I/O 2018. This comprehensive tour of the framework includes live demos of sample bots in a variety of languages and platforms. Check it out:

To get started, check out this post on the Google Developers blog or this post for a deeper dive into the Python App Engine version of the vote bot featured in the video.

You can learn more about developing bots for Hangouts Chat by reviewing the concept guides as well as this “how-to” on creating bots.

Building a Gmail Add-on with Trello



Last 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:

/**
* A helper function for building dropdown widgets
*/
function buildDropdownWidget(key, title, items, selected) {

var widget = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.DROPDOWN)
.setTitle(title)
.setFieldName(key)

for(var i = 0; i < items.length; i++) {
var itemSelected = selected === items[i].value
widget.addItem(items[i].text, items[i].value, itemSelected)
}

return widget
}

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.

New OAuth protections to reduce risk from malicious apps



As part of our constant efforts to improve Google’s OAuth application ecosystem, we are launching additional protections that can limit the spread of malicious applications. Applications requiring OAuth will be subject to a daily total new user cap and a new user acquisition rate limit. The first restricts the total number of new users that can authorize your application, while the second limits how rapidly your application can acquire new users.

Every application will have its own quotas depending on its history, developer reputation, and risk profile; for more details, see User Limits for Applications using OAuth.

These quotas will be initially set to match your application’s status and current usage so the majority of developers will see no impact. However, if you have received a quota warning about your application, or if you anticipate your application may exceed its quota (due to, for example, a high profile launch), you can take action to improve your application's adoption:

  1. If your application has reached its total new user cap, submit the OAuth Developer Verification Form to request OAuth verification. Once granted, verification removes the new user cap. 
  2. If your application is running into the new user authorization rate limit, you can request a rate limit quota increase for the application. 
We will actively monitor every application’s quota usage and take proactive steps to contact any developer whose application is approaching its quota. This should help prevent interruption due to these quotas for non-malicious developers on our platform.

These enhanced protections will help protect our users and create an OAuth ecosystem where developers can continue to grow and thrive in a safer environment.

New OAuth protections to reduce risk from malicious apps



As part of our constant efforts to improve Google’s OAuth application ecosystem, we are launching additional protections that can limit the spread of malicious applications. Applications requiring OAuth will be subject to a daily total new user cap and a new user acquisition rate limit. The first restricts the total number of new users that can authorize your application, while the second limits how rapidly your application can acquire new users.

Every application will have its own quotas depending on its history, developer reputation, and risk profile; for more details, see User Limits for Applications using OAuth.

These quotas will be initially set to match your application’s status and current usage so the majority of developers will see no impact. However, if you have received a quota warning about your application, or if you anticipate your application may exceed its quota (due to, for example, a high profile launch), you can take action to improve your application's adoption:

  1. If your application has reached its total new user cap, submit the OAuth Developer Verification Form to request OAuth verification. Once granted, verification removes the new user cap. 
  2. If your application is running into the new user authorization rate limit, you can request a rate limit quota increase for the application. 
We will actively monitor every application’s quota usage and take proactive steps to contact any developer whose application is approaching its quota. This should help prevent interruption due to these quotas for non-malicious developers on our platform.

These enhanced protections will help protect our users and create an OAuth ecosystem where developers can continue to grow and thrive in a safer environment.

Introducing the Data Studio Community Connector Codelab

Cross-posted from the Google Developer blog 
Posted by Minhaz Kazi, Developer Advocate, Google Data Studio


Data Studio is Google’s free next gen business intelligence and data visualization platform. Community Connectors for Data Studio let you build connectors to any internet-accessible data source using Google Apps Script. You can build Community Connectors for commercial, enterprise, and personal use. Learn how to build Community Connectors using the Data Studio Community Connector Codelab.

Use the Community Connector Codelab 

The Community Connector Codelab explains how Community Connectors work and provides a step by step tutorial for creating your first Community Connector. You can get started if you have a basic understanding of Javascript and web APIs. You should be able to build your first connector in 30 mins using the Codelab.

If you have previously imported data into Google Sheets using Apps Script, you can use this Codelab to get familiar with the Community Connectors and quickly port your code to fetch your data directly into Data Studio.

Why create your own Community Connector 

Community Connectors can help you to quickly deliver an end-to-end visualization solution that is user-friendly and delivers high user value with low development efforts. Community Connectors can help you build a reporting solution for personal, public, enterprise, or commercial data, and also do explanatory visualizations.

  • If you provide a web based service to customers, you can create template dashboards or even let your users create their own visualization based on the users’ data from your service. 
  • Within an enterprise, you can create serverless and highly scalable reporting solutions where you have complete control over your data and sharing features. 
  • You can create an aggregate view of all your metrics across different commercial platforms and service providers while providing drill down capabilities. 
  • You can create connectors to public and open datasets. Sharing these connectors will enable other users to quickly gain access to these datasets and dive into analysis directly without writing any code. 

By building a Community Connector, you can go from scratch to a push button customized dashboard solution for your service in a matter of hours.

The following dashboard uses Community Connectors to fetch data from Stack Overflow, GitHub, and Twitter. Try using the date filter to view changes across all sources:


This dashboard uses the following Community Connectors:
You can build your own connector to any preferred service and publish it in the Community Connector gallery. The Community Connector gallery now has over 90 Partner Connectors connecting to more than 450 data sources.

Once you have completed the Codelab, view the Community Connector documentation and sample code on the Data Studio open source repository to build your own connector.

Make progress (bars) in presentations with Slides Add-ons



We recently introduced Google Slides Add-ons so developers can add functionality from their apps to ours. Here are examples of Slides Add-ons that some of our partners have already built—remember, you can also add functionality to other apps outside of Slides, like Docs, Sheets, Gmail and more.

When it comes to Slides, if your users are delivering a presentation or watching one, sometimes it's good to know how far along you are in the deck. Wouldn't it be great if Slides featured progress bars?
In the latest episode of the G Suite Dev Show, G Suite engineer Grant Timmerman and I show you how to do exactly that—implement simple progress bars using a Slides Add-on.

Using Google Apps Script, we craft this add-on which lets users turn on or hide progress bars in their presentations. The progress bars are represented as appropriately-sized rectangles at the bottom of slide pages. Here's a snippet of code for createBars(), which adds the rectangle for each slide.

var BAR_ID = 'PROGRESS_BAR_ID';
var BAR_HEIGHT = 10; // px
var presentation = SlidesApp.getActivePresentation();

function createBars() {
var slides = presentation.getSlides();
deleteBars();
for (var i = 0; i < slides.length; ++i) {
var ratioComplete = (i / (slides.length - 1));
var x = 0;
var y = presentation.getPageHeight() - BAR_HEIGHT;
var barWidth = presentation.getPageWidth() * ratioComplete;
if (barWidth > 0) {
var bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE,
x, y, barWidth, BAR_HEIGHT);
bar.getBorder().setTransparent();
bar.setLinkUrl(BAR_ID);
}
}
}

To learn more about this sample and see all of the code, check out the Google Slides Add-on Quickstart. This is just one example of what you can build using Apps Script and add-ons; here’s another example where you can create a slide presentation from a collection of images using a Slides Add-on.

If you want to learn more about Apps Script, check out the video library or view more examples of programmatically accessing Google Slides here. To learn about using Apps Script to create other add-ons, check out this page in the docs.

Develop bot integrations with the Hangouts Chat platform and API



You might have seen that we announced new features in G Suite to help teams transform how they work, including Hangouts Chat, a new messaging platform for enterprise collaboration on web and mobile. Perhaps more interesting is that starting today you’ll be able to craft your own bot integrations using the Hangouts Chat developer platform and API.

Now, you can create bots to streamline work—automate manual tasks or give your users new ways to connect with your application, all with commands issued from chat rooms or direct messages (DMs). Here are some ideas you might consider:
  • Create a bot that can complete simple tasks or query for information 
  • Create a bot that can post asynchronous notifications in any room or DM 
  • Use interactive UI cards to bring your message responses to life 
  • Use Google Apps Script to create custom bots for your colleagues or organization 
For example, a bot can take a location from a user, look it up using the Google Maps API, and display the resulting map right within the same message thread in Hangouts Chat. The bot output you see in the image below is generated from the Apps Script bot integration. It returns the JSON payload just below the same image shown on this page in the documentation.


When messages are sent to an Apps Script bot, the onMessage() function is called and passed an event object. The code below extracts the bot name as well as the location requested by the user. The location is then passed to Google Maps to create the static map as well as an openLink URL that takes the user directly to Google Maps if either the map or "Open in Google Maps" link is clicked.

function onMessage(e) {
var bot = e.message.annotations[0].userMention.user.displayName;
var loc = encodeURI(e.message.text.substring(bot.length+2));
var mapClick = {
"openLink": {
"url": "https://google.com/maps/search/?api=1&query=" + loc
}
};

return {
// see JSON payload in the documentation link above
};
}

Finally, this function returns everything Hangouts Chat needs to render a UI card assuming the appropriate links, data and Google Maps API key were added to the response JSON payload. It may be surprising, but this is the entire bot and follows this common formula: get the user request, collate the results and respond back to the user.

When results are returned immediately like this, it's known as a synchronous bot. Using the API isn't necessary because you're just responding to the HTTP request. If your bot requires additional processing time or must execute a workflow out-of-band, return immediately then post an asynchronous response when the background jobs have completed with data to return. Learn more about bot implementation, its workflow, as well as synchronous vs. asynchronous responses.

Developers are not constrained to using Apps Script, although it is perhaps one of the easiest ways to create and deploy bots. Overall, you can write and host bots on a variety of platforms:
No longer are chat rooms just for conversations. With feature-rich, intelligent bots, users can automate tasks, get critical information or do other heavy-lifting with a simple message. We're excited at the possibilities that await both developers and G Suite users on the new Hangouts Chat platform and API.

Introducing the Gmail Developer Preview of AMP in Email


You may have heard of the open-source framework, Accelerated Mobile Pages (AMP). It’s a framework for developers to create faster-loading mobile content on the web. Beyond simply loading pages faster, AMP now supports building a wide range of rich pages for the web. Today, we’re announcing AMP for Email so that emails can be formatted and sent as AMP documents. As a part of this, we’re also kicking off the Gmail Developer Preview of AMP for Email—so once you’ve built your emails, you’ll be able to test them in Gmail.

AMP for Email opens up several new possibilities:
  • Design interactive components for email using a large library of supported AMP components like amp-carousel, amp-form, amp-bind, amp-list and more
  • Help your content stay up-to-date and interactive for your users.
  • Create more engaging and actionable email experiences
Here’s an example:
Brows and save your favorite items in Pinterest


<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">&lt'/script>
<!-- The AMP4email boilerplate. -->
<style amp4email-boilerplate>body{visibility:hidden}</style>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<style amp-custom> html{font-family: 'Roboto';}
...
</style>
</head>
<body>
<h2>Hello dear user,</h2>
<div class="photo-gallery">
<div class="text">Photos from your latest trips:
<span [text]="+selectedSlide + 1">1</span>/4</div>
<amp-selector layout="container" name="carousel-selector"...>
<amp-carousel controls width="430" height="80">
<amp-img ...></amp-img>
...
</amp-carousel>
</amp-selector>
<amp-carousel ...>
<amp-img ...></amp-img>
...
</amp-carousel>
<div class="trip-location">Please rate your trip location:</div>
<form id="rating" class="p2" method="post" ...>
<fieldset class="rating">
<input name="rating" type="radio" id="rating1" value="1" .../>
<label for="rating1" title="1 stars">★</label>
...
</fieldset>
<div submit-success>
<template type="amp-mustache">
<div class="text">Thanks for rating {{rating}} star(s)!</div>
</template>
</div>
</form>
</div>
</body>
</html>
[Full example in AmpByExample’s Playground]

The AMP for Email spec is available today and will be supported in Gmail later this year. To get preview access to how Gmail will support AMP for Email, sign up here. Since it’s an open spec, we look forward to seeing other email clients adopt it, too.

Publish Gmail Add-ons to your domain


We extended the Gmail Add-on preview toward the end of last year, so that developers can bring the functionality of business apps they rely on directly into Gmail. Now, we’re also making it easier for you to develop and publish Gmail Add-ons domain-wide. Create add-ons for users to access tools directly in their inbox, like your company directory, HR tools or other CRM solutions.

You can now:
  • Publish Gmail Add-ons to users in your G Suite domain. This lets you build and deploy custom add-ons for workflows or processes that are unique to your company.
  • Install Gmail Add-ons for G Suite accounts before they’re published. This way, you can test your add-on before releasing widely in the workplace.
  • Plus, G Suite admins can install add-ons for their domains. This helps G Suite users perform domain-wide installs for any add-on you build, so more people have the chance to try your add-on (or experiment with add-ons domain-wide).
Check out this video to see what it’s like to build an add-on then start building it yourself with this hands-on codelab. You can also view already-built add-ons in the G Suite Marketplace. Or, if you have another project in mind, submit your add-on idea for consideration.

We’re on a mission to make work easier and a big part of that means giving you the tools you need to speed up workflows. Build on!