Google App Maker Sample File
In an effort to promote shared learning and expand Google App Maker resources, we’ve created a sample file to demonstrate some basic Google App Maker capabilities including creating and managing contacts, distributing email messages and tracking various events and activities. You can watch the walkthrough and download the sample file to view some basic functionality in Google App Maker. The file is free and unlocked so feel free to explore and experiment with the tool before or as you begin developing your own apps.
We intentionally made this sample file simple in terms of function and data. We plan to gradually expand the capabilities and scale of the file over time and we will certainly share new developments with you.
Please note, in order to access the file, you will need Google App Maker — which is available to G Suite Business, Education and Enterprise users — and Google Cloud SQL. If you need help installing files in Google App Maker, you can follow our detailed install instructions or watch the demo.
Let’s Take a Look
In our sample file, we’ve created a fictitious company called Career Finder Inc., which hosts career fairs nationwide. The company manages all of the event logistics for employers and job seekers for the career fairs. We wanted to create an example that would provide a broad range of data sources and types and functions. So our sample solution contains the following modules:
Dashboard — summarizes events
Companies — stores contact information of the businesses invited to recruit at the fair
Events — provides details of the career fairs including date, time, location, invitees, attendance and total cost
People — houses contact information of the people within the recruiting companies as well as their historical attendance and email communications
Vendors — aggregates various vendor information such as venues, caterers, printers, staff, etc. and their associated contacts, invoices and costs
Email Templates — features a space to write and store bulk email templates for invitations, reminders and thank you messages
Value Lists — controls the data values used within the app
Watch the video to walk through the practical application of this event management sample file.
Under the Hood
Now let’s explore a few technical aspects of the sample file.
Popup Page
One of the nice things that App Maker allows you to do is to create professional and polished looking workflows. And one of the tools that really makes this easy to do is the Popup style page. When you select the Popup page type, you get a slew of display options under the main section of the Property Editor to control the behavior.
clickOutsideToClose: Enabling this function will allow the user to click outside of the Popup and have it close like it would in other professionally developed apps. Make sure you add a UI to close the Popup, like a close button or another way to advance the workflow.
navigateToClose: This works very much like clickOutsideToClose function but it closes when you navigate to another page. The page can also stay open regardless of where the user navigates; this will ensure that the user eventually responds to the dialog.
hasGlass: This option brings up a background that is transparent grey by default, allowing the Popup to stand out against the page it sprung from.
escapeToClose: If you select this option it will let the user close the Popup simply by hitting the escape key on the keyboard.
Watch as we add a Popup page to the app.
Spinner Color
This trick is not a big technical achievement but rather something kind of cool. You can change the color of the spinner by simply adding code to the Style Editor’s Global area. Please note, entering CSS code in this area will affect all spinners throughout the app.
Use this code to apply a single color for the spinner:
.app-Spinner-AllCircles{
border-color: YourDesiredColor
}
If you want to have it cycle through up to four colors, use this code:
.app-Spinner-FirstCircle {
border-color:YourDesiredColor
}
.app-Spinner-SecondCircle {
border-color:YourDesiredColor
}
.app-Spinner-Third {
border-color:YourDesiredColor
}
.app-Spinner-FourthCircle {
border-color:YourDesiredColor
}
Watch us change the spinner color within the app.
Floating Total
On our Events detail page in the Vendors tab, we display a total of all the expenses associated with an event. The challenge is to display it only when there are line items to total and to have it dynamically float to the bottom of the list as we add rows.
Let’s tackle hiding the total until there are expenses to total first. We accomplish this by adding a condition to the visible option in the Display section of the widget’s Property Editor. Basically, the calculation ensures that the length of the items (totals of the items) is greater than zero. If this condition isn’t true, it hides the widget.
Next, we move on to dynamically floating the total to the bottom of the Vendors expense list, even after rows are added or deleted. Using the Inspect function within Chrome’s Developer Tools, we find the div tag that holds the rows and then we apply an onDataLoad action to the list widget that always inserts the Total below any rows. This is pretty involved but works well!
View the demo.
Merge Fields
The Email Template module of the app demonstrates some pretty neat functionality relating to the placement of merge fields into the body and subject fields of the email templates. The users just have to put their cursor in the location where they want a merge field to go, click on the merge field name from the list and in it goes!
This was accomplished by first adding a Custom Property to the Page called “activeWidget” and then placing an onAttach event on both the Subject and Body widgets that places their name into Custom Property thereby telling App Maker what the active widget is. The whole thing is then is wrapped up in a package, by adding an onClick event on the fields list row that inserts the clicked field into the activeWidget right where the cursor is.
See how easy it is to add merge fields.
We hope you find the sample file helpful. Stay tuned for future enhancements that demonstrate additional basic and advanced functions of the tool.
We welcome your feedback, be it questions, suggestions or general support so feel free to contact us.
By Cathy Harper
Originally published at blog.supportgroup.com.
