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.
