How to set current item in App Maker datasource?

问题

This seems basic but I can't seem to figure out how to manually set the current item to work with from the datasource?

To illustrate: I have a table and I notice that when I select a row to edit a field, the item of that row becomes the current item, so if I have a link on that row to Navigate to a page, the row of the item selected will be the datasource.item for the navigated page.

However, I also notice that if I just hover over a row, without selecting to edit a field, if then I click on a link to Navigate to a page, it loads the data of whatever row was previously selected/edited. Therefore I'm wondering how to make it so that just on a mouse:over (or click on the shortcut without a prior click on another field in the row) the datasource.item will update to the the row the mouse has gone over instead of requiring to edit a field on the row first. I hope that makes sense.

Assistance is much appreciated. Thank you!

回答1:

Why it happens:

AM code: generate button click event
User code: handle button's click event
User code: navigate user to different page
AM code: destroy DOM of current page
AM code: build DOM for new page
-- dead code after this line
AM code: row click event handler
AM code: change datasource's current item

Row's click event handler never gets control, because row is destroyed by user's code.

What Morfinismo's solution does?

AM code: generate button click event
User code: handle button's click event
AM code: row click event handler
AM code: change datasource's current item
-- moved lines
User code: navigate user to different page
AM code: destroy DOM of current page
AM code: build DOM for new page

Here are more tech details: Event Loop

In App Maker this problem can be solved with

setTimeout
Force current item update in user code

// button's onClick event handler
app.datasource.ListDatasource.selectKey(widget.datasource.item._key);

CustomProperties

// button's onClick event handler
app.pages.ShowMeNext.properties.Key = widget.datasource.item._key;
app.showPage(app.pages.ShowMeNext);

// next page's onAttach event handler
app.datasources.RecordDatasource.filters._key._equals = app.currentPage.properties.Key;
app.datasources.RecordDatasource.load();

URL parameters and history - this approach is used in most template apps, because it also implements deep linking on some extent.

// button's onClick event handler
var params = {
               key: widget.datasource.item._key
             };
var page = app.pages.ShowMeNext;
app.showPage(page);
google.script.history.replace(null, params, page.name);

// next page's onAttach event handler
google.script.url.getLocation(function(location) {
  app.datasources.RecordDatasource.filters._key._equals = location.parameters.key;
});

Passing value between pages using global scope

// button's onClick event handler
window.key = widget.datasource.item._key;

// next page's onAttach event handler
app.datasources.RecordDatasource.filters._key._equals = window.key;

ListDatasource - list/grid/table datasource

RecordDatasource - datasource dedicated for a specific record (single-record datasource)

回答2:

Use a timeout function. This happens because it takes some time for appmaker to change the item in the datasource. You can use something like this on the onClick event handler of the button or link that will take you to the other page:

setTimeout(function(){
  app.showPage(app.pages.pageToNavigate);
},200);

That should take care of the issue. I hope this helps!

来源：https://stackoverflow.com/questions/50104914/how-to-set-current-item-in-app-maker-datasource

标签

google-app-maker