Presenting relational data as columns in table - google-app-maker

Question

Trying to figure out how to present/edit related data in a table, could really use a push in the right direction!
Broadly, this is looking at subscription data - I want to see how much each client is paying per month. If a client gets upsold halfway through the year - I need the data to reflect that.
So, I have a database of clients, and a database of months, with a Many-One relationship. I also have a "monthlyallocation" database related to both, so I can say Client A has $40 for Jun 2017, for eg. I'm looking to present the data like so in a table, and make the numbers editable:
Jun Jul Aug Sep
Client A 20 20 22 20
Client B 15 20 15 15
Client C null 11 11 12
So I can filter out months (columns), and I can filter out Clients (rows). Any help appreciated!
************EDIT - So I've managed to get partway there.
First, the datasource for the table needs to Client - since I want my table rows to be grouped by client.
Next, the page has a custom property "datenum" which I can change to help filter out columns.
Each column header now becomes #datasources.Months.items..MonthName[#properties.datenum + Insert Column Number Here]. As the datenum changes, the columns display different names. Great.
The last piece of the puzzle though - the values shown IN the table need to filter by the column header name. I can't do the "[#properties.datenum + Insert Column Number Here]" trick here, in case I'm missing a value.. If I did that, I could accidentally get the Sep value under Aug, for eg.
Really hope that makes sense - my first instinct is to make a script that takes the rows datasource, and the "MonthName[#properties.datenum + Insert Column Number Here]", and return the correct value, but maybe I'm just misunderstanding how binding works and there's a simpler way to do this.

Answer 1

For filtering out clients, check out this tutorial: https://developers.google.com/appmaker/tutorials/establish-relations/
It shows how to create a data query with a filter, which is basically what you need for that.
Filtering out columns is a bit tougher, at least I haven't figured an easy way to do it yet.
DISCLAIMER: Out there, there are probably solutions that are much better than this one. This is just to give you a thought.
I've solved this problem by using a custom property List named 'isVisible' for the page the table is in. Then I've added a multi select named 'ColumnPicker' into the page.
After each change in the ColumnPicker, I sync the changes with isVisible. Each column's visibility (for both header and data parts) are connected to:
#widget.root.properties.isVisible[#widget.childIndex]
So using the widget's index, I relate it to the isVisible list.
Here's the sync function I'm using:
function syncColumnPickerValuesWithIsVisible(columnPickerWidget, newValues) {
setIsVisibleAllSameValue(columnPickerWidget, false);
newValues.forEach(function(element) {
columnPickerWidget.root.properties.isVisible[element] = true;
});
}
So in the sync, I first set all isVisible values to false. Then I use the newValues array that the multi select provides to set the correct isVisible elements as true.
=> Items selected from the multi select are shown as columns in the table.