Google Appmaker: Update form based on selected dropdown option

Question

I have an AppMaker app that has a from based off of one address table/datasource. I can get a form with next/prev buttons, but replaced the key field (name) with a dropdown list of all names (a user can start typing names to jump there, with the dropdown showing).

My hope is that when a user selects from the dropdown, the entire form updates and the next/prev buttons work properly as well (there too many records to page thru with next/prev only). I don't have to have next/prev functionality if it complicates things too much.

Currently the dropdown is working, but I cannot get the index for the next/prev buttons set or the rest of the form to reflect the selected dropdown record.

I've tried to set the "onValueEdit" event to something like this...

var selected = widget.value;
var idx      = widget.options.indexOf(selected);

console.log("Selected: "+selected+", index = "+idx+"\n");
if(idx < 0) {                      //...this error is never hit
  console.log("Index error - setting to zero!\n");
  idx = 0;
}
widget.datasource.loadPage(idx);   //...update form?

Two observations via console logging:

1. The "idx" var is never set to the selected dropdown index reliably, and is often "0" (tho no error msg ever shows), so the "indexOf()" function isn't working as expected.

2. The "selected" var (name) is always correct.

If I call widget.datasource.loadPage(...) with a fixed value (say 5) it has no effect on what is shows in the form either (previous loaded data remains) - obviously not the way to do it :v/

Can you steer a noob in the right direction?

Answer 1

I deleted this page and started again, and replaced the default business name data field with a drop down, I set the dropdown as:

Options: @datasources.Addresses.items 

Value: @datasources.Addresses.item

It works fine?! Not sure what happend in my original page!

UPDATE: So it seems you need to delete both the Value and Options and then re-enter these. The OK will light up when you do.

Also, my original take on App Maker was to build the UI and attach data. That was my first mistake. You build the data then have App Maker build edit/add pages for you.

Answer 2

UPDATE: It's important that Options and Value are set as shown in the image below!

However, I had trouble setting them that way (read: wasted hours!) until I wiped them both completely using More options in the binding picklist, and tried again (I had even tried on a brand new app!). I was being forced to choose ..projections.. and then a final field before the OK button would be available.

Not sure if AppMaker is buggy here or there is something simple I'm not understanding!

None of the coding in my original question is required. Once set this way, binding just works as you would expect it!! All other fields are set as @datasource.item. and are bound to whatever item is chosen. No Events settings are necessary for the dropdown either, as I thought they might be.

Answer 3

If you are using default App Maker form, then you can see that so-called pager, doesn't actually paginate. It triggers prevItem/nextItem datasource methods, in other words it navigates through datasource items, not pages. Here is a quote from App Maker docs:

nextItem: Selects the next item. For Query Datasources, if the current item is the last item on the page, then this loads the next page and selects the first item on the newly loaded page.

So, if you already have all your items loaded(you set query page size for your datasource to 0), then you need just to change selected item within datasource:

// onValueEdit dropdown event 
// assuming, that form and dropdown share same datasource
widget.datasource.selectKey(newValue._key);

If you really have lots of items and it is not feasible to load all of them in one call... then it will be all another story...