Google App Maker Table cannot select row

Question

I have made an app with two tables to datasources A and B.

B is a relation to A (via common Id field).

So I want to display table A, and below it, Table B.

Ideally, just clicking on a row in A should

a) select that row, and then b) update table B to show the related items in datasource B.

I have not been able to have this done automagically by appmaker, but I could add code for onload on table A like this:

app.datasources.A.query.filters.B.Id._equals = widget.datasource.item.Id;
app.datasources.B.load();

and on the onClick Event in the tableARow itself, I also added:

app.datasources.A.selectIndex(widget.parent.childIndex);
app.datasources.B.query.filters.B.Id._equals = widget.datasource.item.Id;
app.datasources.CurrentValuation.load();

That mostly works, except for the fact that TableA will not actually select the row I clicked on in the UI (selected row is always the second one). The datasource selects the right item for tableB, but the UI shows the wrong row selected in TableA.

I suspect I either need to call another method, or maybe there is an altogether better approach and I'm a bonehead. Either way, thanks for any answers!

Markus Malessa Markus Malessa · Accepted Answer · 2018-08-27T19:11:20

Ideally TableA datasource should be 'A' and Table B should be 'A: B (relation)'. You would also want to prefetch B in your A datasource. If you set a relation on a table datasource then you won't be able to have header sorting or pagination on that table however.

Alternatively if you want to filter TableB based on TableA item, then I would set your filter in the A datasource onItemChange event like this:

var item = datasource.item;

if (item !== null) {
  var ds = app.datasources.B;
  ds.query.filters.A._equals = item;
  ds.load();
}

If you want to stick with what you have, then remove the onLoad code from TableA and change your code for table row onClick event to:

app.datasources.B.query.filters.A._equals = widget.datasource.item;
app.datasources.B.load();

That should fix your current issue and you can always explore the other options as well.

Google App Maker Table cannot select row

1 Answers