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.
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.
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.
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.
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.
In this new dashboard—available at script.google.com—you will be able to:
View and search all of your projects.
Monitor the health and usage of projects you care about.
View details about individual projects.
View a log of project executions and terminate long-running executions.
Check out the documentation for more detail on the dashboard. If you encounter any issues, please use the feedback link in the left column of the new dashboard or file a bug.
Apps Script API
The new Apps Script dashboard is built on top of a powerful new Apps Script API which replaces and extends the Execution API. This new Apps Script API provides a RESTful interface for developers to create, manage, deploy and execute their scripts from their preferred programming language. This gives you control to create development workflows and deployment strategies that fit your needs. With this new API, you can:
Create, read, update and delete script projects, source files and versions.
Obtain project execution metrics and process data.
Run script functions.
To learn more about the new Apps Script API, check out the documentation. If you encounter any issues please ask a question on Stack Overflow or file a bug.
Apps Script Command Line Interface
Lastly, we’re pleased to introduce the first open-source client of the Apps Script API, a command-line interface tool called clasp (Command Line Apps Script Projects). clasp allows you to access the management functionality of the Apps Script API with intuitive terminal commands and is available as an open-source project on GitHub.
clasp allows developers to create, pull and push Apps Script projects, plus manage deployments and versions with terminal commands and shell scripts. clasp also allows you to write and maintain your Apps Script projects using the development tools of your choice including your native IDE, Git and GitHub.
Sometimes displaying information is not enough—you might want to update it as well. This is especially true when scheduling multiple Calendar events with the same conference details. Say you’re developing a recruiting application that sets up separate events for the candidate and the interviewer; you want to protect the interviewer’s identity, but you also want to make sure all participants join the same conference call. To do this, you can now copy conference information from one event to another by simply writing to conferenceData.
To ensure that only existing Hangouts conferences are copied, and to help safeguard your users against malicious actors, copied conference data will always be verified by the Google Calendar API using the signature field, so don’t forget to copy it too.
Creating a new conference for an event
Finally, the API allows developers to request conference creation. Simply provide a conferenceData.createRequest and set the conferenceDataVersion request parameter to 1 when creating or updating events. Conferences are created asynchronously, but you can always check the status of your request to let your users know what’s happening.
For example, to request conference generation for an existing event (again, your request and event IDs will be different):
Once the statusCode changes to success, the conference information is populated.
Finally, if you are developing a Google Calendar client, you might also want to know beforehand which of the three Hangouts solutions (consumer Hangouts, classic Hangouts and Hangouts Meet) will be used to create the conference. You can get that information by checking allowedConferenceSolutionTypes in a calendar’s conferenceProperties.
To get started, check out the documentation page for managing conference data. We can’t wait to see what you build with these new features in the Google Calendar API.
Realtime API is no longer available for new projects.1
December 11, 2018
Realtime API documents become read-only, and attempts to modify document contents using the API fail.
January 15, 2019
Realtime API is shut down, but a JSON export API remains available.
1 Projects which accessed the Realtime API prior to November 28, 2017 will continue to function as before. All other projects, including new projects, will be blocked from accessing the Realtime API.
Migration tips
Applications using the Realtime API will need to migrate to another data store. Our migration guide provides instructions on how to export Realtime document data and also how that data can be imported into Google Cloud Firestore.
After Realtime API is shut down, we will continue to provide a means for exporting Realtime document contents as JSON.
Additional information and support
You can read more about the deprecation in our documentation. If you have questions that aren’t answered there, see the support page for how to get help.
Specifically, how did you envision your add-on would improve user experience?
Lucidchart is a visual communication platform, but we know our users sometimes need to have their diagrams available in other places. One of the most popular uses for Lucidchart is in presentations, so an add-on for Slides was a natural fit.
Tell us about how you built your solution.
Since we already had existing add-ons for Docs and Sheets, this project was less about building from scratch and more about adapting what we already had, then doing rewrites as needed. We started by abstracting app-specific functionality of our existing add-ons into a pluggable IntegratedApp interface. We then implemented the interface for Slides using the new SlidesApp API. Once we had reached feature parity, we created a few new additions, such as a “Refresh All Inserted Diagrams” button, which users could find more easily than a top bar menu entry.
At the same time, the Lucidchart add-on was undergoing a major UI overhaul, which was the most challenging and time-intensive part of the project. Because we liked the results of the UI update in Slides, we refactored the add-on code to make it more generalizable, then ported it back to our Docs and Sheets add-ons.
Did anything surprise you during the build?
As a security measure, the sidebar iframe can only render elements within its borders, so we couldn’t simply throw a <div> into the center of the screen in client code. Instead, we had to fire an event that the Apps Script backend would handle to create a modal dialog, using printing scriptlets to add whatever data we needed into the dialog’s HTML. Thus, any JS object sent from the sidebar to a modal has to be serialized and deserialized in the process, which means that the sidebar cannot directly detect any events emitted by the modal.
Do you have any code snippets that you can share?
Because we have multiple Google Apps Script add-ons that share lots of functionality, it was very useful to concentrate app-specific code and strings into a wrapper object (called IntegratedApp), which we then referenced elsewhere in the codebase instead of calling SlidesApp directly. So, in the click handler for the insert button, instead of writing this...
And then we keep the app-specific implementation in our IntegratedApp object (abridged for clarity):
var IntegratedApp = {
// direct mapping to function
createAddonMenu: SlidesApp.getUi().createAddonMenu.bind(SlidesApp.getUi()),
// wrapper to create consistent behavior across apps
insertImage: function(image) {
return SlidesApp.getActivePresentation()
.getSelection()
.getCurrentPage()
.insertImage(image);
},
// app-specific strings
phrases: {
docType: 'Slide',
name: 'Google Slides',
nameWithDocType: 'Google Slides Presentation'
}
};
This technique allows us to keep the same UI code and business logic across apps; we only need to change the implementation of the IntegratedApp object. So in Sheets (for example), our IntegratedApp.insertImage() function becomes:
insertImage: function(image) {
var sheet = SpreadsheetApp.getActiveSheet();
var cell = sheet.getActiveCell();
sheet.insertImage(image, cell.getColumn(), cell.getRow());
}
What advice would you give other developers looking to build similar add-ons?
If you are planning to develop multiple similar add-ons that mainly differ in the G Suite app with which they integrate, you should find this technique of reducing the overall code amount by isolating duplicative code immensely useful.
After completing the first add-on, creating another add-on for a new G Suite app is just a matter of updating a new copy of IntegratedApp to work with the new app; the rest of the codebase can be commonly shared. In our case, it means that the updated UI was easily added to our Docs and Sheets add-on after we completed the Slides add-on.
To keep things simple, the chosen images are already available online, accessible by URL. For each image, a new (blank) slide is added then the image is inserted. The key to this script are two lines of JavaScript (given an existing presentationand a link to each image):
var slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);
var image = slide.insertImage(link);
The first line of code adds a new slide while the other inserts an image on the new slide. Both lines are repeated for each image in the collection. While this initial, rudimentary solution works, the slide presentation created doesn't exactly fit the bill. It turns out that adding a few more lines make the application much more useful. See the video for all the details.
Getting started
To get started, check the documentation to learn more about Apps Scripts for Slides, or check out the Translate and Progress Bar sample Add-ons. If you want to dig deeper into the code sample from our video, take a look at the corresponding tutorial. And, if you love watching videos, check out our Apps Script video library or other G Suite Dev Show episodes. If you wish to build applications with Slides outside of the Apps Script environment and want to use your own development tools, you can do so with the Slides (REST) API—check out its documentation and video library.
With all these options, we look forward to seeing the applications you build with Google Slides!
