Search code examples
google-app-maker

How do you scroll a list in AppMaker?

I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?

I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.

Thanks for any tips or pointers.

Solution

  • You can achieve the desired behavior by doing the following:

    1. In the outline, locate the TablePanel widget and select the List:TableBody widget enter image description here

    2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action. enter image description here

    1. Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this enter image description here

    2. Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.