The Support Group Blog

Google App Maker Cold Calculations

Google App Maker Cold Calculations

Assuming you did meet Google App Maker, you've got your data in your slick new App Maker solution and you've shared it with your colleagues but of course, you want more. You not only need to store, display and capture new information, but you need to operate on it. Now that doesn't mean you have to take out a dirty scalpel or a rusty saw and go to town on your precious data, like some mad doctor, but rather add, subtract and divide it up like an equally mad accountant. So, let's review Google App Maker cold calculations.

Let's say you're a purveyor of fine pies and you want to track the sales of your different tasty creations. Using a traditional spreadsheet app, you might create columns to capture the following information: products, quantity sold and unit price. Then you would probably add a column with a calculation multiplying the quantity sold by the unit price. Then you might even add a formula at the bottom of these calculations to summarize the results into a grand total. This is just some basic accounting that we've all likely done at one time or another in a spreadsheet. However, because App Maker is a dynamic, data-driven application as opposed to a static spreadsheet, this same process is accomplished slightly differently. 

App Maker calculations screenshot 1


Let me lay out the process in a few steps:

1. First, we go to our Widgets palette and add a Label to the page. Instead of attaching the value property directly to a datasource, we'll place a calculation in it. This calculation is very similar to how we might create one in a spreadsheet. Here's the anatomy of the calculation:

App Maker calculations screenshot 2

2. This is where things veer off a bit from how you might approach doing this in a traditional spreadsheet app. We need to add another Label widget to the page. In order to get the sum of all the extended totals that we made in the previous step, we’ll need to reference a slightly different data path. This new path is .items, not .item. We select .items instead of .item, because we want to get a list of all the items, not just one row. Now we use some fancy JavaScript method to sum certain rows of the list. You can learn more about this method here: https://www.w3schools.com/jsref/jsref_reduce.asp. It's important to understand the role of each section:

App Maker calculations screenshot 3

Now we need to have a way to format our results in US dollars. In a spreadsheet app, we would apply the currency format setting to the cell as this option lets us control any number of things like decimal places and leading currency symbol. With App Maker, we need to use some more JavaScript. First, let's find an already created function, by Googling “currency format JavaScript.” When we find one, we copy and paste it into a new client-side script in App Maker:

App Maker calculations screenshot 4

I'm not going to explain the ins and outs of this function because most of it is already set up for you. But this is what you need to focus on when you apply it to your text boxes:

App Maker calculations screenshot 5

 So though it's relatively easy to convert a Google Sheet to an app using App Maker, performing other functions like formatting and calculations are very different. Watch as I create a calculation and format the results.

Join our mailing list to keep up with the latest news and information about custom app development tools. And if you're ready to improve your workflows with your own custom Google App Maker app, we can help.

Schedule a Free Initial Consultation

Share this entry
0 replies